1.DOM本质

DOM本质从HTML语言或HTML解析出来的一棵树

2.DOM属性

1.Document

Document 就是指这份文件，也就是这份 HTML 档的开端。当浏览器载入 HTML 文档, 它就会成为 Document 对象。

2.Element

Element 就是指 HTML 文件内的各个标签，像是<div>、<span>这样的各种 HTML 标签定义的元素都属于 Element 类型。

3.Text

Text 就是指被各个标签包起来的文字，举个例子：

  1. <span>哈哈哈</span>

这里的“哈哈哈”被 <span> 标签包了起来，它就是这个 Element 的 Text。

4.Attribute

Attribute 类型表示元素的特性。从技术角度讲，这里的特性就是说各个标签里的属性。

5.解析一颗DOM树

  1. <html>
  2.   <head>
  3.     <title>DEMO</title>
  4.   </head>
  5.   <body>
  6.     <h1 class="title">我是标题</h1>
  7.   </body>
  8. </html>

image.png

3.DOM节点操作

  • 获取DOM节点
  • attribute
  • property

1.获取DOM节点

  1. const div1 = document.getElementById('div1')    //获取元素
  2. const divList = document.getElementsByTagName('div')    //获取集合
  3. const containerList = document.getElementsByClassName('.container') //集合
  4. const pList = document.querySelectorAll('p')  //集合

2.DOM节点的property

  1. //js属性操作的一种形式
  2. const PList = document.querySelectorAll('p')
  3. const p = PList[0]
  4. console.log(p.style.with) //获取样式
  5. p.style.with = '100px'    //修改样式
  6. console.log(p.className) // 修改clss
  7. p.className = 'p1' //修改class
  8. //获取nodeName 和  nodeType
  9. console.log(p.nodeName)
  10. console.log(p.nodeType)

3.DOM节点的attribute

  1. const pList = document.querySelectorAll('p')
  2. const p = pList[0]
  3. p.getAttribute('data-name')
  4. p.setAttribute('data-name','id')
  5. p.getAttribute('style')
  6. p.setAttribute('style','font-size:30px;')

4.对比

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

attribute：修改html属性，会改变html结构

两者都有可能引起DOM重新渲染

4.DOM结构操作

  • 新增/插入节点
  • 获取子元素列表，获取父元素
  • 删除子元素

1.新增/插入节点

  1. const div1 = document.getElementById('div1')
  2. //添加新节点
  3. const p1 = document.createElement('p')
  4. p1.innerHtml = 'this is p1'
  5. div1.appendChild(p1) // 添加新创建的元素
  6. const p2 = document.getElementById('p2')
  7. div1.appendChild('p2') //对于已经有的节点  添加节点的时候是将节点移动

2.获取子元素列表，获取父元素

  1. //获取子元素
  2. const div1 = document.getElementById('div1')
  3. const child = div1.childNodes
  4. //获取父元素
  5. const div1 = document.getElementById('div1')
  6. const parent = div1.parentNode

3.删除子元素

  1. const div1 = document.getElementById('div1')
  2. const child = div1.childNodes
  3. div1.removeChild(child[0])

4.DOM性能

  • DOM操作非常昂贵，避免频繁的DOM操作
  • 对DOM查询做缓存
  • 将频繁操作改为一次性操作

1.对DOM查询做缓存
  1. //不缓存DOM查询结果
  2. for(let i = 0;i<document.getElementsByTagName('p').length;i++){
  3.     //每次循环，都会计算length，频繁进行DOM查询
  4. }
  5. //缓存DOM查询结果
  6. const pList = document.getElementsByTagName('p')
  7. const length = pList.length
  8. for(let i = 0;i<length;i++){ 
  9.     //缓存length，只进行一次DOM查询
  10. }

2.将频繁操作改为一次性操作
  1. //频繁操作
  2. const list = document.getElementById('list')
  3. for(let i =0;i<10;i++){
  4.     const li = document.createElement('li')
  5.     li.innerHTML = 'List ITEM ${i}'
  6.     list.appendChild(li)
  7. }
  9. //集合一起插入
  10. const listNode = document.getElementById('list')
  11. //创建一个文档片段，此时还没有插入到DOM树中
  12. const frag = document.createDocumentFragment()
  13. //执行插入
  14. for(let x=0;x<10;x++){
  15.     const li = document.createElement("li") 
  16.     li.innerHTML = "List item " + x
  17.     frag.appendChild(li)  //都完成之后统一插入到dom中
  18. }
  19. listNode.appendChild(frag)

5.典型题

1.DOM是哪种数据结构

树（DOM树）

2.DOM操作常用API

  • DOM节点操作
  • DOM结构操作

3.property和attribute的区别

  • property：修改对象属性，不会体现到html结构中
  • attribute：修改html属性，会改变html结构
  • 两者都有可能引起DOM重新渲染
  • 尽量使用property

4.一次性插入多个DOM节点，考虑性能

使用Fragment