把网页想象成一棵倒挂的家谱树。最顶端是老祖宗 document（整份网页），它生了 html，html 又生了 head 和 body，body 里再挂着一个一个标签。浏览器一开网页，就自动把这棵树画好，这棵树就叫 DOM。我们写 JS 改网页，就是在这棵树上"找某个枝、剪某个枝、加某个枝"。
网页刚打开时，浏览器把你写的 HTML 标签，自动摆成一棵树。"节点"就是这棵树上的一个枝桠——一个标签是一个枝，一段文字也是一个小枝。有了这棵树，JS 才找得到、改得动页面上的东西。
// 一棵最简单的树，从上往下长这样： // document（老祖宗） // └─ html（第一个孩子） // ├─ head（管标题、样式） // └─ body（管你看得见的内容） // └─ p（里面装着文字"你好"） console.log(document); // 整棵树的老祖宗，打出来看看 console.log(document.documentElement); // 顺着老祖宗，找到 html 这个枝 console.log(document.body); // 再往下，找到 body 这个枝
树上的枝不全是标签，一共五种。浏览器给每种枝发了一个编号（叫 nodeType），记住下面这张表就行：
| 枝的种类 | 编号 nodeType | 通俗例子 |
|---|---|---|
| 文档枝（老祖宗） | 9 | document，整份网页的根 |
| 元素枝（标签） | 1 | <div>、<p>、<a> 这些标签 |
| 文字枝 | 3 | 标签里写的字、连换行空格都算 |
| 属性枝 | 2 | 标签上的 id、class、src |
| 注释枝 | 8 | <!-- 我是注释 --> |
// 拿到一个枝，问它"你是几号"，就知道你是哪种枝
let demo = document.querySelector('.demo'); // 抓到页面上那个 .demo 的盒子
console.log(demo.nodeType); // 问它编号：1 就说明它是个标签（元素枝）
console.log(demo.nodeName); // 问它是什么标签名：这里是 "DIV"
为什么老有看不见的空格枝？如果你写代码时标签之间换了行、加了空格，浏览器会把这些空白也当成"文字枝（编号3）"挂在树上。如果你取孩子时发现"怎么多出来几个空东西"，因为那些就是空白文字枝，不是出错。
① 用在哪：页面初始化时先确认元素找没找对（打印 nodeType/nodeName）；写组件时判断节点类型。
② 常见坑：以为拿到的一定是标签，结果取到空白文字枝，操作报错。
③ 怎么解决：用 nodeType === 1 判断是不是标签，用 nodeName 看标签名，先打印确认再操作。