Mr笔记

Appearance

Node ​

[TOC]

索引 ​

属性：

节点导航：

  • node.parentNode：Node|null，只读，返回一个当前节点的父节点。
  • node.previousSibling：Node|null，只读，返回与该节点同级的前一个节点。
  • node.nextSibling：Node|null，只读，返回与该节点同级的下一个节点。
  • node.childNodes：NodeList，只读，返回一个包含了该节点所有子节点的动态变化的的NodeList。
  • node.firstChild：Node|null，只读，返回该节点的第一个子节点。
  • node.lastChild：Node|null，只读，返回该节点的最后一个子节点。

元素导航：

节点属性：

  • node.nodeType：number，只读，用于标识节点的类型。
  • node.nodeName：DOMString，只读，返回当前节点的节点名称。
  • node.textContent：string|null，返回/设置一个元素内所有子节点及其后代的文本内容。
  • node.outerHTML：DOMString，获取/设置 HTML 语法表示的元素以及其后代。
  • node.data/nodeValue：``，获取非元素节点的文本内容。

方法：

克隆节点

  • node.cloneNode()：(deep?)，用于克隆 DOM 节点的方法，可生成当前节点的副本。通过参数控制是否深度复制子节点，适用于需要复用或动态生成相似结构的场景。

传统元素操作方法：

Node ​

属性 ​

节点导航：

  • node.parentNode：Node|null，只读，返回一个当前节点的父节点。
  • node.previousSibling：Node|null，只读，返回与该节点同级的前一个节点。
  • node.nextSibling：Node|null，只读，返回与该节点同级的下一个节点。
  • node.childNodes：NodeList，只读，返回一个包含了该节点所有子节点的动态变化的的NodeList。
  • node.firstChild：Node|null，只读，返回该节点的第一个子节点。
  • node.lastChild：Node|null，只读，返回该节点的最后一个子节点。

元素导航：

节点属性：

  • node.nodeType：number，只读，用于标识节点的类型。
  • node.nodeName：DOMString，只读，返回当前节点的节点名称。
  • node.textContent：string|null，返回/设置一个元素内所有子节点及其后代的文本内容。
  • node.outerHTML：DOMString，获取/设置 HTML 语法表示的元素以及其后代。
  • node.data/nodeValue：``，获取非元素节点的文本内容。

方法 ​

克隆元素 ​

cloneNode() ​

node.cloneNode()：(deep?)，用于克隆 DOM 节点的方法，可生成当前节点的副本。通过参数控制是否深度复制子节点，适用于需要复用或动态生成相似结构的场景。

  • deep?：boolean，默认：false，是否深度克隆节点。

  • 返回：

  • node：Node，返回克隆后的新节点，但不会自动插入文档，需手动添加到 DOM 树中。

  • 特性：

    • 克隆节点的属性：复制原始节点的所有属性（如 id、class、style），但不会复制以下内容：

      • 事件监听器（通过 addEventListener() 或 onclick 绑定）。
      • 表单元素的值（如 <input> 的 value 需手动同步）。

    • 子节点的处理：

      • 浅克隆（deep: false）：默认，仅复制当前节点，不含子节点。
      • 深克隆（deep: true）：递归复制所有子节点，形成完整子树。

    • ID重复问题：若克隆的节点包含 id 属性，会导致文档中存在重复 ID，需手动修改以避免冲突。

  • 示例：

    1. 浅克隆节点

      js
      const original = document.querySelector("#original");
const cloned = original.cloneNode(); // 不传参数，默认 false

// 克隆后的节点无子元素
cloned.id = "cloned"; // 修改 ID 避免重复
document.body.appendChild(cloned);

// 效果：
// <div id="original">
//  <span>子节点</span>
// </div>
// <div id="cloned"></div> <!-- 无子节点 -->

    2. 深克隆节点

      js
      const list = document.querySelector("ul");
const clonedList = list.cloneNode(true); // 深克隆

// 修改克隆后的列表 ID
clonedList.id = "clonedList";
document.body.appendChild(clonedList);

// 效果：
// <ul id="list">
//   <li>Item 1</li>
//   <li>Item 2</li>
// </ul>
// <ul id="clonedList"> <!-- 有子节点 -->
//   <li>Item 1</li>
//   <li>Item 2</li>
// </ul>

传统元素操作方法【 ​

appendChild()【 ​

parentNode.appendChild()：(childNode)，用于将一个节点添加到指定父节点的子节点列表末尾的方法。

insertBefore()【 ​

parentNode.insertBefore()：(newNode, referenceNode)，用于在父节点的指定子节点前插入一个新节点的方法。

replaceChild()【 ​

parentNode.replaceChild()：(newNode, oldNode)，用于替换父节点中的指定子节点的方法。

removeChild()【 ​

parentNode.removeChild()：(childNode)，用于从父节点中移除指定子节点的方法。