什么是DOM节点？

想象一下，一个网页就像一棵倒挂的树🌲，树干是根节点，树枝是元素节点，树叶是文本节点。DOM（文档对象模型）就是浏览器用来表示这个结构的模型。

在DOM中，节点(Node)是构成这个树结构的基本单位。网页中的每个部分都是一个节点：

<!-- 这是一个注释节点 -->
<div id="container">      <!-- 元素节点 -->
    <h1>标题</h1>        <!-- 元素节点 -->
    这是一段文本           <!-- 文本节点 -->
</div>

节点类型

DOM中有12种节点类型，但最常用的有：

1. 元素节点 (Node.ELEMENT_NODE – 1)

HTML标签元素，如 <div>、<p>、<a> 等。

2. 文本节点 (Node.TEXT_NODE – 3)

元素内的文本内容，如 <p>这是一个文本节点</p> 中的”这是一个文本节点”。

3. 注释节点 (Node.COMMENT_NODE – 8)

HTML注释，如 <!-- 这是注释 -->。

if (element.nodeType === Node.ELEMENT_NODE) {
    console.log("这是一个元素节点");
}

什么是节点列表？

节点列表(NodeList) 是DOM中多个节点的集合，看起来像一个数组，但又不是真正的数组。

当你使用 document.querySelectorAll() 或访问 element.childNodes 属性时，返回的就是一个节点列表。

// 获取所有 <p> 标签的节点列表
const paragraphs = document.querySelectorAll('p');

// 获取某个元素的所有子节点
const container = document.getElementById('container');
const childNodes = container.childNodes;

操作节点列表

节点列表虽然不是真正的数组，但你可以使用以下方式操作它：

1. 遍历节点列表

// 方法1: for循环
const items = document.querySelectorAll('.item');
for (let i = 0; i < items.length; i++) {
    console.log(items[i]);
}

// 方法2: forEach方法 (现代浏览器支持)
items.forEach(item => {
    console.log(item);
});

// 方法3: 转换为数组后再遍历
const itemsArray = Array.from(items);
itemsArray.forEach(item => {
    console.log(item);
});

2. 访问节点

// 获取第一个节点
const firstNode = items[0];   // 或 items.item(0)

// 获取最后一个节点
const lastNode = items[items.length - 1];

3. 节点列表的长度

console.log(`列表中有 ${items.length} 个节点`);