前端新手必看：30分钟搞懂DOM操作与JavaScript实战技巧
- 前端新手必看：30分钟搞懂DOM操作与JavaScript实战技巧
- 从“页面不会动”说起
- DOM 到底是什么——把一座城市塞进浏览器
- 浏览器是怎么把 HTML 变成 DOM 的——一次“城市竣工”的幕后花絮
- 用 JavaScript 找到你想操控的元素——“城管”持证上岗
- 动手改内容：innerHTML、textContent 和 innerText 的三角恋
- 动态增删改查 DOM 节点——拆迁办的一天
- 监听用户行为：事件绑定的正确姿势——别再用 οnclick="fun()" 了
- 批量操作 DOM 时的性能陷阱——别让页面卡成 PPT
- 常见“DOM 操作失灵”问题排查清单——一把瑞士军刀
- 让 DOM 操作更丝滑的小技巧——老鸟的不传之秘
- 当心！这些 DOM 操作习惯正在拖慢你的应用——面试常问
- 玩转现代 API：MutationObserver 与 IntersectionObserver——给城市装上监控
- 结语：把 DOM 当成自家客厅
前端新手必看：30分钟搞懂DOM操作与JavaScript实战技巧
——别让“页面不会动”成为你职业生涯的黑历史
从“页面不会动”说起
“我按钮都写了，咋点它就是不动？”——别笑，十年前我也这么问过。那时候我把 <button> 写得漂漂亮亮，CSS 描了边、上了渐变，结果一按下去，浏览器像高冷前任：毫无回应。
问题不在颜值，而在“神经”没搭好：HTML 只是骨架，CSS 是皮相，JavaScript 才是神经。神经要找准“穴位”——DOM 节点——才能指挥页面动起来。今天这篇，就带你把 DOM 从“听说过”变成“玩得溜”。文章很长，代码很满，忍得住尿点、耐得住寂寞，30 分钟后你就不是原来的你。
DOM 到底是什么——把一座城市塞进浏览器
官方定义太枯燥：文档对象模型（Document Object Model）。说人话：浏览器把 HTML 变成内存里的一棵“家谱树”，每个标签是家族成员，JavaScript 就是家族理事会，想叫谁、想揍谁、想给谁改名，一句话的事。
想象浏览器是一座城市：
- HTML 是城市规划图
- CSS 是装修队
- DOM 则是竣工后活生生的城市——每栋楼（元素）都有门牌号（id）、户型（class）、人口（子节点）。只要拿到“地图”（DOM 树），你就能随时拆迁、装修、甚至半夜偷偷给 502 换成 KTV。
浏览器是怎么把 HTML 变成 DOM 的——一次“城市竣工”的幕后花絮
- 用户输入 URL，浏览器下载字节流
- 主线程一边解压一边“词法分析”——把
<div>、<p>拆成 token - 遇到 token 就压栈，构造“家谱”——DOM 树
- 遇到
<link>、<script>会阻塞，因为装修队（CSS）和水电工（JS）要来改图纸 - 树建完触发
DOMContentLoaded，此时你可以安全访问 DOM；等资源全部拉完触发load
结论：
- 把
<script>丢<head>里不用defer，就像装修队冲进毛坯房先贴瓷砖——找不到墙（DOM）直接全剧终 - 监听
DOMContentLoaded或给script加defer/async，才能确保“城市”已竣工再搞拆迁
<!-- 错误示范：脚本跑在元素之前 -->
<head>
<script>
// 城市还没建好，console 报 null
console.log(document.querySelector('#app')); // null
</script>
</head>
<body>
<div id="app">Hi</div>
</body>
<!-- 正确示范：defer 等竣工再动手 -->
<head>
<script defer>
console.log(document.querySelector('#app')); // <div id="app">
</script>
</head>
用 JavaScript 找到你想操控的元素——“城管”持证上岗
远古时代：
var box = document.getElementById('box'); // 只能找一个，且 id 写死
现代标配：
const box = document.querySelector('#box'); // CSS 选择器，会就能找到
const allItems = document.querySelectorAll('.list-item'); // 返回 NodeList，不会 live
性能八卦：
getElementById依旧是最快，毕竟浏览器给 id 建了哈希表querySelector要解析选择器，稍慢，但可维护性高——省得你写一堆ifgetElementsByClassName/TagName返回 live HTMLCollection，页面一边改、集合一边变，小心死循环
// 死循环现场：边遍历边新增
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
const div = document.createElement('div');
div.className = 'item';
document.body.appendChild(div); // length 实时 +1，循环到地老天荒
}
动手改内容：innerHTML、textContent 和 innerText 的三角恋
innerHTML：能把字符串当 HTML 解析，方便但危险——像给陌生人开门textContent：纯文本，不解析标签，安全、快速innerText：看似同 textContent，但会触发重排、忽略隐藏元素，老浏览器还爱搞兼容差
// XSS 惨案
const name = '
<-IMG-0->
';
box.innerHTML = `<div>欢迎 ${name}</div>`; // 执行了 alert('xss')
// 安全写法
box.textContent = name; // 把标签当字符串，浏览器不会解析
性能对比：
console.time('innerHTML');
box.innerHTML = 'a'.repeat(10000);
console.timeEnd('innerHTML'); // 慢，因为解析字符串
console.time('textContent');
box.textContent = 'a'.repeat(10000);
console.timeEnd('textContent'); // 快，直接替换文本节点
动态增删改查 DOM 节点——拆迁办的一天
- 创建节点
const li = document.createElement('li');
li.textContent = '新邻居';
- 插入节点
// 尾部
ul.appendChild(li);
// 指定位置
ul.insertBefore(li, ul.firstChild);
// HTML 字符串大法
ul.insertAdjacentHTML('beforeend', '<li>隔壁老王</li>');
- 替换 & 删除
oldNode.replaceWith(newNode);
oldNode.remove(); // IE 不服，需 polyfill
- DocumentFragment —— 虚拟搬家箱
const frag = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = i;
frag.appendChild(li);
}
ul.appendChild(frag); // 只触发一次重排
监听用户行为：事件绑定的正确姿势——别再用 οnclick=“fun()” 了
<!-- 远古写法，HTML 与逻辑耦合，差评 -->
<button onclick="handle()">点我</button>
现代标准：
button.addEventListener('click', handle, false); // 冒泡阶段
事件流三阶段：捕获 -> 目标 -> 冒泡
Delegation 委托：把监听器绑定在父级，省内存、支持动态子元素
// 动态列表，点 <li> 弹出内容
ul.addEventListener('click', e => {
if (e.target.matches('li')) {
alert(e.target.textContent);
}
});
阻止冒泡 & 默认行为：
link.addEventListener('click', e => {
e.preventDefault(); // 阻止跳转
e.stopPropagation(); // 阻止冒泡
});
批量操作 DOM 时的性能陷阱——别让页面卡成 PPT
读写分离：
// 坏：每次循环都读、写，触发重排
for (let i = 0; i < 100; i++) {
boxes[i].style.width = boxes[i].offsetWidth + 10 + 'px';
}
// 好：先读光、再写光
const widths = [];
for (let i = 0; i < 100; i++) widths.push(boxes[i].offsetWidth);
for (let i = 0; i < 100; i++) boxes[i].style.width = widths[i] + 10 + 'px';
用 requestAnimationFrame 做动画：
function slideLeft(el, distance) {
let start = null;
function step(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const left = Math.min(progress / 10, distance);
el.style.transform = `translateX(-${left}px)`;
if (left < distance) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
CSS 类切换代替一行行改 style：
// 坏
box.style.background = 'red';
box.style.fontSize = '20px';
box.style.padding = '10px';
// 好
.box-hot {
background: red;
font-size: 20px;
padding: 10px;
}
box.classList.add('box-hot');
常见“DOM 操作失灵”问题排查清单——一把瑞士军刀
querySelector返回 null？- 脚本跑在元素前面 → 用
defer或DOMContentLoaded
- 脚本跑在元素前面 → 用
- 动态加载的 HTML 找不到？
- Ajax / fetch 插入后节点才出现，监听回调里再查找
- 事件不触发？
- 检查是否
stopPropagation误杀 - 检查目标元素是否被其他透明层盖住
- 检查是否
- 内存泄漏？
- 全局变量保存 DOM 引用、闭包不释放、事件未
removeEventListener
- 全局变量保存 DOM 引用、闭包不释放、事件未
让 DOM 操作更丝滑的小技巧——老鸟的不传之秘
dataset—— 原生版自定义属性
<div id="user" data-age="18" data-city="Chengdu"></div>
const div = document.querySelector('#user');
console.log(div.dataset.age); // '18'
closest—— 向上找祖先
e.target.closest('li'); // 从点击的 span 找到包裹的 li
matches—— 检查选择器
if (e.target.matches('a.external')) { /* 只处理外部链接 */ }
classList.toggle带强制状态
btn.addEventListener('click', () => {
panel.classList.toggle('show', !panel.classList.contains('show')); // 第二个参数可强制
});
当心！这些 DOM 操作习惯正在拖慢你的应用——面试常问
- 循环里直接改 DOM
→ 用 DocumentFragment 或字符串拼接后一次性插入 - 滥用
innerHTML做纯文本赋值
→ 用textContent，安全又快速 - 事件监听器不清理
→ 单页应用路由切换时removeEventListener，或使用AbortController
const ac = new AbortController();
btn.addEventListener('click', handler, { signal: ac.signal });
// 路由离开时
ac.abort(); // 一键移除
玩转现代 API：MutationObserver 与 IntersectionObserver——给城市装上监控
MutationObserver —— 监听“拆迁”
const mo = new MutationObserver(muts => {
muts.forEach(m => {
if (m.type === 'childList') {
console.log('新增节点:', m.addedNodes);
}
});
});
mo.observe(document.body, { childList: true, subtree: true });
实战：实现“元素一出现就自动聚焦”
mo.observe(container, {
childList: true,
subtree: true
});
function focusInput(muts) {
muts.forEach(m => {
m.addedNodes.forEach(n => {
if (n.nodeName === 'INPUT') n.focus();
});
});
}
IntersectionObserver —— 懒加载神器
const io = new IntersectionObserver(entries => {
entries.forEach(en => {
if (en.isIntersecting) {
const img = en.target;
img.src = img.dataset.src;
io.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));
结语：把 DOM 当成自家客厅
DOM 不是冷冰冰的“API 列表”，它是浏览器递给你的遥控器。写前端，就是把用户的每一次点击、每一次输入，转化成对这棵“城市树”的温柔改造。记住：
- 先选准节点，再动手；
- 批量操作，先缓存再写入；
- 事件委托，省内存又不怕动态内容；
- 用新 API（如
IntersectionObserver）代替“古老轮询”。
把上面代码抄三遍、跑通、再举一反三，你会发现——曾经“不会动”的页面，如今跳得比广场舞大妈还欢。祝你 30 分钟后，顺利脱离“DOM 小白”称号，成为能“让城市听指挥”的合格拆迁队长。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
扫一扫
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
