快速搞定前端JS面试 -- 第六章 JS-Web-API-DOM

从JS基础知识到JS web API

  1. JS基础知识，规定语法（ECMA 262标准）

  2. JS Web API，网页操作的API（W３C标准）

  3. 前者是后者的基础，两者结合才能真正实际应用

前言

Vue和React框架应用广泛，封装了DOM操作

但是DOM操作一直都是前端工程师的基础和必备知识

只会vue而不懂DOM操作的前端程序员不会长久

要点

  1. DOM 网页的DOM元素文本图片等

  2. BOM 浏览器相关（导航，ul，跳转）

  3. 事件绑定

  4. Ajax网络请求

  5. 存储

第六章 JS-Web-API-DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档

一、DOM的本质

二、DOM节点操作

 1.获取DOM节点

 2. Property

 3. Attribute

三、DOM结构操作

  1. 新增/插入节点

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

  3. 删除子元素

四、DOM性能

五、问题解答

1. DOM是那种数据结构？

2. DOM操作常用的API？

3. Attr和property的区别？

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

六、小结

---

题目

1. DOM是那种数据结构？
2. DOM操作常用的API？
3. Attr和property的区别？
4. 一次性插入多个DOM节点，考虑性能

知识点

1. DOM的本质
2. DOM节点操作
3. DOM结构操作
4. DOM性能

一、DOM的本质

Xml是一种可扩展的标记语言，可以描述任何一种结构的数据

Html是一种特定的xml，结构和xml相同，但规定了标签的名称规范

DOM的本质是从html解析出来的一棵树

    
        
        
        
        
        
    
    
        

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

            
        
        

        
        
    

二、DOM节点操作

 1.获取DOM节点

 2. Property

 3. Attribute

const div1 = document.getElementById('div1')
console.log('div1', div1)
const divList = document.getElementsByTagName('div') // 集合
console.log('divList.length', divList.length)   // 2
console.log('divList[1]', divList[1])     // 第二个div

const containerList = document.getElementsByClassName('container') // 集合
console.log('containerList.length', containerList.length)   // 2
console.log('containerList[1]', containerList[1])    // 第二个div

const pList = document.querySelectorAll('p')    // css选择器
console.log('pList', pList)

const pList = document.querySelectorAll('p')
const p1 = pList[0]

// property 形式，修改JS变量的属性，不会对标签产生影响
p1.style.width = '100px'
console.log( p1.style.width )     // 获取样式:100px
p1.className = 'red'      
console.log( p1.className )     // 获取className:red
console.log(p1.nodeName)     // p
console.log(p1.nodeType)     // 1类型

// attribute形式，修改了标签的属性
p1.setAttribute('data-name', 'imooc')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

Property和attribute

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

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

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

 （使用建议：尽量用property操作，如果必须要改变标签结构时使用attribute）

一些常用的 HTML DOM 方法

getElementById(id) - 获取带有指定 id 的节点（元素） appendChild(node) - 插入新的子节点（元素） removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值 parentNode - 节点（元素）的父节点 childNodes - 节点（元素）的子节点 attributes - 节点（元素）的属性节点

三、DOM结构操作

  1. 新增/插入节点

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

  3. 删除子元素

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// 插入节点
div1.appendChild(newP)
// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)   // p1被移动到div2里
// 获取父元素
console.log( p1.parentNode )    // div2
// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )      // 7(包含4 text和3 p)
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
    if (child.nodeType === 1) {    // 判断是否是
的DOM节点
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)
// 删除节点
div1.removeChild( div1ChildNodesP[0] )

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

四、DOM性能

DOM操作非常‘昂贵’（占用CPU，可能会造成浏览器重排，耗时），因此尽量避免频繁的DOM操作；

对DOM查询做缓存（减少DOM操作）；

将频繁操作改为一次性操作；

  1. DOM查询做缓存

  2. 将频繁操作改为一次性操作

// 操作：在list下插入多个list-item
const list = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`
    // list.appendChild(li)违反频繁操作DOM准则，应该把每次插入作为一个整体，进行一次插入操作
    // 插入文档片段中
    frag.appendChild(li)
}
// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)
console.log(list)

五、问题解答

1. DOM是那种数据结构？

    DOM树

2. DOM操作常用的API？

    DOM节点操作

    DOM结构操作

3. Attr和property的区别？

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

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

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

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

    创建文件片段 createDocumentFragment（）

六、小结

1. DOM的本质
2. DOM节点操作
3. DOM结构操作
4. DOM性能