JavaScriptDOM操作实例教程（附完整代码）

admin javascript教程 2025-10-24 3

学了 JavaScript 基础的朋友，是不是总觉得 “光会写变量函数没用啊，怎么才能让网页动起来？” 点击按钮变文字、鼠标移过去换颜色，这些酷炫的交互到底咋实现的？别急，今天兔子哥就带大家搞定 DOM 操作，这可是让网页 “活起来” 的核心本事！看完这篇教程，你就能亲手写出能互动的网页效果，不信咱们一起往下看吧！

一、先搞明白：DOM 到底是啥呀？

可能有朋友会问，天天听人说 DOM，它到底是个啥东西？简单说，DOM 就像网页的 “骨架地图”，把网页里的标签、文字、图片这些元素都变成能让 JavaScript 操作的对象。比如网页里的标签、按钮，通过 DOM 就能找到它们，改内容、换样式、加动作，全靠它！
打个比方，咱们逛超市找零食，得先知道货架编号（就像元素的 id），DOM 就像超市的导航图，帮 JavaScript 快速找到要操作的 “货架”（元素）。刚开始可能觉得抽象，但跟着实例做一遍，你就懂了～

二、实例 1：找到元素并改内容，最简单的 DOM 操作

咱们先来个基础的，通过 id 找到元素，然后修改它的文字内容。这招超常用，比如用户登录后显示 “欢迎 xxx” 就靠它！
完整代码在这，直接复制到 HTML 文件里就能跑：
html

DOCTYPE html><html><body><p id="myText">原来的文字p><button onclick="changeText()">点我改文字button><script>function changeText() {// 第一步：通过id找到元素，getElementById超好用！let textElement = document.getElementById("myText");// 第二步：修改内容，innerHTML就是元素里的文字textElement.innerHTML = "文字被我改掉啦！";}script>body>html>

运行后点按钮，文字立马就变了！这里要记住getElementById这个方法，通过元素的 id 属性找元素，快得很。有朋友可能问，要是没有 id 咋办？后面会讲其他查找方法，别急～

三、实例 2：改样式换颜色，让网页变好看

光改文字不够酷，咱们来试试改元素样式，比如点按钮让文字变红、变大。这招能做很多动态效果，比如警告提示变红字。
代码安排上：
html

DOCTYPE html><html><body><h3 id="title">我是标题h3><button onclick="changeStyle()">点我变样式button><script>function changeStyle() {let title = document.getElementById("title");// 改颜色，style.color控制文字颜色title.style.color = "red";// 改字体大小，注意单位要用pxtitle.style.fontSize = "24px";// 加个背景色，让效果更明显title.style.backgroundColor = "#f0f0f0";}script>body>html>

运行后点按钮，标题立马变红变大，还有灰色背景！这里的style 属性超重要，通过它能改元素的几乎所有样式，比如 width、height、fontFamily 都行。兔子哥提醒一句，样式名在 JavaScript 里要写成驼峰式，比如 “font-size” 得写成 “fontSize”，刚开始容易忘，多练两次就熟了～

四、实例 3：给元素 “装动作”，鼠标移过就反应

很多网页有这效果：鼠标移到按钮上，按钮变色；移开又变回来。这叫 “鼠标事件”，用 DOM 事件绑定就能实现，特简单！
看这个实例代码：
html

DOCTYPE html><html><body><button id="myBtn">把鼠标移过来button><script>// 先找到按钮元素let btn = document.getElementById("myBtn");// 鼠标移上去的动作btn.onmouseover = function() {this.style.backgroundColor = "blue";this.style.color = "white";}// 鼠标移开的动作btn.onmouseout = function() {this.style.backgroundColor = "white";this.style.color = "black";}script>body>html>

这里的onmouseover和onmouseout就是鼠标事件，分别对应 “鼠标移上” 和 “鼠标移开”。“this” 代表当前操作的元素（这里就是按钮），用起来超方便。有朋友可能问，除了这两个事件还有啥？多着呢，比如 onclick（点击）、onload（加载完成），后面学深入了慢慢试～

五、实例 4：动态加元素，网页内容能 “长出来”

有时候咱们需要动态加内容，比如评论区点 “添加评论” 就多出一条评论。这时候就得用 DOM 创建新元素，再添加到网页里。
代码示例来了：
html

DOCTYPE html><html><body><div id="commentList"><p>第一条评论p>div><button onclick="addComment()">添加新评论button><script>function addComment() {// 第一步：创建新的p标签let newComment = document.createElement("p");// 第二步：给新标签加内容newComment.innerHTML = "这是新添加的评论～";// 第三步：找到父元素，把新标签加进去let commentList = document.getElementById("commentList");commentList.appendChild(newComment);}script>body>html>

点按钮就能看到新评论冒出来啦！createElement用来创建新元素，appendChild用来把新元素加到父元素里。这招在做动态列表、购物车的时候超有用，学会了能做很多实用功能～

兔子哥的小建议

DOM 操作看着步骤多，但核心就三步：找到元素、操作元素（改内容 / 样式）、加事件反应。刚开始练的时候，建议把代码抄一遍，然后自己改改参数，比如把颜色换成绿色，文字改成自己想写的，改着改着就熟了。
很多新手容易犯的错：要么是元素还没加载完就去查找，导致找不到；要么是事件绑定错了对象。遇到问题别慌，按 F12 打开控制台，看看报错信息，大部分时候都能找到原因。
DOM 操作是前端交互的灵魂，多动手做几个实例比光看教程有用 10 倍。今天这几个例子都是基础中的基础，掌握了它们，以后学复杂交互就轻松多啦！希望这篇教程能帮到你，有问题随时回头看看，多练几次肯定能学会～

标签： .getElementById getElementById

本文地址： https://www.kfyz.com/javascript/768.html