vue和react封装了DOM
DOM本质：一棵树
-
DOM节点操作
- 获取DOM节点
- document.getELementById
- document.getElementsByTagName
- document.getElementByClassName
- document.querySelectorAll
- attribute：修改html属性，会改变html结构（标签结构）
对标签节点属性的修改 - property：修改对象属性，不会提现到html结构（标签结构）中
以js对象的形式，来操作和获取dom对象内的属性，改变渲染结构，如style，classname - attribute和property都可能会引起DOM重新渲染
- 建议用property，因为js可能可以避免重复渲染，而attribute是一定会导致重新渲染
- 获取DOM节点
-
DOM结构操作
- 新增/插入节点
appendChild、createElement - 获取子元素列表，获取父元素
- 获取父元素parentNode
- 删除子元素：removeChild
- 新增/插入节点
-
DOM性能
- 操作DOM占CPU比较多
- 对DOM查询做缓存
如for循环的length取得是dom的lenth，可以用变量缓存起来查询出来的dom
// 不缓存dom查询结果：这样每次循环都要执行一次document.getElementByTagName来获取length
for(let i=0;i<document.getElementsByTagName('p').length;i++){
}
// 缓存dom查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for(let i=0;i<length;i++){}
- 频繁操作改成一次性操作（文档片段createDocumentFragment）
- 文档片段没插入之前不存在于dom结构中，游离于dom结构之外，存在于js内存中，还没被渲染，所以不影响dom性能，只对js变量进行操作
