标题里这串知识点是JS基础课程第14天最核心的D部分。我当时学到这里的时候正好卡在“能看懂语法但做不出一个能交互的页面”这个阶段。后来发现一个很关键的原因纯语法是死的只有让代码真正拿到页面上的元素才能谈操作、谈反馈。这篇内容就围绕标题里这几件事展开DOM查询怎么把元素找出来、子节点怎么拿、全选和反选的联动逻辑、动态增删表格记录的方法以及Window对象自带的那组通用方法。不管你是刚学到这里的入门读者还是已经写过几个页面但被childNodes、事件委托这些细节绊住的人这篇文章都能给你一个能直接落地的参考。1. DOM查询方法梳理获取元素节点与子节点DOM操作的第一步永远是“先把元素捞出来”。这一步看似简单但里面有不少细节会影响你后面所有的代码。很多初学者经常遇到“拿不到节点”“拿到的是undefined”“循环遍历没效果”的问题十有八九是查询方式选错了或者对查询结果的数据类型理解不到位。1.1 传统查询API与现代querySelector两套方案怎么选最传统的几个方法不能不用但也不能乱用。getElementById是用来拿单个元素的返回的要么是元素对象要么是null没有数组那一说所以写代码时经常要先判空。而getElementsByTagName、getElementsByClassName、getElementsByName这几个返回的都是“类数组”集合也就是说它长得像数组但并不是真正的数组不能直接用map、filter这些方法只能靠for循环或者先转成数组再来处理。关于这几个方法有一个特别容易踩的坑getElementsByTagName和getElementsByClassName返回的是HTMLCollection这种集合是“动态的”。什么意思我举个例子你先用getElementsByTagName(li)拿到一个列表集合再往页面里动态插入一个新li刚才那个集合的length会自动 1不需要你重新查询。这听起来很贴心但也意味着你在循环遍历的同时增删元素很容易导致索引错乱。var items document.querySelectorAll(.item); // NodeList 遍历没问题 for (var i 0; i items.length; i) { items[i].style.color red; }而querySelectorAll返回的是NodeList大多数浏览器里是“静态快照”。查询那一刻页面是什么样这个集合就是什么样后面你再往页面里加节点它也不管。用一个生活化的比喻HTMLCollection 像一份实时更新的员工名单有人入职会自动加上去NodeList 更像一张照片拍完之后人再多也不会变了。我个人的建议是新写的代码优先用querySelector和querySelectorAll因为它们支持完整的CSS选择器#id、.class、ul li、input[typecheckbox]都能写语义清晰。但老项目里如果大量用了getElementsByTagName你要清楚它是动态集合写遍历时别不小心死循环了。1.2 获取子节点childNodes 和 children 差别很大标题里专门提到“获取元素节点的子节点”这里我要重点讲清楚。拿到父元素之后想访问它的直接子节点有两个属性可以用childNodes和children。名字很像但内涵完全不同。childNodes返回所有子节点包括文本节点、注释节点等非元素节点。children只返回元素节点也就是HTML标签。这个区别直接影响你的遍历结果。看下面这段HTMLul idlist li第一项/li li第二项/li /ul如果你用childNodes.length结果不是2而是5。因为在ul的开始标签和第一个li之间有换行和空格这些“文本节点”也被算进去了。同理两个li之间、最后一个li和/ul之间也有文本节点。很多初学者在这里直接懵掉明明只有两个li怎么length却是5var ul document.getElementById(list); console.log(childNodes:, ul.childNodes.length); // 5包含文本节点 console.log(children:, ul.children.length); // 2只有元素节点所以我平时写代码如果只是想拿标签子元素一律用children。如果特殊情况确实要用childNodes记得遍历时通过nodeType过滤。nodeType 1表示元素节点nodeType 3表示文本节点这是DOM标准里的分类方法面试也常问。另外还有firstChild和lastChild它们同样会把文本节点算进去所以你可能在页面里看到ul.firstChild.nodeName返回的是#text而不是LI。想拿第一个或最后一个元素子节点更稳的是firstElementChild和lastElementChild。这几个属性能不能用对直接决定了你有没有犯“拿错节点”的低级错误。1.3 沿着DOM树移动父节点、兄弟节点的获取拿到当前节点之后有时候还要往上找父节点或者往旁边找兄弟节点。这块的属性也要记清楚。parentNode当前节点的父节点注意它是只读的想改父子关系不能靠赋值得用后面的appendChild等操作。parentElement和parentNode类似但parentNode可能是文本节点、文档节点而parentElement只会返回元素节点多数场景两者等价。previousElementSibling/nextElementSibling前一个/后一个兄弟元素节点。previousSibling/nextSibling同样会把文本节点算进去所以实战中我更喜欢带Element的那一组。比如在表格里点击删除按钮需要拿到当前行tr最经典的一行代码就是var tr e.target.parentNode.parentNode;这个写法正是从删除按钮往上走两步先到td再到tr。虽然看起来有点暴力但在结构简单、层级明确的表格里很常用不用加一堆class去标记。后面讲到动态表格删除时我会再展开说。2. 全选练习复选框联动的常见实现全选、全不选、反选这三个功能几乎每个后台管理系统里都会出现也是很多JS培训教材里的经典练习。别看它简单它能把“遍历集合”“操作属性”“事件绑定”这几个基础动作串起来值得认真写一遍。2.1 先搭一个标准场景假设页面上有一个“全选”复选框后面跟着一组子复选框还有三个按钮全选、全不选、反选。核心逻辑其实都一样拿到所有子复选框的集合然后统一设置它们的checked属性。labelinput typecheckbox idcheckAll 全选/label hr div iditemWrap labelinput typecheckbox classitem 选项A/label labelinput typecheckbox classitem 选项B/label labelinput typecheckbox classitem 选项C/label /div button idbtnAll全选/button button idbtnNone全不选/button button idbtnReverse反选/button这里注意一个点子复选框我用classitem而不是给每个都设置name或其他属性因为class可以用querySelectorAll(.item)一次性全部拿到方便多了。实际项目中也可以用name属性去匹配都是一样的思路。2.2 全选、全不选、反选的写法差异全选和全不选的代码结构几乎一样区别只是把checked设为true还是false。有人会写成items[i].checked checked这是错误写法。checked是一个布尔属性property赋值应该用布尔值字符串checked会被自动转成布尔值虽然结果上可能恰好成立但非常容易被其他地方的判断逻辑坑到。正确的写法是document.getElementById(btnAll).onclick function() { var items document.querySelectorAll(.item); for (var i 0; i items.length; i) { items[i].checked true; } }; document.getElementById(btnNone).onclick function() { var items document.querySelectorAll(.item); for (var i 0; i items.length; i) { items[i].checked false; } };反选稍微多一步其实就是遍历时把checked取反。有两种写法一种是用if判断一种是用!取反。我推荐用取反因为代码少而且语义更准确document.getElementById(btnReverse).onclick function() { var items document.querySelectorAll(.item); for (var i 0; i items.length; i) { items[i].checked !items[i].checked; } };这里要注意如果同时有“全选框”和一个“全选按钮”反选之后全选框的状态也要跟着变需要重新计算。否则会出现一种状态错乱所有子项都选中了但全选框还是没勾。2.3 子项与全选按钮的状态联动这个联动是练习里最容易忽略的部分。实现逻辑是每次子复选框状态变化时统计已选中的数量如果等于总数就自动把全选框选上只要有一个没选就把全选框取消。反过来当用户点击全选框时把所有子项状态设成跟它一致。子项的状态监听用change事件。注意是change不是click因为change在复选框状态变化时触发更符合语义而且在无障碍操作时也更可靠。var checkAll document.getElementById(checkAll); var items document.querySelectorAll(.item); checkAll.onchange function() { for (var i 0; i items.length; i) { items[i].checked checkAll.checked; } }; for (var i 0; i items.length; i) { items[i].onchange function() { var checkedCount 0; for (var j 0; j items.length; j) { if (items[j].checked) checkedCount; } checkAll.checked (checkedCount items.length); }; }这个练习虽然简单但它是后面很多复杂表格操作的雏形。学会了动态统计选中数量、状态同步、事件监听后面做批量删除、批量移动逻辑上都是同一套思路。3. DOM增删改createElement、appendChild、removeChild 逐个说清楚光会查询还不行页面上的数据经常需要动态增删。这部分标题写得很直接DOM增删改。对应到API就是createElement、appendChild、insertBefore、removeChild、replaceChild这一组方法。我把它们拆开讲顺便对比一下innerHTML的写法。3.1 创建元素节点createElement 和 innerHTML 怎么选创建新元素的经典姿势是先createElement创建一个空标签再往里面填充内容最后插入到页面。这里要区分的是你要插入的内容里有没有 HTML 标签。如果是纯文本用textContent给新建的节点赋值是最安全的不会把字符串当HTML解析。如果你是拼标签比如要创建一行带链接的文字可以用innerHTML但必须非常小心。var div document.createElement(div); div.textContent 这是纯文本即使有 b 也会被转义; var ul document.createElement(ul); ul.innerHTML li第一项/lili第二项/li;不要小看textContent和innerHTML的区别。在实际开发中如果你把用户输入的内容拼进innerHTML等于给了用户一个往你的页面里注入脚本的机会轻则页面崩掉重则造成XSS漏洞。所以现在很多框架都默认用textContent或类似的安全方式渲染用户输入。这个习惯在原生JS阶段就要养成。还有一个细节createElement创建出的节点只是“在内存里”还没有显示到页面上。必须要经过appendChild、insertBefore之类的方法插入到DOM树中用户才能真正看到它。初学者容易只创建不插入然后对着空白页面发愣。3.2 插入节点appendChild 在尾部insertBefore 可以指定位置appendChild是把新节点追加到父节点的子节点列表末尾是最常用的插入方式。但如果你要插到某个位置比如“最前面”就得用insertBefore。insertBefore的语法是parent.insertBefore(newNode, referenceNode)意思是把newNode插到referenceNode前面。如果参考节点是null效果等同于appendChild。有时候我会看到有人写parent.insertBefore(newNode, null)这个可以但不必要直接用appendChild更直观。使用insertBefore时有一点要留意referenceNode必须是调用者的直接子节点不能拿一个跨层级的节点来当参考否则会报错或者插入到奇怪的地方。var ul document.getElementById(list); var li document.createElement(li); li.textContent 新插入的最前面一项; ul.insertBefore(li, ul.firstElementChild);这段代码就是在ul的第一个子元素前面插入一个新的li也就是把新项顶到了列表头部。这种“头部插入”在消息列表、日志列表里很常见。3.3 删除、替换与克隆节点删除节点的方法只有removeChild它由父节点调用传入要删除的子节点。删除之后这个节点会变成“游离状态”它还在内存里但不在DOM树中如果后续没有任何引用最终会被垃圾回收机制清理掉。var li document.querySelector(#list li); var ul document.getElementById(list); ul.removeChild(li);替换节点用replaceChild参数是两个新节点、被替换的旧节点。同样由父节点调用。这个API使用频率不算高但做表格编辑时偶尔会用到比如把整行内容替换成新的结构。克隆节点用cloneNode传true表示深克隆也就是连子节点一起复制不传或者传false只克隆当前节点本身。这里有个坑克隆出的节点不会带上原节点绑定的事件监听器所以如果你克隆了一个带onclick的按钮新按钮点上去没有任何反应还要重新绑定一遍。3.4 修改已有节点textContent、innerHTML、classList修改节点内容最容易混的就是textContent、innerText、innerHTML三者。简单说textContent只处理文本把标签当字符串速度快安全。innerText也拿文本但它会考虑CSS渲染比如display:none隐藏的文字它取不到而且它的读取会触发重排性能稍差。innerHTML可以设置HTML字符串解析并生成子元素灵活但有安全和性能问题。修改节点的属性和样式老式写法是直接el.className newClass但现代标准里推荐用classList。它有add、remove、toggle、contains等方法可以非常方便地维护多个类名而不会因为整体赋值把其他类名搞丢。var btn document.getElementById(btn); btn.classList.add(active); btn.classList.remove(active); btn.classList.toggle(active);然后注意checked属性的操作逻辑我在全选练习里已经强调过状态类属性直接用.checked、.value这些property去读写而不是一遇到属性就想着setAttribute。4. DOM添加删除记录做一个完整的动态表格管理光会单个节点的增删改还不够实际项目里最常遇到的场景是管理后台的“记录列表”比如商品列表、成员列表、任务列表用户填写一行数据点添加就动态插到表格里点删除就移除点编辑还能改。标题里“DOM添加删除记录”就是这个。我按一个小项目来做把一个动态表格的添加、删除、编辑流程讲透。4.1 需求分析与表格结构设计假设我们要做一个内部工具用的“成员记录管理”页面。输入姓名和手机号点“添加”按钮下面表格的tbody里就多出一行。每一行右边有“删除”“编辑”两个按钮。table thead trtd姓名/tdtd手机/tdtd操作/td/tr /thead tbody idrecordBody/tbody /table input typetext idnameInput placeholder姓名 input typetext idphoneInput placeholder手机号 button idaddBtn添加/button这里有个关键点tbody是空的所有记录行都是动态生成。我不知道最终会添加多少行所以不能用静态HTML。动态生成记录行就必须在添加函数里完整地创建tr和若干个td。4.2 添加记录的完整实现添加记录的函数核心工作分三步读输入框的值、创建tr、把tr插入tbody。为了结构清晰我单独封装了一个函数来做“创建一行”。document.getElementById(addBtn).onclick function() { var name document.getElementById(nameInput).value.trim(); var phone document.getElementById(phoneInput).value.trim(); if (!name || !phone) { alert(姓名和手机号都不能为空); return; } var tr document.createElement(tr); var tdName document.createElement(td); tdName.textContent name; var tdPhone document.createElement(td); tdPhone.textContent phone; var tdOperate document.createElement(td); tdOperate.innerHTML button classedit编辑/button button classdel删除/button; tr.appendChild(tdName); tr.appendChild(tdPhone); tr.appendChild(tdOperate); document.getElementById(recordBody).appendChild(tr); };注意两个容易漏掉的地方。第一输入值要.trim()把首尾空格去掉否则用户偶然输了个空格也能通过非空判断。第二操作按钮的innerHTML我这里故意用了因为里面是固定的结构字符串不涉及用户输入是安全的。但如果你要往按钮里拼用户输入的内容就不能这么干。4.3 删除记录与事件委托现在进入标题里最有代表性的部分删除动态添加的记录。最容易想到的做法是在创建tr的代码里给每个删除按钮绑定onclick然后button.parentNode.parentNode拿tr删除。这样做可以工作但有个问题每一行都要绑定一次事件如果表格有几千行就绑定了几千个监听器浪费内存。更好的方案叫事件委托把事件监听器绑定在tbody上利用事件冒泡机制让每一行新产生的点击事件都通过tbody这个公共父元素来处理。不管之后添加多少行我只需要绑定这一次性能更好逻辑也更简洁。var tbody document.getElementById(recordBody); tbody.onclick function(e) { var target e.target; if (target.className del) { var tr target.parentNode.parentNode; tbody.removeChild(tr); } };e.target是事件源也就是用户真正点击的那个元素。如果点的是“删除”按钮它的className就是del于是往上找两级的tr并移除。之所以要用className而不是tagName BUTTON做判断是因为一个表格里可能还有其他操作按钮用className才能精准区分功能。4.4 编辑记录时要处理好“当前编辑行”的状态编辑比添加和删除复杂一点因为涉及“先填入旧数据再保存新数据”两段操作。思路是点击“编辑”按钮时把这一行的姓名和手机号取出来分别填进输入框同时把按钮文字改成“保存”并记录当前正在编辑的行。var editingRow null; tbody.onclick function(e) { var target e.target; if (target.className del) { var tr target.parentNode.parentNode; tbody.removeChild(tr); } else if (target.className edit) { var tr target.parentNode.parentNode; document.getElementById(nameInput).value tr.children[0].textContent; document.getElementById(phoneInput).value tr.children[1].textContent; editingRow tr; document.getElementById(addBtn).textContent 保存修改; } }; document.getElementById(addBtn).onclick function() { var name document.getElementById(nameInput).value.trim(); var phone document.getElementById(phoneInput).value.trim(); if (!name || !phone) { alert(姓名和手机号都不能为空); return; } if (editingRow) { editingRow.children[0].textContent name; editingRow.children[1].textContent phone; editingRow null; document.getElementById(addBtn).textContent 添加; } else { // 创建新行的逻辑和4.2一样 } };这里有一处需要注意用children[0]、children[1]去取表格行的列依赖行的结构是固定的第一列姓名、第二列手机。如果表格结构以后调整了顺序代码就要跟着改。更稳的做法是先给每个tr加一个自定义属性如>var isOk confirm(确定要删除这条记录吗); if (isOk) { // 执行删除 } var nickname prompt(请输入你的昵称, 默认昵称); if (nickname ! null) { console.log(用户输入 nickname); }这类方法在调试阶段很好用但正式项目里不建议滥用因为它们长得丑而且阻塞页面会打断用户的操作流。很多时候更好的替代方案是页面内自己做的Modal弹窗但那是另一套逻辑了。5.2 定时器setTimeout 与 setInterval 的正确使用习惯Window对象上还有两个特别重要的定时方法setTimeout和setInterval。前者是“等一段时间后执行一次”后者是“每隔一段时间执行一次”。它们都返回一个整数型的定时器ID用于之后取消。var timer1 setTimeout(function() { console.log(2秒后执行一次); }, 2000); var timer2 setInterval(function() { console.log(每隔1秒执行一次); }, 1000); // 取消定时器 clearTimeout(timer1); clearInterval(timer2);定时器里的this默认指向window这一点在实际开发中经常被忽略。比如在对象方法里调用setTimeout方法内部的this在定时器执行时就变了再访问对象属性就会出现undefined。解决办法是提前存一个var self this或者使用箭头函数又或者用.bind(this)。还有一个需要养成的习惯使用了setInterval一定要在合适的时机clearInterval。很多“页面卡死”“CPU占用高”的问题罪魁祸首就是某个定时器没被清掉。特别是在SPA路由切换、组件卸载的时候定时器依然在跑就会在后台无限循环。5.3 页面跳转与历史管理location、historyWindow对象下的location和history提供了控制浏览器导航的方法。最常用的是location.href。给location.href赋一个新URL页面就会跳转过去。他与location.assign()基本一样但如果你用location.replace()新页面会替换掉当前记录用户按后退键不会回到原页面。// 跳转 location.href /detail.html?id123; // 刷新当前页面 location.reload(); // 后退一页 history.back(); // 前进一页 history.forward(); // 后退两页 history.go(-2);location.reload()在有些浏览器里会从缓存读取结果想强制从服务器重新加载可以传true但这个参数在新版标准里已经逐渐被废弃了。实际工作中我更常用的是带上时间戳参数去重新请求而不是依赖reload(true)。5.4 加载时机window.load 与 DOMContentLoaded 的区别这一小节标题里没有明说但它和Window对象的关联很紧密。当页面所有资源包括图片、样式、脚本等加载完成后会触发window.onload。而DOMContentLoaded是只要DOM结构解析完成就触发不需要等图片等外部资源。window.onload function() { // 所有资源加载完成后执行 }; document.addEventListener(DOMContentLoaded, function() { // DOM解析完成后即可执行 });这个区别直接影响你的脚本什么时候能安全操作页面元素。如果你的JS写在HTML开头想获取页面后方的某个元素直接写会拿到null因为那个元素还没解析出来。把逻辑包在DOMContentLoaded里是更高效也更可靠的选择。另外在当前主流的模块化写法里很多人已经用defer属性来让脚本延迟到DOM解析之后再执行。这也是一种常见的替代方案本质思想是一样的等DOM就绪再操作DOM。6. 从实践角度总结几条避坑经验这些知识点单个看都不难但组合在一起就是很多真实bug的源头。我根据自己的使用体会把最有共鸣的几条列在这里方便你日后回看第一拿到节点后先判断是不是null。getElementById、querySelector都可能返回null尤其在脚本放在body之前运行的时候。直接在null上调用.style、.addEventListener会直接抛错而且错误信息往往不好找。第二childNodes里的“幽灵文本节点”大概率会坑你一次。我在最开始也遇到过两次后来就养成了习惯只看元素节点就用children只有需要处理文本时才用childNodes并配合nodeType过滤。第三动态添加的节点没有事件。给页面加载时已存在的老按钮绑定了事件再添加一个新按钮新按钮是不会自动继承事件的。这种情况要么每次创建节点后重新绑定要么像记录管理那块一样用事件委托。推荐用事件委托因为绑定一次所有现在和未来的子节点都自动生效这也是很多人做大的列表时最推荐的方案。第四操作完动态节点后别忘了把不需要的引用置空。虽然现代浏览器的垃圾回收已经很智能但如果你在一个数组里保存了大量删除过的节点对象它们依然会带留在内存中时间一长页面就会越来越卡。最后再分享一个小心得DOM操作本身不复杂复杂的是“什么时候操作、在哪里操作、操作完会怎么影响其他状态”。你写代码的时候多问自己几句“这个节点是动态的吗”“这个集合是实时更新的吗”“这个按钮的事件会不会重复绑定”——把这三个问题想清楚DOM相关的坑基本就能绕过去。如果以后遇到更复杂的场景比如列表组件化、虚拟列表、模板字符串渲染本质上也还是在解决这些底层问题。