本文干货部分翻译自：UsetheDOMlikeaPro译者：kyrieliu（刘凯丽）《前端框架香到不敢撕DOM裸手！”虽然大多数前端er都有这样的烦恼，但是本着基础的原则，手撕DOM应该是前端攻城狮的必备技能。这就是本文的初衷——DOM并没有那么难处理，如果你能充分利用它，那么你离爱上它就不远了。三年前刚入前端坑的时候，发现了一个叫jQuery的宝贝。她有一个神奇的$函数，可以让我快速选中某个DOM元素或者一组DOM元素，并提供链式调用减少代码冗余。保持。虽然现在提到jQuery这个词，但你会觉得老土，“都9102年了，你还跟我说诺基亚？”。骨灰归灰，却也真香。尽管近年来Vue和React的崛起加剧了jQuery的衰落，但全球仍有超过6600万个网站在使用jQuery，占全球所有网站的74%。jQuery也给业界留下了影响深远的“遗产”。W3C在$函数之后实现了querySelector和querySelectorAll。具有讽刺意味的是，正是这两个原生方法的出现大大加速了jQuery的衰落，因为它们取代了前者最常用的功能——快速选择DOM元素。这两个新方法虽然写起来有点长（问题不大，封装一下即可），但确实很好用。来吧，走吧！获取DOM元素获取单个元素将任何有效的css选择器传递给document.querySelector以选择单个DOM元素：document.querySelector('.element')document.querySelector('#element')document.querySelector('div')document.querySelector('[name="username"]')document.querySelector('div+p>span')如果页面上没有指定元素，返回null获取元素集合使用document.querySelectorAll获取一个元素的集合，其参数与document.querySelector相同。它返回一个静态的NodeList，如果没有找到任何元素，则返回一个空的NodeList。NodeList是一个可遍历对象（又名：伪数组）。虽然它类似于数组，但它不是数组。虽然可以用forEach遍历，但是没有数组的一些方法，比如map，reduce，find。那么问题来了，如何将伪数组转化为数组呢？ES6为开发者提供了两种方便的选择：constarr=[...document.querySelectorAll('div')]//orconstalsoArr=Array.from(document.querySelectorAll('div'))在古代，开发读者经常使用getElementsByTagName和getElementsByClassName获取元素集合，但与querySelectorAll不同的是，它们获取的是一个动态的HTMLCollection，这意味着它的结果总是会随着DOM的变化而变化。元素的局部查找当需要查找元素时，不一定每次都根据文档查找。开发人员可以在任何HTMLElement上执行DOM元素的部分搜索：constcontainer=document.querySelector('#container')container.querySelector('#target')打字太多了！事实证明，每个优秀的开发人员都是懒惰的。为了减少小键盘的损失，我一般是这样：const$=document.querySelector.bind(document)来保护机械键盘，从我做起。小伙伴们，爬上这棵DOM树上面的主题是寻找DOM元素，这是一个自上而下的过程：从父元素到其包含的子元素进行查询。但是目前还没有一个API可以帮助开发者通过子元素向父元素发起查询。在我迷茫的时候，MDN给我提供了一个宝藏方法：closest。从元素本身开始，closest()方法遍历元素的父元素（朝向文档根），直到找到与提供的selectorString匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回null。也就是说，closest方法可以从特定的HTMLElement向上发起查询，找到与指定的css表达式匹配的第一个父元素（或元素本身）。如果找到文档的根节点但没有找到目标，则返回null。添加DOM元素如果使用原生JavaScript向DOM添加一个或多个元素，大多数开发人员会在心里抵制。为什么？假设给页面添加一个a标签：Title
