dom进阶操作

1.查询dom元素document.querySelector与document.querySelectorAll

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

将之前的各种getElementByxxxxxx整合到了一起，如果只取第一个元素就使用前者，如果取数组则用后者

这里要注意后者取出来的是个类数组，想将其转化为数组，可以使用拓展运算符（...)或是Array.form()

上述的操作有点冗长，我们可以仿照jquery来简写

const $=document.querySelector.bind(document);
$("#element")

2.添加dom元素

.insertAdjacentHTML('beforeend','<p>aaa</p>')//添加html
.insertAdjacentText('beforeend','aaa')//添加文本
.insertAdjacentElement('beforeend',document.createElement('a'))//添加元素

• 'beforebegin': 元素之前
• 'afterbegin': 元素内，第一个子元素之前
• 'beforeend': 元素内，最后一个子元素之后
• 'afterend': 元素之后

3.替换dom元素

oldElement.replaceWith(newElement);//替换
document.querySelector('#oldElement').remove();//移除

4.查询包含及其他

https://juejin.im/post/5dd8a913e51d45232856f7e8