JavaScript DOM操作实例：动态修改元素与样式代码

在现代Web开发中，通过JavaScript动态控制页面内容与外观是实现用户交互的基石。DOM（Document Object Model，文档对象模型）将HTML文档抽象为一个可以通过脚本操控的对象树。本文直接聚焦于开发中最常用的两类操作：如何定位并修改元素自身的内容与结构，以及如何通过行内样式与CSS类名动态改变页面外观，并结合直观代码和系统图解展示生产环境中的标准实践。

一、DOM核心模型与节点修改路径

当浏览器解析HTML文档时，会构建对应的DOM树。树中的每个HTML标签都会实例化为一个元素节点（Element Node）。JavaScript如果需要变更页面显示，首先通过选择器定位节点，随后即可分别针对其“内容数据”、“标签属性”与“视觉样式”进行独立更新。

二、动态修改元素内容与属性

获取节点后，修改元素主要涉及文本注入与HTML结构替换。在实际开发中，需要根据安全性与功能需求严格区分 textContent 与 innerHTML 的使用场景。

1. 修改文本内容：textContent

textContent 属性用于获取或设置指定节点及其后代的纯文本内容。向其赋值时，所有特殊字符（如 <、>、&）都会被浏览器作为纯文本安全解析，不会被解释为HTML标签。

// 1. 定位DOM元素
const statusText = document.querySelector('#system-status');

// 2. 动态更新文本内容
statusText.textContent = '数据同步完成：已更新 128 条记录';

2. 修改HTML内部结构：innerHTML 与安全性

当需要向容器内插入子标签（例如列表项、图标组件）时，使用 innerHTML 可以直接解析传入的HTML字符串。但必须注意：严禁将未经校验的用户输入直接拼接到 innerHTML 中，否则会产生跨站脚本漏洞（XSS）。

const cardBody = document.querySelector('.card-content');

// 动态渲染包含子标签的结构
cardBody.innerHTML = `
  <h4 class="title">任务执行结果</h4>
  <p class="desc">所有依赖检查均已通过。</p>
`;

3. 读写标准属性与自定义属性

HTML元素的固有属性可以直接通过属性名访问（如 img.src、input.value、a.href），也可通过 setAttribute() 和 getAttribute() 进行统一处理。对于业务自定义数据，推荐使用 data-* 前缀，在JavaScript中通过 dataset 对象进行驼峰命名映射读取：

const actionBtn = document.querySelector('#submit-btn');

// 设置标准属性
actionBtn.setAttribute('disabled', 'true');
actionBtn.title = '当前表单正在提交中...';

// 读写 HTML5 自定义数据集 (data-user-id)
actionBtn.dataset.userId = 'u_894201';
console.log(actionBtn.dataset.userId); // 输出: u_894201

三、动态创建与挂载DOM节点的标准步骤

除修改现有节点外，动态添加列表、对话框或消息条往往需要从零创建新元素并挂载到文档流中。规范的操作遵循“创建节点 → 填充内容与属性 → 寻址父容器 → 挂载生效”四个明确步骤。

完整的操作实例代码如下：

// 步骤 1：创建新的 li 节点
const newItem = document.createElement('li');

// 步骤 2：装配内容与样式
newItem.textContent = '新增待办项：检查数据库备份状态';
newItem.classList.add('task-item', 'is-pending');
newItem.dataset.taskId = 'task_1002';

// 步骤 3：获取待挂载的目标列表
const taskList = document.querySelector('#todo-list');

// 步骤 4：追加到末尾（亦可用 prepend 插入到头部）
taskList.appendChild(newItem);

四、动态修改样式的两种途径：style 属性与 classList

修改页面样式主要有“直接修改行内样式（element.style）”与“切换CSS类名（element.classList）”两种方式。理解两者的适用边界是编写高质量代码的关键。

1. 通过 style 属性修改行内样式

