在网页开发中，javascript如何操作DOM以及怎样动态更新网页内容，是每一个前端学习者都要面对的基础问题。DOM全称是文档对象模型，浏览器会把HTML结构解析成一棵节点树，javascript通过这棵树来读取或修改页面。
一、获取页面中的元素
要想动态更新内容，第一步是拿到对应的DOM节点。常用的方法有以下两种：
document.getElementById('id')：通过id精准获取一个元素document.querySelector('.class')：通过CSS选择器获取第一个匹配元素
比如页面上有一个<div id="msg"></div>，我们可以用下面代码拿到它：
// 获取id为msg的div元素
const box = document.getElementById('msg');
console.log(box);
二、修改文字与属性
拿到节点后，就能改里面的文字或标签属性。最安全的方式是用textContent，避免把字符串当HTML解析。
// 动态更新div里的文字 box.textContent = '你好，这是新内容'; // 修改元素的class属性 box.className = 'active';
使用innerHTML需谨慎
如果一定要插入HTML结构，可以用innerHTML，但千万别拼接用户输入，否则容易出现安全问题。
// 仅用于可信内容 box.innerHTML = '<strong>加粗文字</strong>';
三、新增与删除节点
动态更新网页内容 often 需要添加或移除元素。我们可以创建新节点再挂到树上。
创建并添加元素
// 创建一个新的p标签
const p = document.createElement('p');
p.textContent = '这是动态添加的段落';
// 放到box里面
box.appendChild(p);
删除已有元素
// 删除box下的第一个子节点
if (box.firstChild) {
box.removeChild(box.firstChild);
}
四、结合事件动态响应
单纯改一次不够，通常要在用户操作时更新。给按钮绑事件即可：
<button id="btn">点我更新</button>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
box.textContent = '按钮被点击了，内容已更新';
});
</script>
| 场景 | 推荐方法 |
|---|---|
| 改文字 | textContent |
| 插HTML | innerHTML（可信时） |
| 加节点 | appendChild |
| 删节点 | removeChild |
只要理清获取节点、修改属性、增删元素、绑定事件这几步，javascript操作DOM并动态更新网页内容就不再是难事。多写几个小例子，自然就能熟练运用。
javascriptDOM动态更新修改时间：2026-07-26 03:06:18