两种方法轻松找到 DOM 元素

前 3 节回顾：

1、我是一颗树 · DOM

2、回到工位“我”悟出了 DOM 设计的精华

3、打通 DOM 的设计架构

来到 window 的办公室了，我看她正坐着看手机：

她说道：“看你这次挺开心的，应该有很大的进展吧！”

我点点头，把我所做的架构图进行了演示。

window 听完我的汇报后连连点头，说道：“你的设计我非常满意，就按照目前的架构进行设计吧”。

回到工位后，我便开始设计关于查询的功能。还是以前面的代码为例：

1、getElementById 的设计

通过它查出 DOM 中唯一的一个元素。上面的代码中查找元素的 id 是 boxid，查找到的是 h1元素，它是 HTMLHeadingElement 的实例，继承体系为：

可通过 HTMLElement 的 style 属性修改样式，几乎所有的 CSS 样式都可以通过这个 style 属性来修改，比如下面修改元 素的背景颜色 backgroundColor：

2、通过选择器查找元素

开发者可以给 HTML 元素绑定任意选择器，需要设计一个功能可以通过任意选择器找到对应的元素。我给它起名为 querySelectorAll()，它可以帮助开发者通过选择器名找到对应的元素。返回结果为一个类数组 NodeList，具有类似数组的一些操作，比如 items[i]，items.length。而且是静态的，DOM 结构发生变化这个返回值不会跟着变化。

「公众号素燕注：这个功能不仅适用于 document（全DOM查询），还适用于 element（子 DOM 查询）」。

我举个????：

查询结果为：

为了方便开发者，我又设计了一个 querySelector() ，只查找符合条件的第一个元素。

「小技巧：如何确认一个实例属于哪个“类”？比如有一个实例 xxx，可通过 xxx.constructor 来获得它的构造函数」。

本节完！

公众号素燕注：本节内容主要讲解了关于 DOM 中的一些查询接口，是工作中非常高频使用的知识点。大家加油。

---

推荐阅读：

逐渐抹平小程序与web开发体验
上次忘记推荐这本 JavaScript 书籍了
第五阶段 · 浏览器中的灵魂“人物”