element.style 属性代表元素的行内样式声明。在JavaScript中设置CSS属性时，原CSS中带连字符（-）的命名规则必须转换为小驼峰（camelCase）形式，且涉及长度单位的属性必须显式拼接单位（如 px、%、rem）：

const progressBar = document.querySelector('.progress-fill');

// 动态设置进度与颜色
const currentPercent = 75;
progressBar.style.width = currentPercent + '%';
progressBar.style.backgroundColor = '#438A80';
progressBar.style.transition = 'width 0.3s ease-in-out';

// 清除行内样式，恢复由外部CSS文件控制
progressBar.style.backgroundColor = '';

2. 通过 classList API 优雅切换样式类

classList 是一个只读的 DOMTokenList 对象，提供了一组便捷方法用于操作元素的 class 属性。它避免了过去通过字符串替换 className 容易引发的空格丢失与正则匹配问题：

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

// 1. 添加类名（可同时添加多个）
dialog.classList.add('is-visible', 'fade-in');

// 2. 移除类名
dialog.classList.remove('is-hidden');

// 3. 切换类名：若存在则删除并返回 false；若不存在则添加并返回 true
const isExpanded = dialog.classList.toggle('expanded');

// 4. 判断是否包含某个类名
if (dialog.classList.contains('is-visible')) {
  console.log('弹窗当前处于显示状态');
}

// 5. 替换类名
dialog.classList.replace('theme-light', 'theme-dark');

五、完整交互实战：可折叠动态提示卡片

下面通过一个可直接运行的综合实例，把元素文本更新、自定义属性读写、动态挂载以及 classList 与 style 样式的联合使用串联起来：

// 模拟业务逻辑：动态创建并管理一个交互式卡片
function createInteractiveCard(containerSelector, title, message) {
  const container = document.querySelector(containerSelector);
  if (!container) return;

  // 1. 创建卡片主容器
  const card = document.createElement('div');
  card.classList.add('info-card');

  // 2. 创建头部标题栏
  const header = document.createElement('div');
  header.classList.add('card-header');
  header.textContent = title;

  // 3. 创建内容区
  const body = document.createElement('div');
  body.classList.add('card-body');
  body.textContent = message;

  // 4. 创建控制按钮
  const toggleBtn = document.createElement('button');
  toggleBtn.classList.add('card-btn');
  toggleBtn.textContent = '收起内容';
  toggleBtn.dataset.state = 'expanded';

  // 5. 绑定点击交互：动态修改样式与文本
  toggleBtn.addEventListener('click', () => {
    const isExpanded = toggleBtn.dataset.state === 'expanded';
    if (isExpanded) {
      body.style.display = 'none';
      toggleBtn.textContent = '展开内容';
      toggleBtn.dataset.state = 'collapsed';
      card.classList.add('is-collapsed');
    } else {
      body.style.display = 'block';
      toggleBtn.textContent = '收起内容';
      toggleBtn.dataset.state = 'expanded';
      card.classList.remove('is-collapsed');
    }
  });

  // 6. 装配节点并挂载到页面
  header.appendChild(toggleBtn);
  card.appendChild(header);
  card.appendChild(body);
  container.appendChild(card);
}

// 调用示例
createInteractiveCard('#app-root', '系统安全检查', '所有核心端口与防火墙规则均已验证完毕，运行正常。');

六、性能优化与操作规范总结

频繁的DOM操作和样式修改会触发浏览器的重排（Reflow，计算布局尺寸位置）和重绘（Repaint，计算色彩视觉绘制），直接影响界面响应的流畅度。遵循规范的编码习惯能够显著减轻渲染负担。

通过建立“优先以 classList 控制视觉状态，辅助以 style 处理动态计算值，基于 textContent 保证文本安全，借助 DocumentFragment 聚合批量变更”的思维模型，开发者即可在保证性能与安全的前提下，构建出稳定流畅的前端动态页面。