0Pricing
Frontend Academy · 课时

修改内容：textContent、innerHTML、classList

读取和更新元素文本内容，插入 HTML，并以编程方式切换、添加和移除 CSS 类。

修改内容：textContent、innerHTML、classList 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

读取和写入 textContent

element.textContent 可以获取或设置元素的纯文本内容，包括所有后代元素。它是安全的——它从不解析 HTML，因此使用用户输入设置它不会造成 XSS 漏洞。

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — 谨慎使用

element.innerHTML 可以获取或设置元素内部的 HTML 标记。它虽然方便，但处理用户输入时很危险——它会解析 HTML，并可能执行脚本（XSS）。切勿使用未经清理的用户数据设置 innerHTML。

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText 与 textContent

innerText 只返回可见文本（会遵循 CSS 的 display:none），并且会触发布局计算。textContent 会返回包括隐藏文本在内的所有文本，而且速度更快。除非确实需要可见文本行为，否则请优先使用 textContent。

classList — 添加和移除类

element.classList 提供了用于修改 CSS 类的方法，无需操作完整的 className 字符串。包括 add()、remove()、toggle()、contains() 和 replace()。

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

带强制参数的 toggle

classList.toggle('class', condition) 会在 condition 为真值时添加类，为假值时移除类。这是将类与布尔状态同步的简洁方式。

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

读取和设置属性

element.getAttribute('attr') 可以读取任意属性。element.setAttribute('attr', value) 可以设置属性。element.removeAttribute('attr') 可以移除属性。element.hasAttribute('attr') 可以检查属性是否存在。

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

data-* 属性

自定义 data-* 属性可以在不影响 DOM 的情况下，将额外数据存储在元素上。您可以通过 element.dataset 以 camelCase 形式访问这些数据。

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

样式属性

element.style.propertyName 可以设置内联样式。对于带连字符的属性，请使用 camelCase。相比设置内联样式，更推荐切换 CSS 类——这样可以将样式保留在 CSS 文件中，放在应有的位置。

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

读取计算后的样式

getComputedStyle(element) 会返回经过层叠后实际应用的样式，而不仅是内联样式。您可以使用它读取由 CSS 类或浏览器默认设置的样式。

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

修改标题和 meta 标签

您可以随时通过 document.title = 'New Title' 修改文档标题（浏览器标签页标题）。对于单页应用来说，在不同视图之间导航时，这能带来更好的用户体验。

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) 会平滑地滚动页面，使元素进入可视区域。它非常适合用于滚动到指定区块的导航，以及在表单中突出显示验证错误。

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

快速检查

要在 DOM 中安全地显示用户提供的文本并避免 XSS 风险，应该使用哪个属性？

回顾：修改 DOM

textContent 可以安全地设置纯文本。innerHTML 会设置 HTML（处理用户输入时很危险）。classList.add/remove/toggle 可以简洁地处理 CSS 类。setAttribute/dataset 可以管理 HTML 属性。相比内联样式，更推荐切换类。getComputedStyle 可以读取最终应用的样式。

常见问题解答

「修改内容：textContent、innerHTML、classList」课时是免费的吗？

是的 — 「修改内容：textContent、innerHTML、classList」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「修改内容：textContent、innerHTML、classList」这节课中我会学到什么？

读取和更新元素文本内容，插入 HTML，并以编程方式切换、添加和移除 CSS 类。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「修改内容：textContent、innerHTML、classList」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. querySelector 与 querySelectorAll
  2. addEventListener 与事件对象
  3. 修改内容：textContent、innerHTML、classList
  4. 创建并追加元素
← 返回 Frontend Academy