← 返回目录

1. DOM 树与五类节点

DOM 就是浏览器把 HTML 解析成的一棵树，JS 通过这棵树找到页面上的每个元素。

核心三个：
① document——树根，所有节点的祖先
② 五类节点——文档、元素、属性、文本、注释
③ nodeType——1 是元素、3 是文本

坑：textContent 和 innerHTML 区别、空白也是文本节点、节点不是元素。

1.1 互动演示（点开这棵树看看）

document（老祖宗 nodeType=9）
<html>（nodeType=1）
<head> → <title>网页标题</title>
<body>（看得见的内容都在这）
<h1>我是大标题</h1>
<p>我是一段文字</p>
<button>点我</button>
点按钮： 左边树会逐层点亮， 下面同步显示代码与结论。

1.2 知识点逐条讲解

① DOM 到底是什么？

网页刚打开时，浏览器把你写的 HTML 标签，自动摆成一棵树。"节点"就是这棵树上的一个枝桠——一个标签是一个枝，一段文字也是一个小枝。有了这棵树，JS 才找得到、改得动页面上的东西。

// 一棵最简单的树，从上往下长这样：
// document（老祖宗）
// └─ html（第一个孩子）
// ├─ head（管标题、样式）
// └─ body（管你看得见的内容）
// └─ p（里面装着文字"你好"）

// 整棵树的老祖宗，打出来看看
console.log(document);

// 顺着老祖宗，找到 html 这个枝
console.log(document.documentElement);

// 再往下，找到 body 这个枝
console.log(document.body);

② 树上有哪五种"枝"？（记住号码）

树上的枝不全是标签，一共五种。浏览器给每种枝发了一个编号（叫 nodeType），记住下面这张表就行：

枝的种类编号 nodeType通俗例子
文档枝（老祖宗）9document，整份网页的根
元素枝（标签）1<div>、<p>、<a> 这些标签
文字枝3标签里写的字、连换行空格都算
属性枝2标签上的 id、class、src
注释枝8<!-- 我是注释 -->
// 拿到一个枝，问它"你是几号"，就知道你是哪种枝
// 抓到页面上那个 .demo 的盒子
let demo = document.querySelector('.demo');

// 问它编号：1 就说明它是个标签（元素枝）
console.log(demo.nodeType);

// 问它是什么标签名：这里是 "DIV"
console.log(demo.nodeName);

为什么老有看不见的空格枝？如果你写代码时标签之间换了行、加了空格，浏览器会把这些空白也当成"文字枝（编号3）"挂在树上。如果你取孩子时发现"怎么多出来几个空东西"，因为那些就是空白文字枝，不是出错。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：页面初始化时先确认元素找没找对（打印 nodeType/nodeName）；写组件时判断节点类型。

② 常见坑：以为拿到的一定是标签，结果取到空白文字枝，操作报错。

③ 怎么解决：用 nodeType === 1 判断是不是标签，用 nodeName 看标签名，先打印确认再操作。

一句话记住：document 是老祖宗（编号9），标签是元素枝（编号1），字是文字枝（编号3），属性=2，注释=8；JS 改网页，就是在这棵树上找枝、剪枝、加枝。

本页重点

API作用参数返回值代码示例
document整棵 DOM 树的老祖宗无文档对象console.log(document.title);
document.documentElement拿到 html 这个枝无html 元素console.log(document.documentElement.nodeName);
document.body拿到 body 这个枝无body 元素document.body.style.background = '#eee';
元素.nodeType问这个枝是几号无数字(标签1/文字3/文档9)console.log(el.nodeType);
元素.nodeName问这是什么标签无大写标签名console.log(el.nodeName);
querySelector()抓到第一个匹配元素CSS 选择器元素或 nulllet el = document.querySelector('#box');