发帖
雷达卡
XML DOM - Node 对象速查手册（2025 更新版）
作为所有节点类型的“共同祖先”，Node 对象是操作 DOM 的核心基础。掌握其关键属性与方法，等于打通了前端动态操作文档的底层逻辑。无论你是处理元素、文本、属性还是注释节点，以下内容均为实战高频知识点总结。
Node（所有节点的爸爸）
├── Element（nodeType=1） → tagName, attributes, children
├── Text（nodeType=3） → nodeValue
├── Attr（nodeType=2） → name + value
├── Comment（nodeType=8） → nodeValue
├── Document（nodeType=9） → documentElement
└── 其他冷门节点核心属性与方法一览表
| 属性 / 方法 | 返回值类型 | 说明（2025 实战精要） | 重要程度 | 项目使用频率 |
|---|---|---|---|---|
| nodeType | Number (1~12) | 标识节点类型：1=元素，3=文本，2=属性，8=注释，9=文档根 | ★★★★★ | 超级常用 |
| nodeName | String | 返回节点名称：如标签名、“#text”、“#comment”或“#document” | ★★★★★ | 超级常用 |
| nodeValue | String | null | 获取节点值；文本、属性、注释和 CDATA 节点有值，其余为 null | ★★★★★ | 常用 |
| textContent | String | null | 提取元素及其后代中的全部文本内容，推荐用于安全取文本 | ★★★★★ | 100% 项目必用 |
| parentNode | Node | null | 指向父级节点，实现向上遍历结构 | ★★★★★ | 超级常用 |
| childNodes | NodeList | 包含所有子节点，包括空白文本节点，使用时需注意过滤 | ★★★★ | 慎用 |
| children | HTMLCollection | 仅返回元素类型的子节点，自动跳过空白和文本节点，强烈推荐 | ★★★★★ | 强烈推荐 |
| firstChild / lastChild | Node | null | 获取第一个或最后一个子节点，常为不可见的空白文本 | ★★★ | 少用 |
| firstElementChild / lastElementChild | Element | null | 获取首个或末尾的元素子节点，避开空白干扰，2025 年标准写法 | ★★★★★ | 强烈推荐 |
| previousSibling / nextSibling | Node | null | 访问前一个或后一个兄弟节点，易受空白影响 | ★★★ | 少用 |
| previousElementSibling / nextElementSibling | Element | null | 获取前后相邻的兄弟元素节点，忽略文本空白，现代开发必备 | ★★★★★ | 强烈推荐 |
| attributes | NamedNodeMap | null | 返回元素上所有属性的集合，仅元素节点有效 | ★★★★ | 常用 |
| ownerDocument | Document | 指向所属文档对象，创建新节点时常用来调用 createElement | ★★★★ | 常用 |
| cloneNode(deep) | Node | 复制节点本身，deep=true 可递归复制整个子树结构 | ★★★★★ | 超级常用 |
| appendChild(node) | Node | 将节点添加为当前元素的最后一个子节点，经典插入方式 | ★★★★★ | 常用 |
| removeChild(node) | Node | 从子节点列表中移除指定节点，传统删除方法 | ★★★★ | 可用 |
| replaceChild(new, old) | Node | 用新节点替换原有子节点，适用于局部更新场景 | ★★★★ | 可用 |
| hasChildNodes() | Boolean | 判断是否含有任何子节点（包括文本、元素等） | ★★★ | 少用 |
| normalize() | void | 合并相邻文本节点，并清除空文本节点，优化 DOM 结构 | ★★ | 偶尔用 |
2025 年最实用的 8 大高频属性（建议熟记）
node.nodeType—— 判断类型：1 表示元素，3 表示文本node.nodeName—— 获取名称：如 div 或 "#text"node.textContent—— 安全读写文本内容，万能神器node.parentNode—— 访问父节点，实现层级跳转node.children—— 获取所有元素型子节点，跳过空白node.firstElementChild—— 获取第一个元素子节点node.lastElementChild—— 获取最后一个元素子节点node.nextElementSibling—— 获取下一个兄弟元素节点
通用节点描述函数（可直接复用）
以下函数可用于调试或日志输出，准确识别任意节点的类型与内容：
function describeNode(node) {
if (!node) return "null";
const type = node.nodeType;
if (type === 1) return `<${node.tagName}> 元素节点`;
if (type === 3) return `文本："${node.nodeValue.trim() || '(空白)'}"`;
if (type === 2) return `属性：${node.name}="${node.value}"`;
if (type === 8) return `注释：<!-- ${node.nodeValue.trim()} -->`;
if (type === 9) return "整个文档";
return `其他节点类型：${type}`;
}
高效遍历元素子节点（推荐模式）
在绝大多数项目中，我们只关心元素节点，而不希望被空白文本干扰。因此应优先使用 children 集合进行循环：
// 自动跳过空白文本节点，安全高效
for (let child of parent.children) {
console.log(describeNode(child));
}
该写法已在现代浏览器中广泛支持，是 2025 年 DOM 操作的标准实践之一。
2025 年关于 DOM 操作的三条核心准则（务必牢记）：
- 始终优先使用带有 Element 的属性方法，如 firstElementChild、children 和 nextElementSibling。
- 获取或修改文本内容时，统一采用 textContent，避免混合使用 nodeValue 与 firstChild。
- 判断是否为元素节点时，坚持使用 nodeType === 1 进行检测。
掌握以下代码片段，可安全地向上查找父级元素，自动跳过文本等非元素节点：
function getParentElement(node) {
while (node && node.nodeType !== 1) {
node = node.parentNode;
}
return node;
}
console.log(child.tagName);
结合这张图全面理解 Node 对象之间的关联结构：
Node（所有节点的爸爸）
├── Element（nodeType=1） → tagName, attributes, children
├── Text（nodeType=3） → nodeValue
├── Attr（nodeType=2） → name + value
├── Comment（nodeType=8） → nodeValue
├── Document（nodeType=9） → documentElement
└── 其他冷门节点只要熟记上图中的关系表，熟练运用 8 个关键属性，并遵守上述 3 条基本原则，你就已经彻底掌握了 XML DOM 中最基础且核心的 Node 对象模型。无论是复杂的遍历逻辑、节点修改还是对象克隆操作，都能在极短时间内快速实现。
京公网安备 11010802022788号
