JavaScript DOM操作与事件处理：新手实战修改网页内容

学会HTML和CSS，你只能做出静止的页面。想让网页动起来、能和用户互动，就离不开JavaScript DOM操作。DOM是浏览器把网页变成的一棵树，JavaScript通过它来读取和修改页面内容。今天老陈带新手用几个小例子，搞懂DOM操作和事件处理到底怎么用。

一、什么是DOM，为什么要用它

DOM全称是文档对象模型，浏览器加载网页后会把它解析成一棵节点树，每个标签、每段文字都是树上的一个节点。JavaScript DOM操作就是去找到这些节点，然后改文字、换样式、增删元素。简单说，DOM是JavaScript控制页面的桥梁。

• document 代表整个页面，是所有节点的根
• 元素节点对应HTML标签，文本节点对应标签里的文字
• 通过DOM，页面不用刷新就能实时变化

二、三个最常用的选取方法

1. getElementById 按id找唯一元素

给标签加一个 id，JavaScript 就能精准定位。比如页面里有一段文字，给它标上 id，再用 document 的 getElementById 方法就能拿到这个节点去修改。

2. querySelector 用CSS选择器找元素

这个方法更灵活，能写点号、井号、标签组合这样的选择器，返回第一个匹配项，适合结构比较复杂的页面。

3. querySelectorAll 一次拿一组

需要批量处理时用它，返回所有匹配元素组成的列表，配合循环就能逐个修改。

三、JavaScript DOM操作实战：改文字和样式

拿到元素后，改内容用 textContent，改样式用 style。例如让一段文字变红，就给它的 style 的 color 属性赋值 red。再配合 innerHTML 还能往里插入新标签，实现动态更新。

四、事件处理：让页面听懂用户动作

事件就是用户的操作，比如点击、鼠标移入、输入文字。JavaScript通过 addEventListener 监听事件，触发后执行函数。最常见的就是点击按钮改文字：给按钮绑一个 click 事件，用户一点，页面内容立刻变。

• click 表示被点击
• mouseover 表示鼠标移入
• input 表示输入框内容变化

五、新手避坑指南

第一，脚本要放在页面元素后面，或者用 DOMContentLoaded 包裹，否则元素还没生成就去选，会拿到空值。第二，id不要重复，否则 getElementById 只认第一个。第三，改样式尽量用 class 切换，比直接写 style 更好维护。

老陈总结

JavaScript DOM操作和事件处理是前端从静态走向交互的关键一步。今天讲的例子都很小，但套路就这些：先选元素、再改内容、最后绑事件。建议你打开浏览器，建一个带按钮的页面，照着例子敲一遍，点一下看文字变化，比看十遍都管用。想系统学前端实战的，可以看我系统课程，或者评论区留言发链接给你。