1. DOM的本质

DOM(Document Object Model)，文档对象模型。DOM的本质是从HTML文件中解析出来的一棵树。DOM的数据结构是树形结构（DOM树）

2. DOM节点操作

2.1 获取DOM节点

一段文字1
一段文字2
一段文字3
一段文字4

2.2 property

property：修改对象属性，不会体现到html结构中。

// querySelectorAll
const pList = document.querySelectorAll('p')
console.log('pList', pList)const p = pList[0]
console.log(p.style.width)
console.log(p.className)p.style.width = '100px'
p.className = 'p1'console.log(p.style.width)
console.log(p.className)

2.3 attribute

attribute：修改html属性，会改变html结构。
property和attribute都会引起DOM重新渲染。

// attribute
const p1 = pList[1]p1.setAttribute('data-name', 'imooc')
console.log(p1.getAttribute('data-name'))p1.setAttribute('style', 'font-size:30px;')
console.log(p1.getAttribute('style'))

3. DOM结构操作

3.1 插入新的节点

// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
newP.className = 'newP'
// 插入节点
div1.appendChild(newP)

3.2 移动已有的节点

// 移动已有节点
const div2 = document.getElementById('div2')
div2.appendChild(p1)

3.3 获取子元素列表

const div1Child = div1.childNodes
console.log(div1Child)

通过判断nodeType，可以取出p标签，nodeType === 1 表示p标签

const div1ChildP = Array.prototype.slice.call(div1.childNodes).filter(a=>{if(a.nodeType === 1){return true}return false
})
console.log(div1ChildP)

3.4 获取父元素

console.log(p1.parentNode)

3.4 删除节点

div1.removeChild(div1ChildP[0])

4. 优化DOM操作性能

DOM操作会占用较多CPU，频繁操作会导致卡顿。
解决方案：

• 对DOM查询做缓存
• 频繁操作改为一次性操作

4.1 对DOM查询做缓存

4.2 频繁操作改为一次性操作

新建10个li，频繁操作的情况：

改为一次性操作：

const list = document.getElementById('list')// 首先，创建一个文档片段，没有插入到DOM结构中
const frag = document.createDocumentFragment()for(let i =0; i < 10; i++){const li = document.createElement('li')li.innerHTML = `List item ${i}`// 然后，再文档片段中插入DOM元素frag.appendChild(li)
}// 最后，统一插入到DOM结构中
list.appendChild(frag)