js原生dom操作有时候需要对dom进行一些操作，整理一下会用到的js原生方法。获取元素 querySelector和

jQuery也快要成为历史产物了，现在的前端项目一般不会再引入jquery，有时候需要对dom进行一些操作，整理一下会用到的js原生方法。

这两个方法是使用频率最高的获取元素的方法，参数为css选择器。第一个获取的是匹配到的第一个元素，第二个获取到匹配元素的NodeList节点列表，querySelectorsAll获取到的列表是静态的，后续添加的元素不包含在内。

这两个方法都可以背document和node元素引用

document.querySelector('div')

let app = document.querySelector('#app'); app.querySelectorsAll('div')

2.closet() 获取符合css选择器的最近父元素，包含自身

append() 节点尾部添加元素或者文本内容
prepend()节点开始添加元素或文本内容
before() 节点前面添加
after()节点后面添加
replaceWith() 替换节点

app.before(document.createElement('div')，‘aaa’)//在#app节点前添加一个div,和字符串aaa

参数可以是多个，实现同时添加多个内容。

如果参数是页面上已经存在的dom元素，可以实现移动标签位置。以下代码实现将app中的div标签移动至app前面。

let d = app.querySelector('div');
app.before(d);

insertAdjacentHTML,insertAdjacentElement,insertAdjacentText 分别操作在dom节点中插入html，元素，文本

以上三个方法具有两个参数，第一个参数是要插入的位置，第二个参数是要插入的内容。

第一个参数的取值：位置分为元素的begin和end，又细分为before和after，即元素前，元素内前面，元素内后面，元素后：beforebegin、afterbegin、beforeend、afterend。

第二个参数的取值分别为会渲染为标签的字符串，node节点，文本。