DOM 简介

你已经知道，网页是一个包含文本和标签（如标题、段落、链接等）的文档，这些内容使用一种叫做 HTML 的语言编写。让我们以这个简单的网页为例，你可以自由添加自己的信息！

要实现这样的效果，浏览器首先会读取 HTML 代码，并构建出其结构的表示形式，然后在浏览器中显示这一结构。

此外，浏览器还提供了对已渲染网页结构化表示的程序化访问。通过这个接口，你可以动态地更新页面，比如添加或删除元素、修改样式等。这正是创建交互式网页的方式。

网页的这种结构化表示被称为 DOM，即文档对象模型（Document Object Model）。DOM 定义了网页的结构以及与之交互的方式。这意味着它是一种编程接口，也就是 API（应用程序编程接口）。JavaScript 是与 DOM 交互的首选语言。

在互联网发展的早期，每个浏览器都使用自己独特的 DOM，这让试图编写网页的 JavaScript 开发者感到非常困扰。如今，这种情况已经结束。通过万维网联盟（W3C）的努力——一个致力于维护全球网络标准的国际组织，成立于1994年——1998年首次推出了统一的 DOM 标准版本。如今，所有现代浏览器都采用标准化的 DOM。

网页结构

一个网页是由嵌套的标签组成的集合。你可以将网页用一种称为“树”的层次结构来表示。<html> 元素定义了文档为 HTML 格式，并包含两个子元素：<head> 和 <body>，它们各自又包含多个子元素。

以下是对应我们示例 HTML 页面的树形结构图。

Html structure

树中的每一个实体称为一个节点。节点主要有两种类型：

• （蓝色部分）对应于 HTML 标签，如 <body> 或 <p>。这类节点称为元素节点，它们可以包含子节点，称为子节点或孩子。
• （红色部分）对应于页面中的文本内容。这类节点称为文本节点，它们没有子节点。