前端Wiki/JavaScript/进阶/DOM 操作

修改内容与样式

拿到元素后就可以修改它。改文本用 textContent（纯文本，安全）；改 HTML 用 innerHTML（会把字符串解析成标签）。innerHTML 功能强但有安全风险：绝不能把用户输入直接拼进 innerHTML，否则会被注入 <script> 造成 XSS 攻击，用户输入一律走 textContent。

改样式通过 el.style.属性名 操作内联样式，注意 CSS 里带连字符的属性要换成驼峰：background-color 写成 style.backgroundColor。style 只能读写内联样式，想拿到最终生效的所有样式（包括 CSS 文件里的），用 getComputedStyle(el)。

更推荐的做法是：在 CSS 里写好类，JS 只负责切换类名（下一节 classList），让样式归 CSS、逻辑归 JS。

本节要点textContent 安全、innerHTML 有 XSS 风险；style 属性用驼峰命名；改样式优先用切换类名而非逐条设置。

HTML

<div id="box" style="padding: 10px;">原来的文字</div>
<script>
  const box = document.getElementById('box');

  // 改文本：安全，不会解析标签
  box.textContent = '文字被 JS 修改了';

  // 改 HTML：字符串会被解析成标签（防 XSS：别拼用户输入）
  box.innerHTML = '文字被 <b>JS</b> 修改了';

  // 改内联样式：连字符属性换成驼峰
  box.style.backgroundColor = '#eef7ff';
  box.style.border = '1px solid #69a';
  box.style.fontSize = '18px';

  // 读取最终生效的样式（包括 CSS 文件里的）
  const cs = getComputedStyle(box);
  console.log('计算后的内边距：', cs.padding);
</script>

🔗 相关词条classList HTML CSS JS 标签元素

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读