JavaScript（三）——几种用于操作 DOM 内容的核心属性和方法

下面详细解释包括 innerHTML 在内的几种用于操作 DOM 内容的核心属性和方法，它们在功能、特性和适用场景上各有不同：

1. innerHTML

• 定义：获取或设置元素内部的 HTML 结构（包括所有子元素的标签和文本）。
• 特点：
  • 会解析 HTML 标签：设置内容时，字符串中的 HTML 标签会被浏览器解析并渲染。
  • 覆盖原有内容：设置时会完全替换元素内部的所有子节点（包括文本和标签）。
  • 存在安全风险：如果直接插入用户输入的内容，可能导致 XSS 攻击（例如注入恶意脚本）。
• 示例：

  const container = document.getElementById("container");
  
  // 获取内容：返回包含 HTML 标签的字符串
  console.log(container.innerHTML); // 例如: "<p>原始内容</p>"
  
  // 设置内容：解析 HTML 并替换内部结构
  container.innerHTML = "<h2>新标题</h2><p>新内容</p>";
  

• 适用场景：需要批量设置包含 HTML 结构的内容（如动态渲染列表、卡片等），但需确保内容来源安全。

2. innerText

• 定义：获取或设置元素内的可见文本内容（仅包含用户能看到的文本，受 CSS 样式影响）。
• 特点：
  • 不解析 HTML：设置的内容会被当作纯文本，HTML 标签会被转义（如 < 显示为 <）。
  • 受样式影响：会忽略 <style>、<script> 中的文本，以及被 display: none 隐藏的文本。
  • 性能略低：需要计算元素的可见性，比 textContent 消耗更多资源。
• 示例：

  const div = document.querySelector("div");
  
  // 获取可见文本
  console.log(div.innerText); // 仅返回可见的文本内容
  
  // 设置文本（HTML 标签会被当作普通文本）
  div.innerText = "<strong>加粗文本</strong>"; 
  // 显示结果：<strong>加粗文本</strong>（不会渲染为粗体）
  

• 适用场景：需要操作"用户可见"的文本（如获取段落的显示文本），且不希望解析 HTML。

3. textContent

• 定义：获取或设置元素内的所有文本内容（包括隐藏文本，不受 CSS 样式影响）。
• 特点：
  • 不解析 HTML：同 innerText，会转义 HTML 标签。
  • 包含所有文本：包括 <style>、<script> 中的内容，以及被隐藏的文本（如 display: none 元素内的文本）。
  • 性能更好：无需计算样式和可见性，直接读取文本节点，速度快于 innerText。
• 示例：

  const div = document.querySelector("div");
  
  // 获取所有文本（包括隐藏内容）
  console.log(div.textContent); 
  
  // 设置文本（推荐优先使用）
  div.textContent = "Hello World"; // 纯文本，无样式解析
  

• 适用场景：纯文本操作（如表单验证、文本替换），追求性能时优先选择。

4. outerHTML

• 定义：获取或设置包含当前元素自身在内的完整 HTML 结构。
• 特点：
  • 包含元素本身：与 innerHTML 不同，outerHTML 会包含元素自身的标签。
  • 替换整个元素：设置时会用新的 HTML 结构完全替换当前元素（包括自身）。
• 示例：

  const box = document.querySelector(".box");
  
  // 获取包含自身的 HTML
  console.log(box.outerHTML); 
  // 输出: <div class="box"><p>内容</p></div>
  
  // 替换整个元素
  box.outerHTML = "<section class='new-box'>替换后的内容</section>";
  // 原 div.box 会被整个替换为 section.new-box
  

• 适用场景：需要整体替换元素（包括标签本身）时使用（如将 div 改为 section）。

5. insertAdjacentHTML()

• 定义：在元素的指定位置插入 HTML 内容，不覆盖原有内容。
• 语法：element.insertAdjacentHTML(position, htmlString)
• 位置参数：
  • 'beforebegin'：在元素自身前面插入（作为兄弟节点）。
  • 'afterbegin'：在元素内部开头插入（作为第一个子节点）。
  • 'beforeend'：在元素内部结尾插入（作为最后一个子节点）。
  • 'afterend'：在元素自身后面插入（作为兄弟节点）。
• 特点：
  • 灵活插入：可在元素的不同位置添加内容，不影响现有结构。
  • 解析 HTML：同 innerHTML，会解析插入的 HTML 标签。
• 示例：

  <!-- 原始结构 -->
  <div class="parent">
    <p>现有内容</p>
  </div>
  

  const parent = document.querySelector(".parent");
  
  // 在内部开头插入
  parent.insertAdjacentHTML("afterbegin", "<h3>开头</h3>");
  
  // 在内部结尾插入
  parent.insertAdjacentHTML("beforeend", "<p>结尾</p>");
  

  <!-- 结果 -->
  <div class="parent">
    <h3>开头</h3>
    <p>现有内容</p>
    <p>结尾</p>
  </div>
  

• 适用场景：需要在特定位置追加 HTML 内容（如在列表前添加标题、在段落后补充说明）。

6. 节点操作（createElement + appendChild 等）

• 定义：通过创建 DOM 节点（元素、文本等），再手动添加到文档中的方式操作内容。
• 核心方法：
  • document.createElement(tagName)：创建元素节点。
  • document.createTextNode(text)：创建文本节点。
  • parent.appendChild(child)：将子节点添加到父节点末尾。
  • parent.insertBefore(newNode, referenceNode)：在指定节点前插入新节点。
• 特点：
  • 最安全：完全避免 XSS 风险（文本不会被解析为 HTML）。
  • 精细控制：可逐个操作节点，适合复杂结构的动态构建。
  • 性能可控：可配合 DocumentFragment 批量处理，减少 DOM 重绘。
• 示例：

  // 创建列表
  const ul = document.createElement("ul");
  
  // 创建列表项并添加文本
  const li1 = document.createElement("li");
  li1.textContent = "第一项";
  ul.appendChild(li1);
  
  const li2 = document.createElement("li");
  li2.textContent = "第二项";
  ul.appendChild(li2);
  
  // 添加到页面
  document.body.appendChild(ul);
  

• 适用场景：安全要求高（如处理用户输入）、复杂 DOM 结构构建、需要精细控制节点时。

7. DocumentFragment

• 定义：虚拟的 DOM 容器，用于临时存储多个节点，批量操作后再插入文档。
• 特点：
  • 不渲染到页面：本身不会被添加到 DOM 树，仅作为临时容器。
  • 提升性能：减少 DOM 操作次数（多次操作片段，最后一次插入文档），降低重绘重排消耗。
• 示例：

  // 创建文档片段
  const fragment = document.createDocumentFragment();
  
  // 批量创建节点并添加到片段
  for (let i = 1; i <= 5; i++) {
    const p = document.createElement("p");
    p.textContent = `第 ${i} 段`;
    fragment.appendChild(p);
  }
  
  // 一次性插入文档
  document.body.appendChild(fragment);
  

• 适用场景：需要批量添加大量节点（如渲染长列表），优化性能时使用。

总结对比表

选择建议

• 纯文本操作：优先用 textContent（性能最佳）。
• 需解析 HTML 且替换全部内容：用 innerHTML（注意安全）。
• 需解析 HTML 且部分插入：用 insertAdjacentHTML（灵活）。
• 替换整个元素：用 outerHTML。
• 安全优先或复杂结构：用节点操作（createElement 等）。
• 大量节点添加：用 DocumentFragment（性能优化）。