MutationObserver实例中mutation.type为childList时addedNodes节点具体的方法与属性。

2025-09-21 17:10:12 64 分享链接 开发笔记 MutationObserver

addedNodes 是一个包含新增 DOM 节点的数组（通过 Array.from() 转换而来），遍历它的方式和遍历普通数组一致。常用的遍历方法有以下几种，可根据具体需求选择：

const addedNodes = Array.from(mutation.addedNodes);

// 遍历新增节点
addedNodes.forEach((node, index) => {
  if (node.nodeType === 1) { // nodeType 为 1 表示元素节点（如 div、p 等）
    console.log('元素节点标签名:', node.tagName); // 打印标签名（如 DIV、P）
    // 可在这里添加操作，比如给节点加样式、绑定事件等
    node.classList.add('newly-added'); // 给新增元素添加类名
  }
});

在 JavaScript 中，DOM 节点（node）是构成网页结构的基本单位，不同类型的节点（如元素节点、文本节点、注释节点等）共享一些通用属性和方法，而元素节点（Element）作为最常用的节点类型，还包含额外的专属属性和方法。以下是节点的核心属性与方法分类说明：

一、通用节点属性（所有节点共享，来自 Node 接口）

这些属性适用于所有类型的节点（元素、文本、注释等）。

二、元素节点专属属性（Element 接口，继承自 Node）

仅元素节点（如 <div>、<span> 等标签）拥有这些属性。

三、通用节点方法（所有节点共享，来自 Node 接口）

用于操作节点本身或与其他节点的关系。

四、元素节点专属方法（Element 接口，继承自 Node）

用于操作元素的属性、样式或查询后代节点。

五、特殊节点类型的专属属性/方法

除了通用节点和元素节点，其他类型节点（如文本节点、注释节点）也有少量专属特性：

• 文本节点（Text）：
  data 属性：等价于 nodeValue，用于获取/设置文本内容；
  splitText(offset)：将文本节点从指定位置拆分为两个文本节点。
• 注释节点（Comment）：
  仅包含通用节点的属性和方法，nodeValue 为注释内容。

总结

• 通用节点（Node）的属性和方法是所有节点的基础，用于描述节点关系和基本操作（如父子节点管理）。
• 元素节点（Element）在 Node 基础上扩展了更多实用功能，尤其是属性操作（getAttribute）、选择器查询（querySelector）和样式控制（classList、style）。
• 开发中最常用的是元素节点，需重点掌握其专属属性（如 classList、dataset）和方法（如 matches、querySelector）。

根据节点类型（通过 nodeType 判断）灵活使用对应的属性和方法，可以高效操作 DOM 结构。