本文干货部分翻译自：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相同。undefinedundefined大哥jQuery可以简化为：$('body').append('Homepage')但是，伙计们，原生JavaScript也可以做到现在这有效：document.body.insertAdjacentHTML('beforeend','Home')此方法允许您将任何有效的HTML字符串插入到四个由该方法的第一个参数指定的DOM元素的位置是：'beforebegin'：在元素之前'afterbegin'：在元素内部，在第一个现有子元素之前'beforeend'：在元素内部，在最后存在的子元素“afterend”：

很舒服。更舒服的是，它还有两个好兄弟，可以让开发者快速插入HTML元素和字符串：//插入HTML元素document.body.insertAdjacentElement('beforeend',document.createElement('a'))//插入文本文档.body.insertAdjacentText('afterbegin','cool!')移动DOM元素上面提到的兄弟方法insertAdjacentElement也可以用来移动已有的元素，换句话说：当传入这个方法的时候文档中已经存在一个元素，元素只是简单地移动（而不是复制和移动）。如果你有下面的HTML：

Title