如图所示，网页是一棵树。
截屏2022-07-22 08.53.14.png
那么JavaScript是如何操纵这棵树的呢？
答案是：浏览器往window上加一个document，JS通过document操纵网页。
这就是Document Object Model 文档对象模型，简称DOM。
DOM常用的API
获取任意元素
//获取元素的API
window.idxxx//或者直接idxxx(id名不能和全局属性冲突)
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]//找到所有有标签为div的元素，后面是数组下标
document.getElementsByClassName('red')[0]//找到类名为red的元素
//以上三个只有需要兼容IE时才用
document.QuerySelector('#idxxx')
document.QuerySelectorAll('red')[0]
//工作中基本使用以上两种
//做demo直接用idxxx
获取特定元素
- 获取html元素
document.documentElement//获取html元素 - 获取head元素
document.head//获取head元素 - 获取body元素
document.body//获取body元素 - 获取窗口（窗口不是元素）
window//获取窗口 - 获取所有元素
document.all//获取所有元素
它也是第六个falsy值，为了区分它只在ie中使用，规定它为假。
元素的六层原型链
截屏2022-07-22 10.02.58.png
节点Node，用
x.nodeType可以得到包括以下的数字：
- 1表示元素Element也就是标签tag
- 3表示文本Text
- 8表示注释Comment
- 9表示文档Document
- 11表示文档片段DocumentFragment
节点的增删改查
创建元素
//创建一个标签节点
let div1 = document.createElement('div')//创建div
document.createElement('style')//创建style
document.createElement('script')//创建script
document.createElement('li')//创建li
//创建一个文本节点
text1 = document.createTextNode('你好')
//在标签里插入文本
div1.appendChild(text1)
div1.innerText('你好')
div1.textContent = '你好'
这样创建的div标签默认只会处于JS线程里面，我们需要把它插入到head或者body中才会生效，document.body.appendChild(div1)
问题来了：如果页面中有div#test1和div#test2
let div = document.createElement('div')
test1.appendChild(div)
test2.appendChild(div)
最终div会存在于test2里面，因为一个元素不能存在于两个地方，除非复制
let div2 = div.cloneNode(true)//复制操作，true为深拷贝
test1.appendChild(div2)
删除元素
parentNode.removeChild(chileNode)//旧方法
childNode.remove()//新方法,兼容性有问题
此方法只是将元素移除，依然存在于JS线程中，如有需要可以返回页面。
如果要彻底删除，在移除后，使其成为空即可
div2.remove()
div2 = null
改元素属性
//改class
div.className = 'red blue'//全覆盖
div.classList.add('red')
//改style
div.style = 'width:100px;color:blue'
//改style的局部
div.style.width = '200px'
div.style.backgroundColor = 'white'
//改data-*属性
div.dataset.x = 'frank'
读标准属性
div.classList / a.href
div.getAttribute('class') / a.getAttribute('href')
改事件处理函数
div.onclick//默认为null
默认点击div不会有任何事件发生，但是如果把div.onclick改为一个函数fn，那么点击div的时候，浏览器就会调用这个函数调用方式如下
fn.call(div, event)
//event则包含了点击事件的所有信息，如坐标
//div被当成this
改内容
//改文本内容
div.innerText = 'xxx'
div.textContent = ''//二者几乎没有区别
//改HTML内容
div.innerHTML = '<strong>重要内容</strong>'
//改标签
div.innerHTML = ''//先清空
div.appendChild(div2)//再加内容
查元素
- 查父级元素
node.parentNode
node.parentElement - 查父级元素的父级元素
node.parentNode.parentNode - 查子代
node.childNodes
node.children//优先用children
//查大儿子
node.firstChild
//查小儿子
node.lastChild
//查看上一个兄弟元素
node.previousSibling
//查看下一个兄弟元素
node.nextSibling
-
查兄弟姐妹
node.parentNode.childNodes//需要排除自己
node.parentNode.children//需要排除自己 -
遍历一个div里所有元素
//遍历一个div所有元素
travel = (node, fn) => {
fn(node)
if (node.children) {
for (let i = 0; i < node.children.length; i++) {
travel(node.children[i], fn)
}
}
}
travel(div1, (node) => console.log(node))
DOM跨线程操作
跨线程操作
各线程各司其职
- JS引擎不能操作界面，只能操作JS
- 渲染引擎不能操作JS，只能操作界面
跨线程通信
document.body.appendChild(div1)
当浏览器发现JS在body里面加了个div1对象，浏览器会通知渲染引擎在页面也增加一个div元素，新增的div元素所有属性都照抄div1对象
截屏2022-07-22 12.58.47.png
属性同步 - 标准属性
对div1标准属性的修改，会被浏览器同步到页面中
包括id，className，title等 - data-*属性
同上 -
非标准属性
只会停留在JS线程中，而不会同步到页面中
截屏2022-07-22 13.07.19.png
properties 和 attributes
- properties是JS中div1的所有属性
- attributes是渲染引擎中div对应标签的属性
大部分情况下，同名properties和attributes值相等
但如果不是标准属性，他俩只会在一开始相等
此外attributes只支持字符串，properties支持字符串和布尔等类型
网友评论