源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

JavaScript DOM 元素操控

2026/03/13
36
0

学习目标

  • 深入理解 innerHTML 与 textContent 的区别及应用场景，安全地修改页面内容。

  • 熟练掌握 classList API 进行类名管理，实现动态样式切换与动画控制。

  • 学会使用 JavaScript 直接操作 CSS 样式及 HTML 属性（包括自定义 data 属性）。

  • 掌握 DOM 节点的动态创建、插入（指定位置）与删除，实现页面无刷新重构。

DOM 操控

文档对象模型 (DOM) 是 JavaScript 与网页文档交互的桥梁。通过 DOM，开发者可以将 HTML 文档视为一个由对象组成的树状结构，并实时修改其结构、样式和内容。这种能力使得 Web 应用能够响应用户操作，提供流畅的交互体验，而无需重新加载整个页面。

修改元素内容

改变 HTML 元素内部的文本或结构是最常见的 DOM 操作。JavaScript 提供了两个主要属性来实现这一功能：innerHTML 和 textContent。

核心属性

  • innerHTML: 获取或设置元素内部的 HTML 内容。如果字符串中包含 HTML 标签，浏览器会解析并渲染这些标签。

  • textContent: 获取或设置元素内部的纯文本内容。即使字符串中包含 HTML 标签，它们也会被视为普通文本显示，不会被解析。

代码示例

<!DOCTYPE html>
<html>
<body>
    <div id="example1">这是使用 innerHTML 的原始内容。</div>
    <div id="example2">这是使用 textContent 的原始文本内容。</div>

    <button onclick="changeContent()">修改内容</button>

    <script>
        function changeContent() {
            // 使用 innerHTML：解析 HTML 标签，文字变粗体
            document.getElementById("example1").innerHTML = 
            "<strong>这是通过 innerHTML 修改的内容（带粗体）！</strong>";

            // 使用 textContent：忽略 HTML 标签，直接显示文本
            document.getElementById("example2").textContent = 
            "这是通过 textContent 修改的内容（标签会被转义）！<strong>无效标签</strong>";
        }
    </script>
</body>
</html>

效果解析

  1. 初始状态：两个 div 分别显示各自的原始文本。

  2. 点击按钮后：

    • 第一个 div (example1) 的内容被替换，"这是通过 innerHTML 修改的内容..." 会以粗体显示，因为 <strong> 标签被解析了。

    • 第二个 div (example2) 的内容被替换为纯文本，页面上会直接显示 <strong>无效标签</strong> 这串字符，而不是粗体效果。

操控类属性

在现代 Web 开发中，通过添加、移除或切换 CSS 类来控制样式和动画是最佳实践。JavaScript 的 classList 属性提供了简洁高效的 API。

核心方法

  • classList.add(className): 向元素添加一个或多个类。

  • classList.remove(className): 从元素中移除一个或多个类。

  • classList.toggle(className): 切换类状态。若类存在则移除，若不存在则添加。

代码示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="example" class="bold">这是一个带有 "bold" 类的文本元素。</div>

    <button onclick="addClass()">添加 'highlight' 类</button>
    <button onclick="removeClass()">移除 'bold' 类</button>
    <button onclick="toggleClass()">切换 'highlight' 类</button>

    <script>
        const element = document.getElementById("example");

        function addClass() {
            // 添加高亮类，文字变红且加粗
            element.classList.add("highlight");
        }

        function removeClass() {
            // 移除粗体类，文字恢复常规粗细（若无其他样式）
            element.classList.remove("bold");
        }

        function toggleClass() {
            // 切换高亮类：有则去之，无则加之
            element.classList.toggle("highlight");
        }
    </script>
</body>
</html>

行为解析

  • 添加类: 点击“添加”按钮，highlight 类被加入，文字立即变为红色且加粗。

  • 移除类: 点击“移除”按钮，bold 类被移除，文字不再强制加粗（除非 highlight 类也包含加粗属性）。

  • 切换类: 点击“切换”按钮，highlight 类会在存在与不存在之间反复横跳，实现类似开关的效果。

JS 设置 CSS

除了操作类名，JavaScript 还允许直接通过 style 属性修改元素的内联样式。这种方式适用于需要动态计算具体数值的场景。

