当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptDOM操作教程：动态修改网页内容与样式

JavaScriptDOM操作教程：动态修改网页内容与样式

2026-01-24 17:06:41 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript DOM操作教程：动态修改网页内容与样式》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

需先用 getElementById 或 querySelector 获取元素，再通过 textContent（安全纯文本）或 innerHTML（含HTML，需转义）修改内容；推荐缓存查询结果、用 classList 控制样式、事件委托处理动态元素、批量读写DOM以提升性能。

javascript的dom操作如何实现_如何动态地修改网页内容和样式【教程】

用 `document.getElementById` 或 `querySelector` 获取元素再修改内容

想改网页上某段文字或 HTML，得先拿到对应 DOM 节点。最常用的是 document.getElementById（ID 唯一、快）和 document.querySelector（支持 CSS 选择器、灵活）。拿到节点后，直接改 textContent（纯文本，防 XSS 安全）或 innerHTML（含 HTML，注意转义）。

textContent 适合替换标题、提示语等纯文本，不会触发 HTML 解析，性能好且安全
innerHTML 适合插入带标签的内容，比如动态加一个 高亮，但若内容来自用户输入，必须先做 HTML 转义
避免反复调用 querySelector 查同一个元素——查一次存变量，尤其在循环或高频回调里

const title = document.querySelector('#page-title');
title.textContent = '新页面标题';

const container = document.getElementById('list-container');
container.innerHTML = '第一项
第二项
';

通过 `element.style` 和 `classList` 控制样式

改样式有两种主流方式：内联样式（element.style.xxx）和类名切换（element.classList）。前者适合临时、单次、计算型样式（比如根据数据算出 left 值）；后者更推荐用于状态控制（如“激活”“禁用”“加载中”），利于 CSS 维护和复用。

element.style.color = 'red' —— 注意 CSS 属性名转驼峰：background-color → backgroundColor，font-size → fontSize
element.classList.add('active') / .remove('hidden') / .toggle('loading') —— 支持多个类名，如 .add('a', 'b', 'c')
别直接赋值 element.className = 'new'，会覆盖所有已有类；要用 classList 增量操作

const btn = document.querySelector('button');
btn.style.backgroundColor = '#007bff';
btn.style.padding = '8px 16px';

btn.classList.add('btn-primary', 'is-clicked');
btn.classList.remove('disabled');

动态添加/删除元素时注意事件绑定和内存泄漏

用 appendChild、insertAdjacentHTML 或 innerHTML += 添加新节点后，如果这些节点需要响应点击等事件，不能靠重新绑定全部监听器——容易重复绑定或漏绑。推荐用事件委托（event delegation）或确保每次只绑一次。

用父容器监听，再用 e.target.matches('.dynamic-btn') 判断是否命中目标，比给每个新按钮单独 addEventListener 更轻量
避免用 innerHTML += 追加内容——它会销毁并重建整个子树，已绑定的事件监听器、输入框焦点、自定义属性都会丢失
用 document.createElement + appendChild 或 insertAdjacentElement 更可控，也方便后续引用和清理

const list = document.getElementById('item-list');
list.addEventListener('click', e => {
  if (e.target.matches('button.delete')) {
    e.target.closest('li').remove();
  }
});

// ✅ 推荐：创建并插入
const newItem = document.createElement('li');
newItem.innerHTML = '新条目 ';
list.appendChild(newItem);

修改 DOM 后浏览器重排重绘的性能影响

频繁读写 DOM 属性（比如循环里反复取 offsetHeight 再设 style.width）会强制浏览器同步计算布局，导致卡顿。关键原则是：读批量读，写批量写，把读写操作分开。

要读多个布局信息（offsetTop、clientWidth 等），尽量一次性读完，不要夹在写操作中间
要改多个样式，优先用 className 或 classList 切换预设 CSS 类，而不是逐个设 style.xxx
大量 DOM 变动时，考虑用 DocumentFragment 先离线组装，再一次性挂载

const fragment = document.createDocumentFragment();
for (let i = 0; i 

实际项目里，DOM 操作本身不难，难的是什么时候该操作、怎么避免副作用、以及如何与状态更新节奏对齐——尤其是当内容受用户输入、异步数据、动画帧影响时，顺序和时机比语法更重要。今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~