怎么用JavaScript操作DOM元素内容与样式

在前端交互开发中，页面上的文字更新、弹窗显隐、主题切换以及表单状态校验，本质上都是在通过JavaScript获取DOM节点，进而对节点的内容或样式进行读写。掌握正确的API和属性选择，不仅能让逻辑更清晰，还能避免XSS安全隐患和浏览器无谓的重绘重排。

一、DOM操作的标准工作流

任何针对网页元素的内容或样式变更，都必须经历三个核心阶段：准确命中目标DOM节点、选择合适的方法读写属性、以及通过视觉或DOM树验证修改结果。在开始调用内容与样式API之前，必须先确保目标节点已经被正确载入并获取。

常用的节点选取代码如下：

// 选取单个元素（返回 Element 节点或 null）
const cardTitle = document.querySelector('.card-title');

// 选取符合条件的所有元素（返回 NodeList 静态列表）
const badges = document.querySelectorAll('.badge-item');

二、操作DOM元素的内容

修改DOM内容主要涉及三个核心属性：textContent、innerHTML 和针对表单输入控件的 value。选用哪个属性取决于数据来源是否可控，以及是否需要插入富文本HTML标签。

1. textContent：处理纯文本内容

textContent 用于读取或写入节点的纯文本。赋值时，无论传入的字符串是否包含 <span>、<script> 等字符，浏览器都会将其完全视作字面文本，不会将其解析为DOM子节点。这使其成为最安全且执行速度最快的内容修改方案。

const messageBox = document.querySelector('#message');

// 设置纯文本（即使包含尖括号也会被自动转义）
messageBox.textContent = '操作已完成，共计 <5> 条待处理事项。';

// 读取纯文本内容
console.log(messageBox.textContent);

2. innerHTML：解析并插入HTML结构

当需要动态构建带标签的富文本片段时，使用 innerHTML。浏览器会调用内置HTML解析器，将字符串反序列化为真实的DOM子树挂载到目标元素内。

const container = document.querySelector('#user-info');

// 写入HTML结构
container.innerHTML = '<p class="highlight">用户名：<strong>张三</strong></p>';

3. 表单控件内容的特殊处理：value

对于 <input>、<textarea> 以及 <select> 等表单元素，它们的内容并非子文本节点，而是内部状态。此时修改和读取必须使用 value 属性。

const usernameInput = document.querySelector('#username');

// 读取用户当前输入
console.log(usernameInput.value);

// 清空或修改输入框内容
usernameInput.value = '新用户_001';

三、操作DOM元素的样式

在JavaScript中控制元素样式有两种主要途径：通过 style 对象直接修改行内样式，或者通过 classList API 增删修改CSS类名。在实际项目中，二者有着明确的分工。

1. style 属性：读写行内样式

每个DOM元素都暴露了一个 style 对象。该对象映射的是元素的 style="..." 行内属性。需要注意两点基本规则：

• 小驼峰命名法（camelCase）： CSS中的连字符属性名在JS中转换为驼峰格式。例如 background-color 对应 element.style.backgroundColor，font-size 对应 element.style.fontSize。
• 必须包含合法单位： 数值型样式不能直接赋裸数字，必须拼接 px、%、rem 等单位字符串，否则赋值无效。

const box = document.querySelector('.color-box');

// 设置背景颜色
box.style.backgroundColor = '#477DAD';

// 设置宽度，必须携带单位
box.style.width = '240px';

// 清除特定行内样式（设为空字符串）
box.style.backgroundColor = '';

2. classList API：操作CSS类名

在现代Web开发中，最推荐的样式控制方式是通过切换CSS类名。将外观规则统一保存在CSS样式表中，由JavaScript仅负责管理元素身上的类名状态。element.classList 提供了直观且高效的方法：

• classList.add('className')：添加一个或多个类名（自动去重）。
• classList.remove('className')：移除指定的类名。
• classList.toggle('className')：切换类名（存在则移除，不存在则添加）。
• classList.contains('className')：检查是否包含某类名，返回布尔值。
• classList.replace('oldClass', 'newClass')：用新类名替换旧类名。

const dialog = document.querySelector('.modal');

// 打开弹窗：添加 active 类
dialog.classList.add('active');

// 切换深色模式
dialog.classList.toggle('dark-theme');

// 检查状态
if (dialog.classList.contains('active')) {
    console.log('弹窗当前处于显示状态');
}

四、综合应用实战：可交互状态切换卡片

下面通过一个完整的综合示例，演示如何在一次交互中同时完成内容更新与样式动态切换：

<!-- HTML 结构 -->
<div id="task-card" class="card pending">
    <h3 id="task-title">系统数据备份</h3>
    <p id="task-status">当前状态：等待处理</p>
    <button id="action-btn">执行完成</button>
</div>

<script>
const card = document.querySelector('#task-card');
const statusText = document.querySelector('#task-status');
const actionBtn = document.querySelector('#action-btn');

actionBtn.addEventListener('click', () => {
    // 1. 修改文本内容
    statusText.textContent = '当前状态：已全部备份成功';

    // 2. 移除旧样式类并添加新状态类
    card.classList.remove('pending');
    card.classList.add('completed');

    // 3. 动态禁用按钮并修改行内透明度
    actionBtn.textContent = '已完成';
    actionBtn.disabled = true;
    actionBtn.style.opacity = '0.6';
});
</script>

五、常见问题排查与技术总结

在日常使用JavaScript修改内容和样式时，初学者常常会遇到以下三个典型问题：

• 报错 Cannot set properties of null： 这通常是因为脚本执行时目标DOM元素尚未解析完成。解决方法是将 <script> 放在 </body> 前，或为脚本添加 defer 属性，确保在DOM树构建完毕后执行。
• 修改 style.width 等数值属性无反应： 忘记拼接长度单位（如写成了 box.style.width = 200）。必须书写为 box.style.width = '200px'。
• 频繁操作引发页面卡顿： 循环修改多个DOM节点的样式会多次触发浏览器的重排（Reflow）与重绘（Repaint）。优先使用 classList 一次性切换类名，或使用 DocumentFragment 批量挂载。