DOM Nodes

JavaScript HTML DOM：操作元素（节点）

HTML DOM (文档对象模型) 将 HTML 文档表示为一个由节点 (Node) 构成的树。JavaScript 可以与这棵树交互，动态地添加、移除和修改 HTML 元素 (Element) 及其内容。

创建新的 HTML 元素（节点）

要在 HTML DOM 中添加新元素，通常首先创建元素节点 (Element Node)，然后可选地创建其内容（如文本节点 (Text Node)），最后将其追加 (append) 到文档中现有的元素下。

基本方法：createElement、createTextNode、appendChild

我们来创建一个新的段落并将其添加到 div 中：

<!-- HTML Structure -->
<div id="div1">
  <p id="p1">This is an existing paragraph.</p>
</div>

<script>
  // 1. 创建一个新的 <p> 元素
  const newParagraph = document.createElement("p");

  // 2. 为其内容创建一个文本节点
  const newText = document.createTextNode("This is a newly added paragraph.");

  // 3. 将文本节点追加到新的段落中
  newParagraph.appendChild(newText);

  // 4. 查找要追加到的现有元素
  const parentDiv = document.getElementById("div1");

  // 5. 将新段落追加到现有元素中
  parentDiv.appendChild(newParagraph);
</script>

解释：

• document.createElement("p")：创建一个空的 <p> 元素节点。
• document.createTextNode("...")：创建一个文本节点。严格来说，HTML 元素内部的文本就是文本节点。
• newParagraph.appendChild(newText)：将文本节点作为子节点添加到新的 <p> 元素中。
• document.getElementById("div1")：选择我们想要添加新段落的 div 元素。
• parentDiv.appendChild(newParagraph)：将新创建的段落（及其文本内容）作为 parentDiv 的最后一个子节点添加进去。

现代插入方法

现代 JavaScript 提供了更便捷的元素插入方法：append()、prepend()、before()、after()。

element.append(...nodesOrDOMStrings)：将节点或 DOMString 追加到 element 的最后一个子节点之后。

element.prepend(...nodesOrDOMStrings)：将节点或 DOMString 插入到 element 的第一个子节点之前。

element.before(...nodesOrDOMStrings)：将节点或 DOMString 插入到 element 自身之前（作为兄弟节点）。

element.after(...nodesOrDOMStrings)：将节点或 DOMString 插入到 element 自身之后（作为兄弟节点）。

使用 append() 的示例：

// 假设 parentDiv 已经像上一个示例中那样被选中了
const anotherParagraph = document.createElement("p");
anotherParagraph.textContent = "Another paragraph using append()."; // 设置文本更简单的方法
parentDiv.append(anotherParagraph, "Some text directly appended."); // 直接追加的文本。

对于仅设置文本内容而言，使用 textContent 通常比使用 createTextNode 和 appendChild 更简单、更安全，因为它会自动处理特殊字符。

在现有元素之前插入：insertBefore()

appendChild() 方法（以及 append()）将新元素作为最后一个子节点添加。如果你需要在特定的现有子节点之前插入一个元素，可以使用 parentNode.insertBefore(newNode, referenceNode)。

<!-- HTML Structure -->
<div id="div2">
  <p id="pRef">This is the reference paragraph.</p>
  <p>Another paragraph.</p>
</div>

<script>
  const yetAnotherPara = document.createElement("p");
  yetAnotherPara.textContent = "Inserted before pRef.";

  const parentContainer = document.getElementById("div2");
  const referenceParagraph = document.getElementById("pRef");

  parentContainer.insertBefore(yetAnotherPara, referenceParagraph);
</script>

如果 referenceNode 是 null，insertBefore() 的行为就像 appendChild() 一样。

移除 HTML 元素

传统方法：parentNode.removeChild(childNode)

要移除一个 HTML 元素，在过去你需要获取其父节点的引用。

<!-- HTML Structure -->
<div id="div3">
  <p id="pToRemove">This paragraph will be removed.</p>
  <p>This paragraph will remain.</p>
</div>

<script>
  const parentOfRemovable = document.getElementById("div3");
  const childToRemove = document.getElementById("pToRemove");

  if (parentOfRemovable && childToRemove) {
    parentOfRemovable.removeChild(childToRemove);
  }
</script>

如果你只有子节点的引用，一个常见的变通方法是：

const childNode = document.getElementById(“pToRemove”); if (childNode && childNode.parentNode) { childNode.parentNode.removeChild(childNode); }

现代方法：element.remove()

现代 JavaScript 提供了一种更简单得多的方法：直接在你想要移除的元素上调用 remove() 方法。

const elementToRemove = document.getElementById("pToRemove");
if (elementToRemove) {
  elementToRemove.remove();
}

替换 HTML 元素

传统方法：parentNode.replaceChild(newNode, oldNode)

要替换一个 HTML 元素，你可以在其父节点上使用 replaceChild() 方法。

<!-- HTML Structure -->
<div id="div4">
  <p id="pToReplace">This paragraph will be replaced.</p>
</div>

<script>
  const newReplacementPara = document.createElement("p");
  newReplacementPara.textContent = "This is the replacement paragraph.";

  const parentForReplacement = document.getElementById("div4");
  const oldParagraph = document.getElementById("pToReplace");

  if (parentForReplacement && oldParagraph) {
    parentForReplacement.replaceChild(newReplacementPara, oldParagraph);
  }
</script>

现代方法：element.replaceWith(newNodeOrDOMString)

一种更现代、更便捷的方法是直接在要被替换的元素上使用 replaceWith() 方法。

const paragraphToReplace = document.getElementById("pToReplace");
const freshParagraph = document.createElement("p");
freshParagraph.textContent = "Replaced using replaceWith().";

if (paragraphToReplace) {
  paragraphToReplace.replaceWith(freshParagraph, " And some text too!");
}

进一步学习：对于复杂的 DOM 操作，可以考虑使用 DocumentFragment (文档片段) 来通过批量操作提升性能。此外，还可以探索现代 JavaScript 框架（如 React、Vue、Angular）是如何抽象化直接的 DOM 操作的。