本质

  1. Document Object Model

  2. DOM的本质是从HTML文件解析出来的一棵树

    节点操作

    获取DOM节点

    image.png

    attribute

    使用API
    修改HTML属性，会改变HTML结构。
    image.png

    property

    一种形式，使用 .
    修改对象属性，不会体现到HTML结构中。
    两者都有可能引起DOM的重新渲染
    尽量选择使用property
    image.png

    结构操作

  3. 新增/插入节点
    image.png

  4. 获取子元素列表，获取父元素image.png

  5. 删除子元素
    image.png

    性能

  6. DOM操作非常“昂贵”，避免频繁的DOM操作

  7. 对DOM查询做缓存
    image.png
  8. 将频繁操作改为一次性操作
    image.png

frag相当于一个临时区域，不在DOM中。当插入完成后再插入DOM树中，重新渲染。

相关面试题

  1. DOM是哪种数据结构
    1. DOM树
  2. DOM操作的常用API
    1. 节点操作和结构操作
  3. attr和property的区别
    1. property：修改对象属性，不会体现到HTML结构中
    2. attribute：修改HTML属性，会改变HTML结构
    3. 两个都有可能引起DOM重新渲染
  4. 一次性插入多个DOM节点，优化性能
    1. 对DOM查询做缓存
    2. 将频繁操作改为一次性操作