在 DOM（文档对象模型）中，节点（Node） 是构成整个文档树的基本单位，所有页面元素、文本、注释等都被抽象为不同类型的节点对象。以下是详细解析：

1. 节点的本质

  • 内存中的对象：浏览器将 HTML 文档解析为一系列相互关联的 JavaScript 对象
  • 继承关系：所有节点都继承自 Node 基类，拥有共同的基础属性和方法
  • 树状结构：通过父子关系连接，形成文档树（DOM Tree）

2. 核心节点类型

节点类型 示例 说明 NodeType 值
Element <div>, <p> HTML 元素节点 1
Text "Hello" 元素内的文本内容 3
Comment <!-- 注释 --> HTML 注释节点 8
Document document 整个文档的根节点 9
DocumentType <!DOCTYPE html> DOCTYPE 声明节点 10
DocumentFragment document.createDocumentFragment() 轻量级文档片段（虚拟容器） 11

element
美[ˈelɪmənt]英[‘elɪmənt]
n.要素；原理；【数】元；【军】小队 网络元素；元件；成分

树状层级关系

Document (文档节点)
└── HTML (元素节点)
    ├── HEAD (元素节点)
    │   └── TITLE (元素节点)
    │       └── "页面标题" (文本节点)
    └── BODY (元素节点)
        └── DIV (元素节点)
            └── "内容" (文本节点)

3. 节点继承关系图解

EventTargetNodeElementTextCommentDocumentHTMLElementHTMLDivElementHTMLSpanElementHTMLInputElement

关键继承链：

  1. EventTarget：所有节点可接收事件的基类
  2. Node：提供基础节点操作（如 parentNode, childNodes）
  3. Element：添加标签名、属性等特性
  4. HTMLElement：扩展 HTML 专用属性和方法

4. 节点通用属性和方法

公共属性

const node = document.querySelector('div');

node.nodeType;    // 节点类型（如 1 表示元素）
node.nodeName;    // 节点名称（如 "DIV"）
node.nodeValue;   // 节点值（文本/注释节点有效）
node.childNodes;  // 所有子节点（NodeList）
node.parentNode;  // 父节点

公共方法

// 节点操作
node.appendChild(newNode);
node.removeChild(oldNode);
node.cloneNode(true); // 深拷贝

// 位置判断
node.contains(otherNode); // 是否包含某节点
node.compareDocumentPosition(otherNode); // 节点位置关系

5. 不同类型节点的特性

元素节点（Element）

const el = document.getElementById('demo');
el.tagName;        // 标签名（如 "DIV"）
el.className;      // class 属性
el.getAttribute('id'); // 获取属性
el.style.color = 'red'; // 修改样式

文本节点（Text）

const textNode = document.createTextNode('Hello');
textNode.data = 'New Text'; // 修改文本内容
textNode.splitText(3);      // 分割文本

注释节点（Comment）

const comment = document.createComment('备注');
comment.data = 'Updated'; // 修改注释内容

6. 节点与元素的区别

特征 节点（Node） 元素（Element）
范围 包含所有类型（文本/注释等） 仅 HTML 标签
继承关系 继承自 Node 继承自 Element
查询方法 很少直接操作 querySelector() 等
典型属性 nodeType, nodeName id, className

7. 实际应用示例

遍历所有子节点

function walkNodes(node) {
  if (node.nodeType === 1) {
    console.log('元素节点:', node.tagName);
  } else if (node.nodeType === 3) {
    console.log('文本节点:', node.data.trim());
  }

  node.childNodes.forEach(child => walkNodes(child));
}

walkNodes(document.body);

创建节点并插入

// 创建元素节点
const newDiv = document.createElement('div');

// 创建文本节点
const text = document.createTextNode('动态内容');

// 组合节点
newDiv.appendChild(text);
document.body.appendChild(newDiv);

总结

节点是 DOM 的原子单位，理解其类型和特性可以：

  1. 精准操作文档结构
  2. 高效处理动态内容
  3. 避免混淆元素和文本节点
  4. 优化事件委托等高级功能

通过 nodeType 判断节点类型是 DOM 编程的基础技能，尤其在处理混合内容（如富文本编辑器）时至关重要。