DOM 编程

DOM非常难用，通常我们不使用DOM，本文记录了一些DOM的API

获取元素/标签

//过时的写法，用于兼容IE
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]

//新的写法
window.idxxx
idxxx
document.querySelector('#idxxx')
document.querySelectorAll('#idxxx')

//获取特定元素
//HTML
document.documentElement
//Head
document.head
//body
document.body
//all
document.all     //第六个falsy值，现多用于适配器

元素的原型链

一个DIV的原型链

1. HTMLDivElement.prototype
2. HTMLElement.prototype
3. Element.prototype
4. Node.prototype
5. EventTarget.prototype
6. Object.prototype

x.nodeType

Node有以下几种：

1. 1 元素Element | 标签Tag
2. 3 文本Text
3. 8 注释Comment
4. 9 文档Document
5. 11 文档片段DocumentFragment
6. ... ...

增删改查

增

//创建一个标签节点
let div1 = document.createElement('div')
document.createElement('style')
document.createElement('script')
document.createElement('li')

//创建一个文本节点
text1 = document.createTextNode('hi')

//标签里插入文本
div1.appendChild(text1)
div1.innerText = 'hi'
div1.textContent = 'hi'

//插入页面里
document.body.appendChild(div)
已在页面中的元素.appendChild(div)

删

childNode.remove()

改

//class
div.className = 'red blue'
div.classList.add('red')

//style
div.style = 'width:100px;color:blue'
div.style.width = '200px'
div.style.backgroundColor = 'white'

//data-*
div.dataset.x = 'abc'

//读标准属性
div.classList
a.href
div.getAttribute('class')
a.getAttribute('href')

//text
div.innerText = 'xxx'
div.textContent = 'xxx'

//html
div.innerHTML = '<strong>importent</strong>'

//Tag
div.innerHTML = '' //先清空
div.appendChild(div2) //再加内容

//parent
newParent.appendChild(div)

查

//parent
node.parentNode | node.parentElement
node.parentNode.parentNode

//children
node.childNodes | node.children

//siblings
node.parentNode.childNodes //排除自己
node.parentNode.children //排除自己
node.firstChild
node.lastChild
node.previousSibling
node.nextSibling

//遍历
travel = (node, fn) => {
    fn(node)
    if (node.children) {
    for (let i = 0; i < node.children.length; i++){
        travel(node.children[i], fn)
    }
 }
}

DOM 特性

DOM 操作跨线程

JS引擎需要通过渲染引擎操作页面

属性同步

• 标准属性（id，className，title等）的修改会被立即同步到页面中
• data-*属性的修改会被立即同步到页面中
• 非标准属性的修改只会停留在JS线程中，不会被同步到页面中

如果有自定义属性需要在修改后被同步到页面中，需要使用data-作为前缀

property 和 attribute 的异同

两者都表示属性：

property:JS线程理解的属性

attribute:渲染引擎理解的属性

区别：

attribute只支持字符串

property支持字符串、布尔等多种类型

注意：

大部分时候同名的attribute和property值相等。如果不是标准属性，那么这两个属性值只在一开始时相等