节点选择
//html
<button class="btn" id="bool">点击</button>
<button class="btn" name="aa" >点击</button>
//js
console.log('querySelector',document.querySelector('.btn')); //获取的是单个dom
console.log('querySelectorAll', document.querySelectorAll('.btn')); //获取的是dom的数组
console.log('getElementById', document.getElementById('bool'));//获取id为bool的dom（id是唯一的）
console.log('getElementsByTagName',document.getElementsByTagName('button'));//根据dom的标签名,返回dom的数组
console.log('getElementsByName', document.getElementsByName('aa')); //根据元素的name获取nodeList数组
console.log('getElementsByClassName', document.getElementsByClassName('btn')); //根据元素的class类名获取nodeList数组
// }
创建节点
1. document.createElement(tagname)
创建一个由tagName决定的HTML元素
2. document.createTextNode(data)
创建一个文本节点，文本内容为data
3.document.createDocumentFragment()
创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但并不是主DOM树的一部分。一般利用文档片段创建一个临时节点，将需要添加到DOM树中的节点先添加到文档片段中，再将文档片段添加到DOM树中，这个时候文档片段中的子元素会替换文档片段。
由于文档片段是存在于内存中的，所以将子元素添加到文档片段中不会引起 reflow(回流) 。能够起到性能优化的效果。
通过节点关系获取节点
1. Node.parentNode
返回指定节点在DOM树中的
父节点。
2. Node.parentElement
返回指定节点在DOM树中的
父元素节点，如果没有父元素或者父元素不是一个元素节点，则返回null。
3. Node.childNodes
返回指定节点的所有子元素的集合。包括
文本节点等。
4. Node.children
返回指定节点的所有子元素的集合。只包含
元素节点。
5. Node.nextSibling
返回指定节点的下一个兄弟节点。包括
文本节点等。
6.Node.nextElementSibling
返回指定节点的下一个
兄弟元素节点
7. Node.previousSibling
返回指定节点的上一个兄弟节点。包括
文本节点等。
8.Node.previousElementSibling
返回指定节点的上一个兄弟
元素节点。
9.Node.firstChild
返回指定节点的第一个子节点。包括
文本节点等。
10. Node.firstElementChild
返回指定节点的第一个子元素节点。
11. Node.lastChild
返回指定节点的
最后一个子节点。包括文本节点等。
12. Node.lastElementChild
返回指定节点的最后一个
子元素节点。
节点操作
1. Node.appendChild()
将一个节点添加到指定节点的子节点列表的末尾。
var child = node.appendChild(child)
// node 要插入子节点的父节点
// child 既是参数又是返回值
2. Node.removeChild()
将一个节点从DOM树中移除。移除后还存在于内存中，还可以继续添加到DOM树中。
var oldChild = node.removeChild(child);
// node child的父节点
// child 要移除的子节点
// oldChild 保存对移除子节点child的引用。可以继续将其添加到DOM树中
3. Node.insertBefore()
在当前节点的某个子节点之前再插入一个子节点。
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
// 如果referenceElement为空，则插入到parentElement的子节点末尾。
// insertedElement 插入的子节点，即newElement
// parentElement 新插入节点的父节点
// newElement 新插入的节点
// referenceElement 在该节点之前插入newElement。可以通过将referenceElement改为referenceElement.nextElementSibling方式让newElement插入到referenceElement之后。实现类似insertAfter方法
4. Node.replaceChild()
用指定节点替换当前节点的一个子节点，返回被替换掉的节点。
var replacedChild = parentNode.replaceChild(newChild, oldChild);
// newChild 会替换掉 oldChild。如果newChild已经存在于DOM树中，则会从DOM树中删除
// oldChild 被替换掉的节点。
// replacedChild 等于 oldChild
属性操作
1. element.setAttribute(name /*属性名*/, value /*属性值*/)
给元素设置属性。如果该属性已存在，则更新。
2. element.removeAttribute(attrName /*要删除的属性名*/)
删除元素的某个属性。
3. element.getAttribute(attrName)
获取元素上属性名为attrName属性的值。如果该属性名不存在则放回
null或者空字符串。
4. element.hasAttribute(attrName)
检测该元素上是否有该属性。返回值为
true or false。
