JS原生DOM操作

将原生 DOM 操作按照类别分为以下五组：

document 对象的方法：

1. 查找
   Element getElementById(string id)
   Array<Element> getElementsByClassName(string className)
   Array<Element> getElementsByTagName(string tagName)
   Array<Node> getElementsByName(string name)
   Node querySelector(string selector)
   Array<Node> querySelectorAll(string selector)
   Array<Element> forms()
2. 创建
   Element createElement(string tagName)
   Node createTextNode(string text)
   Node cloneNode(bool isCopyChilds)
   Array<Element> createDocumentFragment()

node 对象的方法：
对于添加、删除方法不管是新增还是替换节点，如果其原本就在页面上，那么原来位置的节点将被移除

3. 添加
   parentNode.appendChild(childNode)
   parentNode.insertBefore(newNode, refNode)

4. 删除
   parentNode.removeChild(childNode)
   parentNode.replaceChild(newNode, oldNode)

5. 关系
   Node node.parentNode()
   Element node.parentElement()
   Array<Element> node.children()
   Array<Node> node.childNodes()
   Node node.firstChild()
   Node node.lastChild()
   Element node.firstElementChild()
   Element node.lastElementChild()
   Node node.previousSibling()
   Node node.nextSibling()
   Element node.previousElementSibling()
   Element node.nextElementSibling()