操作方法

  • 逐个属性修改: 通过 element.style.propertyName 访问。注意 CSS 中的连字符命名（如 font-size）在 JS 中需转换为驼峰命名（fontSize）。

  • 批量修改: 使用 cssText 属性一次性设置多个样式。

代码示例

const demoElement = document.getElementById("demo");

// 方法一：逐个修改 CSS 属性
demoElement.style.color = "red";
demoElement.style.fontSize = "20px";
demoElement.style.backgroundColor = "#f0f0f0";

// 方法二：使用 cssText 批量设置 (会覆盖原有的内联 style)
demoElement.style.cssText = "color: blue; font-size: 18px; margin: 10px;";

创建、添加与删除

动态生成页面内容是单页应用 (SPA) 的核心需求。我们可以通过以下步骤操作 DOM 树的结构。

核心方法

  • document.createElement(tagName): 创建一个新的 HTML 元素节点。

  • parent.appendChild(node): 将节点添加到父节点的子节点列表末尾。

  • parent.removeChild(node): 从父节点中移除指定的子节点。

代码示例

// 1. 创建一个新的 div 元素
let newDiv = document.createElement("div");
newDiv.textContent = "这是一个新创建的 div 元素";
newDiv.style.border = "1px solid #333";
newDiv.style.padding = "10px";

// 2. 将新元素添加到 body 末尾
document.body.appendChild(newDiv);

// 模拟一段时间后移除该元素
setTimeout(() => {
    if (document.body.contains(newDiv)) {
        document.body.removeChild(newDiv);
        console.log("元素已被移除");
    }
}, 3000);

在指定位置插入元素

除了追加到末尾，有时我们需要在某个特定元素之前或之后插入新节点。

核心方法

  • parent.insertBefore(newNode, referenceNode): 在参考节点之前插入新节点。

代码示例

// 1. 创建新元素
let newDiv = document.createElement("div");
newDiv.textContent = "我是被插入到参考元素之前的新 div";

// 2. 获取参考节点
let referenceNode = document.getElementById("referenceElement");

// 3. 在参考节点之前插入
if (referenceNode && referenceNode.parentNode) {
    referenceNode.parentNode.insertBefore(newDiv, referenceNode);
}

操控元素属性

HTML 元素通常携带各种属性（如 src, href, id, title 等）。JavaScript 提供了标准方法来读写这些属性。

核心方法

  • getAttribute(name): 获取指定属性的值。

  • setAttribute(name, value): 设置或修改属性值。

  • removeAttribute(name): 移除指定属性。

代码示例

const imgElement = document.getElementById("image");

// 1. 获取 src 属性值
let currentSrc = imgElement.getAttribute("src");
console.log(`当前图片路径：${currentSrc}`);

// 2. 设置新的 src 属性
imgElement.setAttribute("src", "new-image.jpg");

// 3. 移除 alt 属性
imgElement.removeAttribute("alt");

// 4. 设置自定义属性 (不推荐用于数据存储，见下一节)
imgElement.setAttribute("data-temp", "123");

操控 Data 属性

HTML5 引入了 data-* 属性，允许开发者在 HTML 元素上存储额外的私有数据，而不影响语义或样式。JavaScript 通过 dataset 属性轻松访问这些数据。

核心特性

  • 命名转换: HTML 中的 data-user-id 在 JS 中对应 dataset.userId (连字符转驼峰)。

  • 数据类型: 读取到的值均为字符串类型。

代码示例

<div id="demo" data-user-id="12345" data-role="admin">用户信息</div>

<script>
    const demoElement = document.getElementById("demo");

    // 1. 设置 data 属性 (自动转换为 data-user-id)
    demoElement.dataset.userId = "67890";
    
    // 2. 新增一个 data 属性
    demoElement.dataset.lastLogin = "2026-03-13";

    // 3. 获取 data 属性
    let userId = demoElement.dataset.userId;
    let role = demoElement.dataset.role;

    console.log(`用户 ID: ${userId}`); // 输出: 67890
    console.log(`角色：${role}`);     // 输出: admin
    
    // 4. 删除 data 属性
    delete demoElement.dataset.lastLogin;
</script>