DOM中的‌节点（Node）‌是构成网页文档的最小单元，就像人体由细胞组成一样，节点是网页的"结构细胞"。以下是通俗解析：

---

‌一、节点的本质‌

1. ‌身份标签‌
   每个节点都有nodeType属性（数字1-12），标明其类型：

• 1=元素节点（如<div>）

• 2=属性节点（如class="box"）

• 3=文本节点（如段落文字）

2. ‌家族关系‌
   节点通过parentNode（父节点）、childNodes（子节点）等属性形成树形结构，类似家谱中的父子/兄弟关系

3. ‌通用能力‌
   所有节点共享基础属性和方法，例如：

• nodeName：标签名（如DIV）或节点类型名（如#text）

• nodeValue：文本内容或属性值（元素节点为null）

---

‌二、常见节点类型对比‌

类型	例子	作用	特殊属性
‌元素节点‌	<p>、<a>	构建页面骨架	tagName（标签名）
‌属性节点‌	href="..."	修饰元素特性	依附于元素节点
‌文本节点‌	Hello（在<p>内）	显示可见内容	data（文本内容）
‌注释节点‌	<!-- 注释 -->	开发者备注（不渲染）	无特殊交互属性

---

‌三、为什么需要节点？‌

1. ‌统一操作接口‌
   无论是修改文字（文本节点）还是删除按钮（元素节点），都通过相同的removeChild()等方法操作

2. ‌动态更新机制‌
   浏览器通过节点树实时追踪DOM变化，修改节点属性即可立即更新页面显示

3. ‌完整结构表达‌
   注释、空白符等非可视化内容也被建模为节点，确保文档完整性

---

‌示例：节点关系可视化‌

<div id="box">  
  <!-- 注释节点 -->  
  <p class="text">段落</p>  
</div>

对应的节点树：

Document（根节点）  
└─ div#box（元素节点）  
   ├─ <!-- 注释 -->（注释节点）  
    └─ p.text（元素节点）  
      └─ "段落"（文本节点）  
      └─ class="text"（属性节点）:ml-citation{ref="3,11" data="citationList"}