DOM

文档对象模型 (Document Object Model) 是一种操作 HTML 页面结构和样式的方法。它将页面内部结构表示为浏览器所见的样子，并允许开发者使用 JavaScript 进行修改。

树和分支

HTML 是一种类似 XML 的结构，其中元素形成父节点和子节点的结构，就像树的分支一样。有一个根元素（`html`），以及像 `head` 和 `body` 这样的分支，每个分支都有自己的子分支。因此，DOM 也被称为DOM 树。

在 JavaScript 中，经常会通过选择一个元素并修改其某些属性来修改 DOM。要从 JavaScript 访问 DOM，需要使用 `document` 对象。它由浏览器提供，并允许页面上的代码与内容进行交互。

首先需要了解如何获取一个元素。有多种方法可以做到这一点，并且浏览器支持不同的方法。我们将从支持最广泛的方法开始，然后介绍最新的、最实用的方法。

`document.getElementById` 是一个用于获取元素的方法——正如其名，它是通过元素的 ID 来获取的。


var pageHeader = document.getElementById('page-header');

然后就可以操作 `pageHeader` 元素了——可以更改其大小和颜色，还可以声明其他代码来处理元素被点击或鼠标悬停的事件。它几乎被所有您需要关心的浏览器所支持。

`document.getElementsByTagName` 的工作方式与 `getElementById` 非常相似，不同之处在于它接受一个标签名（例如 `a`、`ul`、`li` 等）而不是 ID，并返回一个NodeList，这本质上是一个 DOM 元素的数组。

`document.getElementsByClassName` 返回的 NodeList 类型与 `getElementsByTagName` 相同，不同之处在于您传递的是一个要匹配的类名，而不是标签名。

现代浏览器提供了一些新方法，它们允许使用 CSS 选择器，从而使元素选择更加容易。这些方法是 `document.querySelector` 和 `document.querySelectorAll`。


var pageHeader = document.querySelector('#header');
var buttons = document.querySelectorAll(.btn);

`querySelector` 像 `getElementById` 一样，只返回一个元素，而 `querySelectorAll` 返回一个 NodeList。如果多个元素匹配传递给 `querySelector` 的选择器，则只返回第一个。