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.查询包含及其他