前端面试准备笔记之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)

巴特西

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

01. DOM的本质

02. DOM的节点操作

03. DOM的结构操作

04. DOM的性能

最新文章

热门文章