HTML DOM节点知识汇总
编程小白也能懂的DOM节点详解
本文用通俗易懂的语言解释HTML DOM节点的核心概念和操作方法。DOM（文档对象模型）是网页的编程接口，它将网页表示为一个树形结构，每个部分都是一个节点。理解节点是操作网页内容的基础！
1. 什么是DOM？
DOM (Document Object Model) 是浏览器将HTML文档转换成的树形结构。
大白话解释
想象一下你的网页是一棵圣诞树🌲：
- 整个圣诞树是文档(document)
- 树的主干是根元素(html)
- 树枝是元素节点(head, body等)
- 树枝上的装饰品是属性节点(id, class等)
- 装饰品上的文字是文本节点
DOM树可视化
文档 (Document)
HTML元素
HEAD元素
BODY元素
DIV元素
P元素
2. 节点类型
DOM树中的每个点都是一个节点，主要有以下几种类型：
元素节点 (Element Node)
HTML标签，如 <div>、<p>、<a> 等。这是最常用的节点类型。
文本节点 (Text Node)
元素内的文本内容，比如 <p>这是一个文本节点</p>
属性节点 (Attribute Node)
元素的属性，如 id、class、src 等。例如：<img src=”image.jpg”> 中的 src。
注释节点 (Comment Node)
HTML中的注释，如 <!– 这是注释 –>
文档节点 (Document Node)
整个文档的入口点，相当于树的根部。
// 节点类型对应的数字值
document.ELEMENT_NODE → 1 (元素节点)
document.TEXT_NODE → 3 (文本节点)
document.COMMENT_NODE → 8 (注释节点)
document.ELEMENT_NODE → 1 (元素节点)
document.TEXT_NODE → 3 (文本节点)
document.COMMENT_NODE → 8 (注释节点)
3. 节点关系
节点之间像家庭成员一样有各种关系：
父节点
(parentNode)
(parentNode)
↑
当前节点
↓
子节点
(childNodes)
(childNodes)
上一个兄弟
(previousSibling)
(previousSibling)
←
当前节点
→
下一个兄弟
(nextSibling)
(nextSibling)
关键关系属性
- parentNode – 父节点
- childNodes – 所有子节点（类数组）
- firstChild – 第一个子节点
- lastChild – 最后一个子节点
- previousSibling – 前一个兄弟节点
- nextSibling – 下一个兄弟节点
💡 注意：空格和换行也可能被识别为文本节点！使用children属性可以只获取元素节点。
4. 获取节点
操作节点前，我们需要先找到它们：
通过ID获取
最直接的方法，返回单个元素
document.getElementById(‘header’);
通过类名获取
返回匹配的所有元素
document.getElementsByClassName(‘item’);
通过标签名获取
返回匹配的所有元素
document.getElementsByTagName(‘div’);
现代选择器
使用CSS选择器语法，更灵活强大
// 返回单个元素
document.querySelector(‘#main .content’);
// 返回所有匹配元素
document.querySelectorAll(‘.list li’);
document.querySelector(‘#main .content’);
// 返回所有匹配元素
document.querySelectorAll(‘.list li’);
5. 节点操作
改变DOM结构的基本操作：
创建节点
// 创建新元素
const newDiv = document.createElement(‘div’);
// 创建文本节点
const newText = document.createTextNode(‘你好世界！’);
const newDiv = document.createElement(‘div’);
// 创建文本节点
const newText = document.createTextNode(‘你好世界！’);
添加节点
// 添加到父元素的末尾
parent.appendChild(newDiv);
// 在某个节点前插入
parent.insertBefore(newDiv, existingNode);
parent.appendChild(newDiv);
// 在某个节点前插入
parent.insertBefore(newDiv, existingNode);
删除节点
// 从父元素中移除
parent.removeChild(childNode);
// 现代方法（直接移除自己）
childNode.remove();
parent.removeChild(childNode);
// 现代方法（直接移除自己）
childNode.remove();
替换节点
// 用新节点替换旧节点
parent.replaceChild(newNode, oldNode);
parent.replaceChild(newNode, oldNode);
克隆节点
// 浅克隆（不包含子节点）
const clone = node.cloneNode();
// 深克隆（包含所有子节点）
const deepClone = node.cloneNode(true);
const clone = node.cloneNode();
// 深克隆（包含所有子节点）
const deepClone = node.cloneNode(true);
6. 内容与属性操作
元素内容操作
// 获取/设置HTML内容（保留标签）
element.innerHTML;
element.innerHTML = ‘<strong>新内容</strong>’;
// 获取/设置文本内容（纯文本）
element.textContent;
element.textContent = ‘新的纯文本内容’;
// innerText与textContent区别：
// innerText返回可见文本，textContent返回所有文本
element.innerHTML;
element.innerHTML = ‘<strong>新内容</strong>’;
// 获取/设置文本内容（纯文本）
element.textContent;
element.textContent = ‘新的纯文本内容’;
// innerText与textContent区别：
// innerText返回可见文本，textContent返回所有文本
属性操作
// 获取属性
element.getAttribute(‘id’);
// 设置属性
element.setAttribute(‘class’, ‘active’);
// 删除属性
element.removeAttribute(‘disabled’);
// 检查属性是否存在
element.hasAttribute(‘data-info’);
element.getAttribute(‘id’);
// 设置属性
element.setAttribute(‘class’, ‘active’);
// 删除属性
element.removeAttribute(‘disabled’);
// 检查属性是否存在
element.hasAttribute(‘data-info’);
class操作
// 添加类
element.classList.add(‘new-class’);
// 删除类
element.classList.remove(‘old-class’);
// 切换类（有则删除，无则添加）
element.classList.toggle(‘active’);
element.classList.add(‘new-class’);
// 删除类
element.classList.remove(‘old-class’);
// 切换类（有则删除，无则添加）
element.classList.toggle(‘active’);