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

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）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ibute****

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

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

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

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

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-9V4X6dPC-1714193586595)]