2025年有实力的刑事律师、比较不错的刑事律师事务所推荐 - 工业品牌热点
2025/12/27 15:45:22
前端新手必看：30分钟搞懂DOM操作与JavaScript实战技巧
- 前端新手必看：30分钟搞懂DOM操作与JavaScript实战技巧
- 从“页面不会动”说起
- DOM 到底是什么——把一座城市塞进浏览器
- 浏览器是怎么把 HTML 变成 DOM 的——一次“城市竣工”的幕后花絮
- 用 JavaScript 找到你想操控的元素——“城管”持证上岗
- 动手改内容：innerHTML、textContent 和 innerText 的三角恋
- 动态增删改查 DOM 节点——拆迁办的一天
- 监听用户行为：事件绑定的正确姿势——别再用 οnclick="fun()" 了
- 批量操作 DOM 时的性能陷阱——别让页面卡成 PPT
- 常见“DOM 操作失灵”问题排查清单——一把瑞士军刀
- 让 DOM 操作更丝滑的小技巧——老鸟的不传之秘
- 当心！这些 DOM 操作习惯正在拖慢你的应用——面试常问
- 玩转现代 API：MutationObserver 与 IntersectionObserver——给城市装上监控
- 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 报 nullconsole.log(document.querySelector('#app'));// null</script></head><body><divid="app">Hi</div></body><!-- 正确示范：defer 等竣工再动手 --><head><scriptdefer>console.log(document.querySelector('#app'));// <div id="app"></script></head>用 JavaScript 找到你想操控的元素——“城管”持证上岗
远古时代：
varbox=document.getElementById('box');// 只能找一个，且 id 写死现代标配：
constbox=document.querySelector('#box');// CSS 选择器，会就能找到constallItems=document.querySelectorAll('.list-item');// 返回 NodeList，不会 live性能八卦：
getElementById依旧是最快，毕竟浏览器给 id 建了哈希表querySelector要解析选择器，稍慢，但可维护性高——省得你写一堆ifgetElementsByClassName/TagName返回live HTMLCollection，页面一边改、集合一边变，小心死循环
// 死循环现场：边遍历边新增constitems=document.getElementsByClassName('item');for(leti=0;i<items.length;i++){constdiv=document.createElement('div');div.className='item';document.body.appendChild(div);// length 实时 +1，循环到地老天荒}动手改内容：innerHTML、textContent 和 innerText 的三角恋
innerHTML：能把字符串当 HTML 解析，方便但危险——像给陌生人开门textContent：纯文本，不解析标签，安全、快速innerText：看似同 textContent，但会触发重排、忽略隐藏元素，老浏览器还爱搞兼容差
// XSS 惨案constname='<-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 节点——拆迁办的一天
- 创建节点
constli=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 —— 虚拟搬家箱
constfrag=document.createDocumentFragment();for(leti=0;i<1000;i++){constli=document.createElement('li');li.textContent=i;frag.appendChild(li);}ul.appendChild(frag);// 只触发一次重排监听用户行为：事件绑定的正确姿势——别再用 οnclick=“fun()” 了
<!-- 远古写法，HTML 与逻辑耦合，差评 --><buttononclick="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(leti=0;i<100;i++){boxes[i].style.width=boxes[i].offsetWidth+10+'px';}// 好：先读光、再写光constwidths=[];for(leti=0;i<100;i++)widths.push(boxes[i].offsetWidth);for(leti=0;i<100;i++)boxes[i].style.width=widths[i]+10+'px';用requestAnimationFrame做动画：
functionslideLeft(el,distance){letstart=null;functionstep(timestamp){if(!start)start=timestamp;constprogress=timestamp-start;constleft=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>constdiv=document.querySelector('#user');console.log(div.dataset.age);// '18'closest—— 向上找祖先
e.target.closest('li');// 从点击的 span 找到包裹的 limatches—— 检查选择器
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
constac=newAbortController();btn.addEventListener('click',handler,{signal:ac.signal});// 路由离开时ac.abort();// 一键移除玩转现代 API：MutationObserver 与 IntersectionObserver——给城市装上监控
MutationObserver —— 监听“拆迁”
constmo=newMutationObserver(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});functionfocusInput(muts){muts.forEach(m=>{m.addedNodes.forEach(n=>{if(n.nodeName==='INPUT')n.focus();});});}IntersectionObserver —— 懒加载神器
constio=newIntersectionObserver(entries=>{entries.forEach(en=>{if(en.isIntersecting){constimg=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等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！