HTML 进阶-第十三篇：HTML与JavaScript深度集成-DOM操作进阶（一）

HTML 进阶-第十三篇：HTML与JavaScript深度集成-DOM操作进阶（一）

DOM遍历与查找优化

回顾DOM基本概念

文档对象模型（DOM）是HTML和XML文档的编程接口。它将文档呈现为带有元素、属性和文本的树结构（节点树），使我们能够使用JavaScript对网页的内容、结构和样式进行动态修改。每个HTML元素在DOM中都是一个节点，节点可以有子节点（如元素节点、文本节点等），通过这种树状结构，我们可以轻松地访问和操作页面上的任何元素。

高效查找DOM元素

1. querySelector 和 querySelectorAll 方法
   • querySelector：该方法返回文档中与指定CSS选择器匹配的第一个元素。如果没有找到匹配的元素，则返回 null。它的语法为 document.querySelector(selectors)，其中 selectors 是一个包含CSS选择器的字符串。例如：