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 年最实用的 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 对象模型。无论是复杂的遍历逻辑、节点修改还是对象克隆操作，都能在极短时间内快速实现。