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

本文链接：https://blog.csdn.net/2401_84097774/article/details/138099263

3. 删除子元素

四、DOM性能

五、问题解答

1. DOM是那种数据结构？

2. DOM操作常用的API？

3. Attr和property的区别？

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

六、小结

题目

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

知识点

DOM的本质
DOM节点操作
DOM结构操作
DOM性能

一、DOM的本质

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

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

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

dom 演示

一段文字 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()	把指定属性设置或修改为指定的值。