JavaScript--DOM选择器

Posted 2021-08-12 Z && Y

1.DOM选择器

什么是DOM

• 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
• W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
• DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

DOM树

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

• 文档：一个页面就是一个文档，DOM中使用document表示
• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
• 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

---

1.1 获取元素

为什么要获取页面元素？

• 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

常规方法

示例:

使用querySelector() 和 querySelectorAll()

第二种方法是使用 querySelector() 和 querySelectorAll() ，需要了解selector语法，然后使用条件来获取节点，更加方便：

• querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代

语法 补充: CSS选择器语法

// 语法：
    document.querySelector(CSS selectors)
    document.querySelectorAll(CSS selectors)

示例:

    // 通过querySelector获取ID为q1的结点：
    var q1 = document.querySelector('#q1');
    // 通过querySelectorAll获取所有class为item的结点：
    var item = q1.querySelectorAll('.item');

注意：低版本的IE<8不支持 querySelector 和 querySelectorAll 。IE8仅有限支持。

---

---