【九月打卡】第20天 BAT大牛带你横扫初级前端JavaScript面试（第二版）

学习课程名称：BAT大牛带你横扫初级前端JavaScript面试（第二版）
章节名称：JS-Web-API-DOM（新版）
讲师姓名：双越

课程内容：

1. 从JS基础到JS-Web-API
2. DOM的本质
3. DOM节点操作
4. DOM性能

DOM：树状结构(即DOM树)

DOM节点操作

获取DOM节点

{
    //获取指定标签元素
    const idElementDom = document.getElementById('指定标签上ID的值')  
    // 获取文档中div标签的集合
    const divList = document.getElementByTagName("div") 
    // 返回当前文档中所有相关元素的集合(通过类名查找)
    const classNameElementDom = document.getElementsByClassName('.wrapper') 
    //获取文档中div的集合
    const domList = document.querySelectorAll('div') 
}

property和attribute比较
property：修改JS对象属性，不会体现到html结构中 （日常工作中，推荐使用，在复用的情况下，不会重新渲染）
attribute：修改 html 属性，会改变html结构 （修改了，必定会重新渲染，影响性能）
两者都有可能引起DOM重新渲染

DOM结构操作

新增/插入节点

 const divone = document.getElementById('div1')
const divtwo = document.getElementById('div2')
 
// 新增节点
const newDiv = document.createElement('div')
newDiv.innerHTML = "this is newDiv"
 
// 插入节点
divone.appendChild(newDiv)
 
// 移动节点：如果原DOM树已有节点，则会执行移动操作
const oldP = document.getElementById("oldp1")
divtwo.appendChild(oldP)

获取子元素列表、获取父元素

// 获取父元素  .parentNode
console.log(oldP.parentNode) // divtwo
 
// 获取子元素
const divoneChildNodes = divone.childNodes
console.log(divone.childNodes) // 含有不同的节点类型
// 为了拿到正确的子元素，需要进行遍历过滤
const divoneChildNodesP = Array.prototype.slice.call(divone.childNodes).filter(child => {
    if(child.nodeType === 1) {
        return true
    }
    return false
})
console.log('divoneChildNodesP',divoneChildNodesP)

DOM性能

DOM操作非常"奢侈"，避免频繁操作DOM操作，面试性能相关的，面试官经常问到。

DOM频繁操作，会导致占用CPU比较多，有可能会导致浏览器的重绘和重排，出现卡顿等问题。

性能优化：

对DOM查询可以做一些缓存

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

const list = document.getElementById('list')
 
// 创建一个文档片段，此时还没有插入到 DOM 结构中
 
for (let i = 0;i<9999; i++) {
    const li = document.createElement('li')
    li.innerHTML = `item ${i}`
    // 先插入文档片段中
    frag.appendChild(li)
}
 
// 循环完成，再统一插入到 DOM 结构中
list.appendChild(frag)