6.DOM

• 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结构操作

  • 新增/插入节点
    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变量进行操作