子舒的博客
·
DOM－－文档对象模型
💡
原文中文，约9600字，阅读约需23分钟。
📝
内容提要
DOM（文档对象模型）是处理HTML和XML文档的API，通过树状结构展示文档。JavaScript可以通过DOM节点修改文档内容、样式和响应事件。常用方法包括通过ID、名称、标签名和类名获取元素，以及使用querySelector和querySelectorAll选择元素。DOM还支持创建、删除和替换节点，以及处理事件监听等功能。
🎯
关键要点
- DOM（文档对象模型）是处理HTML和XML文档的API，以树状结构展示文档。
- JavaScript可以通过DOM节点修改文档的内容、样式和响应事件。
- 常用的方法包括通过ID、名称、标签名和类名获取元素，以及使用querySelector和querySelectorAll选择元素。
- DOM支持创建、删除和替换节点，以及处理事件监听等功能。
- 可以使用createDocumentFragment来优化多个节点的添加，减少页面渲染次数。
- innerHTML、innerText、outerHTML和outerText的区别在于它们处理元素内容和文本内容的方式。
- isEqualNode和isSameNode用于比较节点的相等性和相同性，前者比较属性，后者比较对象引用。
- hasAttribute和hasAttributes的区别在于前者检查指定属性是否存在，后者检查是否存在任何属性。
❓
延伸问答
DOM是什么？
DOM（文档对象模型）是处理HTML和XML文档的API，以树状结构展示文档。
如何通过JavaScript修改DOM元素？
可以通过DOM节点修改文档的内容、样式和响应事件，例如使用getElementById、getElementsByClassName等方法获取元素。
DOM中常用的元素选择方法有哪些？
常用的方法包括通过ID、名称、标签名和类名获取元素，以及使用querySelector和querySelectorAll选择元素。
什么是createDocumentFragment，它有什么作用？
createDocumentFragment用于优化多个节点的添加，减少页面渲染次数，提升性能。
innerHTML和outerHTML有什么区别？
innerHTML处理元素内容，而outerHTML处理元素及其标签的内容。
isEqualNode和isSameNode有什么不同？
isEqualNode比较节点的属性是否相等，而isSameNode比较节点是否引用同一个对象。
🏷️
标签
➡️
