现在你对一些编程基础已经更加熟悉，我们可以深入探讨浏览器通过 JavaScript 提供的编程接口，来控制 DOM（文档对象模型）。

操作元素节点

网页中的每个元素在文档对象模型（DOM）中都有一个对应的 元素节点。可以通过 JavaScript 的 document 对象访问 DOM。document 行为类似于其他 JavaScript 对象，拥有许多有用的属性和方法，可用于访问 DOM 中的节点。

document.querySelector(selector)

我们先来看一个例子：

document.querySelector() 是一个函数，接收一个 元素选择器 作为参数。这些选择器与用于给 HTML 元素应用 CSS 样式的选择器相同。document.querySelector() 会返回第一个匹配该选择器的元素。如果未找到任何匹配的元素，则返回 null。

在上面的代码中，我们将 <h1> 元素对应的元素节点存储在一个名为 h1 的变量中。但正如你可能注意到的，运行这段代码并不会产生任何明显的效果。
实际上，h1 元素节点本身也是一个 JavaScript 对象，因此我们可以修改这个对象的属性，从而动态地改变页面的 HTML 内容。例如，innerHTML 属性存储了 <h1> 开始标签和结束标签之间的 HTML 内容：

上述示例清楚地展示了 JavaScript 利用 DOM 操控 HTML 内容的能力。现在轮到你来实践了！

练习

将下面的 <p> 元素存储到一个变量中，然后通过程序方式更改其内容。

元素节点具有多种属性，可用于修改关联的 HTML。下面我们再看看几个常用属性。

Element.id

使用 Element.id 可以获取元素节点的 id 属性值。

Element.outerHTML

Element.outerHTML 返回一个字符串形式的值，包含元素的内容以及其开始和结束标签。

元素节点提供了大量可供使用的属性，程序员可以灵活操作。完整的属性列表可参考 MDN 文档。

虽然你不需要记住全部属性，但熟悉一些关键属性将有助于快速进行 DOM 操作。

document.getElementById(id)

如果某个元素具有 id 属性，可以使用 document.getElementById() 函数直接访问它：

作为参考，也可以使用 id 选择器配合 document.querySelector() 达到相同效果。

操作多个元素节点

还有一些函数允许我们访问一组元素节点。

document.querySelectorAll(selector)

假设我们有一个待办事项的无序列表，可以使用 document.querySelectorAll() 将所有列表项存储到一个变量中：

一旦将元素节点存储起来，就可以像数组一样访问它们：

document.getElementsByTagName

此函数也会返回一个类似数组的对象，其中包含所有匹配指定 标签名 的元素：

练习

给定以下 HTML，找出所有类名为 red 的元素，并将其颜色改为 blue。

提示：元素的颜色可通过 Element.style.color 属性更改。请以字符串形式设置该属性的值。