DOM 操作入门与实战
🎯 引言
学会 DOM 操作，意味着你可以用 JavaScript 改变网页上的内容、样式和结构，让网页不再是死板的文字和图片，而是变得活泼、互动起来。比如点击按钮显示隐藏内容，动态添加新的元素，修改文字内容等。掌握这项技能，是做前端开发必须跨过的重要一步。
🌐 什么是 DOM？为什么要操作它？
DOM，全称是 Document Object Model，中文叫文档对象模型。简单来说，网页就像一本书，DOM 是这本书的电子目录。浏览器把网页里的所有标签、文字、图片等内容都变成了一个个节点，组成一棵树，我们叫它 DOM 树。
你可以把 DOM 理解成网页的「骨架」和「内容」。通过 JavaScript 操作 DOM，实际上就是在操作这棵树，改动网页上的内容和结构。
🛠️ 常见的 DOM 节点选择方法
在操作 DOM 之前，第一步是找到你想操作的那个节点（元素）。这就有点像你要找一本书中的某一页或者某一段。
1. 根据 id 找元素
id 是网页中元素的唯一标识，你可以用 document.getElementById('id名') 来找到它。
示例：
<div id="greeting">你好，世界！</div>
JavaScript：
var greet = document.getElementById('greeting');
2. 根据标签名找元素
所有的某种标签元素都会被选中，比如所有的 <p> 标签。
var paragraphs = document.getElementsByTagName('p');
这里返回的是一个列表，要用索引取具体某个元素。
3. 根据类名找元素
网页上相同功能或样式往往会被赋予同一个类名。
var items = document.getElementsByClassName('item');
4. 使用通用选择器（CSS 选择器）
这个方法比较灵活，可以根据标签、类、id、层级结构来选元素。
var firstItem = document.querySelector('.item');
var allItems = document.querySelectorAll('.item');
querySelector 只返回匹配的第一个元素，querySelectorAll 返回所有匹配的元素列表。✏️ 如何修改 DOM 节点内容？
拿到元素后，最常用的操作就是改它里面的文字或者 HTML 结构。
修改文字内容
用 innerText 或 textContent 属性可以修改元素的文本。
var greet = document.getElementById('greeting');
greet.innerText = '你好，前端小白！';
修改 HTML 内容
如果想改成带标签的内容，用 innerHTML。
greet.innerHTML = '<strong>你好，前端小白！</strong>';
innerHTML 替换内容时，会重新解析 HTML，可能会导致之前绑定的事件失效。➕ 动态增删元素，网页更灵活
不仅改内容，有时候你想让网页新增或删除内容，这就需要操作元素节点。
1. 创建新元素
用 document.createElement('标签名') 来新建元素。
var newDiv = document.createElement('div');
newDiv.innerText = '我是新加的内容';
2. 添加元素到页面
用父元素的 appendChild 方法。
var container = document.getElementById('container');
container.appendChild(newDiv);
这样新元素就加到容器的末尾了。
3. 删除元素
用父元素的 removeChild 方法。
container.removeChild(newDiv);
4. 替换元素
用父元素的 replaceChild 方法。
var anotherDiv = document.createElement('div');
anotherDiv.innerText = '替换内容';
container.replaceChild(anotherDiv, newDiv);
🎨 修改元素样式
网页好看很重要，样式就是网页的衣服。DOM 操作还能修改元素的样式。
1. 直接修改 style 属性
var box = document.getElementById('box');
box.style.backgroundColor = 'lightblue';
box.style.width = '200px';
box.style.height = '100px';
2. 增删类名控制样式
通过 className 或 classList 来添加/删除类名。
box.classList.add('active');
box.classList.remove('active');
💡 事件与 DOM 操作结合，打造互动网页
DOM 操作常和事件一起用，比如点击按钮，内容发生变化。
示例：点击按钮显示隐藏文字
<button id="btn">点击切换显示</button>
<div id="text">这段文字可以隐藏或显示</div>
JavaScript：
var btn = document.getElementById('btn');
var text = document.getElementById('text');
btn.onclick = function () {
if (text.style.display === 'none') {
text.style.display = 'block';
} else {
text.style.display = 'none';
}
};
onclick 是给按钮绑定点击事件，每次点击都执行里面的函数。🧾 小节总结
- DOM 是网页的结构树，JavaScript 可以操作它实现网页动态效果。
- 常用选元素的方法有：根据 id、标签名、类名、CSS 选择器。
- 可以修改节点内容、添加/删除/替换元素，调整样式，绑定事件让网页动起来。
❓ 知识问答（Q&A）
Q：什么是 DOM？
A：DOM 是网页的文档对象模型，是浏览器把网页内容转成的树状结构，可以用 JavaScript 操作它来改变网页。
Q：如何用 JavaScript 找到页面上的元素？
A：可以用 getElementById、getElementsByTagName、getElementsByClassName，或者 querySelector 和 querySelectorAll。
Q：怎么给一个元素添加新的内容？
A：先用 createElement 创建新元素，再用 appendChild 加到页面上的父元素里。
🧪 小练习
练习1：点击按钮，页面上新增一个带文字的红色盒子
<button id="addBtn">添加盒子</button>
<div id="container"></div>
<style>
.red-box {
width: 100px;
height: 50px;
background-color: red;
color: white;
margin: 5px 0;
line-height: 50px;
text-align: center;
}
</style>
<script>
var addBtn = document.getElementById('addBtn');
var container = document.getElementById('container');
addBtn.onclick = function () {
// 在这里写代码，创建新盒子并添加到container里
};
</script>
练习2：给一个段落绑定点击事件，点击改变段落的文字颜色
<p id="para">点我试试变颜色</p>
<style>
.color-change {
color: green;
}
</style>
<script>
var para = document.getElementById('para');
// 在这里写代码，给para绑定点击事件，点击时切换color-change类
</script>
🎉 恭喜你已经掌握 DOM 结构理解、节点选择与操作、动态修改网页内容和样式技能啦！这些是前端开发的基础，助你打造丰富多彩的网页效果。继续加油！