HTML DOM 基础：用「家族树」理解网页操控术

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），也就是DOM。

DOM 是JavaScript 操作网页的接口，它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作(比如对元素增删内容)。

浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOMTree)。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM不是JavaScript语法的一部分，但是DOM 操作是JavaScript最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，javaScript 也是最常用于 DOM 操作的语言。

一、DOM 是什么？—— 网页的「基因图谱」

1. 基础概念

假如你收到一个乐高玩具套装，DOM 就是盒子里那张详细的组装说明书：

📦 HTML：就是玩具盒子里的积木零件（标签元素）
🧬 DOM：就是按说明书组装成的立体模型结构
🎨 CSS ：给模型涂颜色、贴装饰贴纸
🤖 JavaScript：让模型发光、旋转的电动马达

你可以通过DOM这个对象模型，让JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

2. DOM 树形结构演示

DOM 的最小组成单位叫做节点(node)。每个节点可以看作是文档树的一片叶子
文档的树形结构(DOM 树)，就是由各种不同类型的节点组成。
在这里插入图片描述

对应的 DOM 树：

文档（爷爷）  
└─ <html>（爸爸）  └─ <body>（儿子）  ├─ <h1>（大孙子）  └─ <div class="content">（二孙子）  ├─ <p>（曾孙1）  └─ <p>（曾孙2）

节点的类型有七种：

Document：整个文档树的顶层节点
DocumenType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的属性(比如class=“right”)
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构倒过来就像一棵树。

二、查找HTML元素 —— DOM 世界的「人脸识别」

3. 基础查找方法

方法 1：家族寻亲（标签选择）

document.getElementsByTagName 方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象(HTML collection 实例)，可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。

/*使用getElementsByTagName方法获取所有的<div>元素，
并将这些元素存储在一个名为divs的数组中。*/ 
var divs = document.getElementsByTagName("div");

方法 2：职业普查（类名选择）

document.getElementsByClassName()方法搜索HTML元素的类名，返回拥有相同类名的所有元素的列表。

// 找到所有穿白大褂的医生  
var doctors = document.getElementsByClassName("doctor");

方法3：智能搜索（CSS选择器）

document.querySelector()方法查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素。

// 找穿红色外套、戴眼镜的女性  
var target = document.querySelector(".red-coat.glasses");  
// 返回 class="intro" 的所有 <p> 元素列表  
var group = document.querySelectorAll("p.intro");

方法4：身份证查询（ID选择）

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。因为元素的 id 是唯一的，使用document.getElementById()方法。

javascript  
// 通过身份证号找人  
const title = document.getElementById("mainTitle");  
// 示例：<h1 id="mainTitle">主标题</h1>

方法5：通过 HTML 对象选择器查找 HTML 对象

document.anchors：document.anchors 属性返回一个包含文档中所有元素的集合，这些元素具有name属性。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><a name="html">HTML 教程</a><br><a name="css">CSS 教程</a><br><a name="JavaScript">JavaScript 教程</a><br><a href="#">JavaScript 教程</a><p class="count">锚的数量为:</p>  <script>//document.anchors 属性返回一个包含文档中所有<a>元素的集合，这些元素具有name属性。var anchors = document.anchors;console.log(anchors);document.querySelector(".count").innerHTML