1. querySelector()
返回第一个满足给定CSS选择器的元素，如果没有符合元素则返回空（null）。
const el = document.querySelector(selector);
selector：CSS选择器，例如：#fooId,.fooClassName,.class1.class2,.class1, .class2el：第一个满足条件的元素或null
2. querySelectorAll()
返回满足选择器的所有元素，如果没有任何元素匹配则返回空对象（[]）
const els = document.querySelectorAll(selector);
selector：CSS选择器els：所有满足条件的元素列表或空对象
3. addEventListener()
有三种添加事件监听器的方法，例如foo是一个监听函数：
<button onclick="foo">Alert</button>
function foo() { alert('hello'); }
const btn = document.querySelector('button');
btn.onclick=foo; // 方法1
const btn = document.querySelector('button');
btn.addEventListener('click', foo); // 方法2
addEventListener()方法更好，因为可以允许添加多个监听器，还能有参数：
el.addEventListener(evt, listener, [options]);
-
el：被监听的元素 -
evt：监听事件名称 -
listener：监听函数 -
options：可选配置对象，如下所示：-
capture：阻止事件冒泡, 即外层元素的监听器不会捕获相同类型的事件，有两种语法可以使用：el.addEventListener(evt, listener, true) // 默认false el.addEventListener(evt, listener, {capture:true}); -
once：只监听一次，然后就取消监听。 -
passive：监听对象不可以使用preventDefault()方法，如果使用了会报错：Unable to preventDefault inside passive event listener invocation.
-
同一个元素注册了多个相同的监听器，那么重复的监听器会被抛弃。但是如果options参数不一样，则不会被抛弃。
4. removeEventListener()
取消通过addEventListener()方法添加的监听器：
el.removeEventListener(evt, listener, [options]);
和addEventListener()语法一样，不过options参数把once字段排除在外，如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除。两者不会互相干扰。
btn.removeEventListener('click',foo);
5. createElement()
根据标签名创建HTML元素，例如：'p' 和 'div'，然后可以通过 appendChild() 等方法添加到页面上。
document.createElement(tagName)
const p = document.createElement('p')
tagName：HTML标签名.
6. createTextNode()
创建文本节点：
const textNode = document.createTextNode(text);
textNode是一个文本节点。text是一个字符串，包含了要放入文本节点的内容。
7. appendChild()
添加一个元素到给定元素作为其最后一个子节点，被添加的元素可以是新创建的元素，也可以是已存在的元素，如果是已存在的元素，那么就会从原来的位置删除。
el.appendChild(child)
el：父元素child：子元素
const div = document.querySelector('div');
const strong = document.createElement('strong');
strong.textContent = 'Hello';
div.appendChild(strong);
8. removeChild()
删除指定子元素。
el.removeChild(child)
el：父元素child：子元素
div.removeChild(strong);
9. replaceChild()
从父元素中替换原来的子元素。
el.replaceChild(newChild, oldChile)
el：父元素.newChild：新子元素.oldChild：旧子元素.
<div>
<strong>hello</strong>
</div>
const em = document.createElement('em');
const strong = document.querySelector('strong');
const div = document.querySelector('div');
em.textContent = 'hi';
div.replaceChild(em, strong);
10. cloneNode()
克隆元素。
const dupEl = el.cloneNode([deep])
dupEl克隆出来的元素el：被克隆的元素.deep可选参数，是否深度克隆，如果true则克隆所有子元素，否则只克隆元素自己。
<div>
<strong>hello</strong>
</div>
const strong = document.querySelector('strong');
const copy = strong.cloneNode(true);
const div = document.querySelector('div');
div.appendChild(copy);
11. insertBefore()
insertBefore方法将新元素插入到某个参考子元素的前面。如果这个参考子元素不存在，就把新元素作为最后一个子元素插入，效果和appendChild()一样。
el.insertBefore(newEl, refEl);
el：父元素newEl：被插入的新元素refEl：参考元素
<div>
<strong>hello</strong>
</div>
const em = document.createElement('em');
const strong = document.querySelector('strong');
const div = document.querySelector('div');
em.textContent = 'hi';
div.insertBefore(em, strong);
12. getComputedStyle()
用于获取指定HTML元素上的样式，该方法返回值是只读的。
const style = getComputedStyle(el, [pseudoEl])
style：CSSStyleDeclaration 对象，包含指定元素的所有CSS属性。el：指定元素cpseudoEl：表示为元素，例如:after，可选。
const style = getComputedStyle(document.querySelector('div'));
alert(style.width);
13. setAttribute()
用于为指定元素创建一个新属性或覆盖旧属性的值。
el.setAttribute(name, value);
el：指定元素name：属性名value：属性值
const div = document.querySelector('div');
div.setAttribute('contenteditable', '')
14. getAttribute()
获取指定元素的某个属性值。
el.getAttribute(name);
el：指定元素name：属性名
const div = document.querySelector('div');
alert(div.getAttribute('contenteditable'))
15. removeAttribute()
删除指定元素的某个属性。
el.removeAttribute(name);
el：指定元素name：属性名
const div = document.querySelector('div');
div.removeAttribute('contenteditable');
