JavaScript 操作 DOM 内容与属性

上一篇解决了怎么拿元素，这一篇解决拿到之后改什么。改文本用 textContent，改 HTML 用 innerHTML，改属性用 getAttribute 和 setAttribute，改类名用 classList。每个场景都有更推荐的用法，挨个看。

读取和修改文本 textContent

textContent 读取或修改元素里的纯文本，只处理文字，不解析标签，安全也直观，是操作文本的首选。

<p id="msg">旧内容</p>

const msg = document.querySelector('#msg');

console.log(msg.textContent); // 旧内容

msg.textContent = '新内容';
console.log(msg.textContent); // 新内容

赋的新值是普通文本，就算里面写了 <b> 也会被当作普通字符原样显示，不会变成粗体标签。

读取和修改 HTML innerHTML

innerHTML 把元素内部的 HTML 整体替换掉，可以插入真正的标签。

<div id="box"></div>

const box = document.querySelector('#box');

box.innerHTML = '<p>第一行</p><p>第二行</p>';
// 页面里出现两个 p 标签

功能强大，但有个必须牢记的风险，XSS。如果把用户的输入直接塞进 innerHTML，用户就能让浏览器执行任意脚本。下面的写法是危险的，不要模仿。

// 危险示例，绝对不要这样写
const userInput = '<img src=x onerror="alert(\'你被攻击了\')">';
box.innerHTML = userInput;

用户输入想显示为文本，用 textContent 而不是 innerHTML。只有内容完全由自己控制、确实需要插入标签时，才使用 innerHTML。

读取和设置属性 getAttribute / setAttribute

getAttribute 读取任意 HTML 属性，setAttribute 设置或修改任意属性，第一个参数是属性名，第二个参数是值。

<a id="link" href="https://example.com" target="_blank">链接</a>

const link = document.querySelector('#link');

console.log(link.getAttribute('href')); // https://example.com

link.setAttribute('href', 'https://baidu.com');
link.setAttribute('title', '提示文字');
// 修改了 href，新增了 title

属性不存在时 getAttribute 返回 null，可以判断后再处理。

操作类名 classList

改类名用 classList，它提供 add、remove、toggle 三个常用方法，比直接拼接 className 字符串优雅得多。

• add(‘类名’) 添加一个类。
• remove(‘类名’) 移除一个类。
• toggle(‘类名’) 有就移除，没有就添加，相当于开关。

.highlight {
  background-color: yellow;
}

<p id="tip">普通文字</p>

const tip = document.querySelector('#tip');

tip.classList.add('highlight');    // 加上高亮，背景变黄
tip.classList.remove('highlight'); // 去掉高亮，恢复普通
tip.classList.toggle('highlight'); // 现在没有这个类，会被加上

toggle 特别适合做开关类的效果，点一下加类，再点一下去掉类。

小结

• 操作文本用 textContent，只处理文本，安全。
• innerHTML 能插入标签，但用户输入绝不能直接塞进去，防止 XSS。
• getAttribute 和 setAttribute 读取和设置任意 HTML 属性。
• classList 的 add、remove、toggle 是操作类名的现代推荐用法。
• 下一篇讲怎么在页面上创建新元素和删除旧元素。