前端面试准备笔记之JavaScript(04)

01. DOM的本质

• xml是一种可扩展的标记性语言，可扩展就是可以描述任何结构的数据，他是一棵树，可以自定义标签，可以自己扩展。
• html也是一种特定的xml，他规定了一些标签的名称，结构与xml是一样的，但是他有一些自己的规定。
• DOM的本质是什么，是浏览器内存里面初始化之后的一个树，是从html文件里面解析出来的一棵树。

02. DOM的节点操作

• 根据id获取元素 document.getElementById('div1')
• 根据标签获取集合 document.getElementsByTagName('div')
• 根据class获取集合 document.getElementsByClassName('.container')
• 根据标签获取集合 document.querySelectorAll('p')

const pList = document.querySelectorAll('p')
const p = pList[0]
console.log(p.style.width)  //获取样式
p.style.width = '100px'  //修改样式
console.log(p.className)  //获取class
p.className = 'p1'  // 修改class

// 获取nodeName 和 nodeType
console.log(p.nodeName)  // 打印标签节点的名称
console.log(p.nodeType) // 节点的类型

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

// attribute 修改的是标签的属性
const pList = document.querySelectorAll('p')
const p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'imooc')
p.getAttribute('style')
p.setAttribute('style', 'font-size:30px')

03. DOM的结构操作

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

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)

// 获取父元素
console.log(p1.parentNode)

// 获取子元素列表
const divChildNodes = div1.childNodes
console.log(div1.childNodes)
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
    if (child.nodeType === 1){
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)

// 删除子元素
div1.removeChild(div1ChildNodesP[0])

04. DOM的性能

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

// 不缓存 DOM 查询结果
for (let = 0; i< document.getElementsByTagName('p').length;i++) {
    // 每次循环，都会计算length，频繁进行DOM查询
}

// 缓存DOM查询的结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i<length;i++){
    // 缓存 length,只进行一次DOM查询
}

// 将频繁的操作改为一次性操作
const listNode = document.getElementById('list')

// 创建一个文档片段，此时还没有插入到DOM树中
const frag = document.createDocumentFragment()

// 执行插入,每次都添加到dom片段中去
for(let x=0; x<10; x++){
    const li = document.createElement("li")
    li.innerHTML = "List item " + x
    frag.appendChild(li)
}

// 都完成之后，在插入到DOM树中去
listNode.appendChild(frag)