一、什么是DOM？
如果把网页想象成一座毛坯房，DOM（Document Object Model）就是这座房子的三维设计图。它用树状结构记录了网页上每个元素的详细信息：哪里有一扇“窗户”（图片）、哪里摆了一张“沙发”（按钮）、哪里挂了“吊灯”（文字）……通过DOM操作，你可以像装修房子一样，随时调整网页的布局和内容！
二、装修四步法：DOM核心操作
1. 找家具：定位元素
装修前得先找到要改的家具，DOM操作也一样。
-
通过ID找（精确查找）：
let 沙发 = document.getElementById('主沙发'); // 找到ID为"主沙发"的元素 -
通过标签找（批量查找）：
let 所有桌子 = document.getElementsByTagName('table'); // 找到所有<table>标签 -
通过类名找（风格筛选）：
let 蓝色家具 = document.getElementsByClassName('蓝色'); // 找到所有class含"蓝色"的元素
2. 改家具：调整元素
找到家具后，想怎么改就怎么改！
-
改外观（调整样式）：
沙发.style.backgroundColor = "珊瑚粉"; // 给沙发刷上新颜色 沙发.style.fontSize = "20px"; // 调整文字大小 -
改内容（替换文字或HTML）：
document.getElementById('标语').innerHTML = "<em>限时特惠！</em>"; // 插入带格式的文字 -
贴标签（添加属性）：
沙发.setAttribute('data-material', '真皮'); // 给沙发添加材质属性
3. 买新家具：创建元素
觉得家里空荡荡？随时添加新家具！
// 设计一个新衣柜
let 新衣柜 = document.createElement('div');
新衣柜.textContent = "双开门大衣柜";
// 把衣柜放进"卧室"区域
document.getElementById('卧室').appendChild(新衣柜);
4. 扔旧家具：删除元素
看腻的家具，直接扔掉！
let 旧桌子 = document.getElementById('破桌子');
旧桌子.parentNode.removeChild(旧桌子); // 从父容器中移除元素
三、装修实战：魔法按钮改造记
目标：点击按钮后，让文字变身！
<button id="魔法按钮">点我变装！</button>
<p id="标语">欢迎来到我的小屋~</p>
DOM操作代码：
// 第一步：找到按钮
let 按钮 = document.getElementById('魔法按钮');
// 第二步：给按钮装个"魔法开关"
按钮.addEventListener('click', function() {
// 第三步：找到标语并改造
let 标语 = document.getElementById('标语');
标语.innerHTML = "🎊 小屋升级为豪华别墅！";
标语.style.color = "金色";
标语.style.backgroundColor = "深蓝色";
});
效果：点击按钮后，文字瞬间变成金色炫光字体，背景变成深蓝色，仿佛施了魔法！
四、总结
DOM操作就像一场有趣的装修游戏：
- 设计图（DOM）决定了网页的骨架
- JavaScript是你的魔法装修工具包
- 想象力是唯一的限制
下次看到网页上的动态效果，就知道那不过是开发者在用DOM“装修房子”罢了！现在打开浏览器控制台，试着给你的“网页小屋”换一套新皮肤吧！🚀
动手彩蛋：在控制台输入以下代码，立刻给当前网页加个粉色边框！
document.body.style.border = "10px solid pink";
