DOM增删改查基本操作
基本概念
DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。DOM有自己的国际标准，目前的通用版本是DOM 3，下一代版本DOM 4正在拟定中。
严格地说，DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。本章介绍的就是JavaScript对DOM标准的实现和用法。
基本操作
DOM的基本操作和其他工作一样：增删改查。下面我会总结一下简单的操作。
1、获取
API获取元素
-
Document.getElementById(String id)
因为已申明通过Id获得元素，所以参数 String id 不能再加#
-
Document.getElementsByClassName(String className）
获得该className的集合，是类似数组的对象
Document.getElementsByTagName(String tagName)
获得该tagName的集合，是类似数组的对象
-
Document.querySelector(String selector)
参数String selector 是选择器，class需要加 . id需要加 #
-
Document.querySelectorAll(String selector)
获得使用该选择器的集合，是类似数组的对象
利用节点获取元素
基本概念：
- 父节点关系（parentNode）：直接的那个上级节点
- 子节点关系（childNodes）：直接的下级节点
- 同级节点关系（sibling）：拥有同一个父节点的节点
-
Node.nextSibling
返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null
-
Node.previousSibling
返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null
-
Node.parentNode
返回当前节点的父节点
//从父节点移除指定节点 if (node.parentNode) { node.parentNode.removeChild(node) } -
parentElement
返回当前节点的父Element节点
//指定节点的父Element节点的CSS属性 if (node.parentElement) { node.parentElement.style.color = "red" } -
childNodes
返回一个NodeList集合，成员包括当前节点的所有子节点
NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中
var ulElementChildNodes = document.querySelector('ul').childNodes;firstChild
返回指定节点的第一个子节点，如果该节点没有子节点，则返回 null
lastChild
返回指定节点的最后一个子节点，如果没有子节点，则返回 null
2、增加
-
appendChild()
*接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点
-
insertBefore()
*将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点
-
createElement()、createAttribute()、createTextNode()
*创建元素、属性、文本 节点
-
before()
*在当前节点的前面，插入一个同级节点
-
after()
*在当前节点的后面，插入一个同级节点
-
Node.cloneNode()
*用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是
false，即不克隆子节点。
3、删除
-
Node.removeChild()
*接受一个子节点作为参数，用于从当前节点移除该子节点。它返回被移除的子节点。
-
remove()
*用于移除当前节点
el.remove()
4、修改
-
Node.replaceChild()
*将一个新的节点，替换当前节点的某一个子节点。它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。
-
replaceWith()
*使用参数指定的节点，替换当前节点。如果参数是节点对象，替换当前节点的就是该节点对象；如果参数是文本，替换当前节点的就是参数对应的文本节点。
总结
汇总了一些使用DOM操作的基本方法。参考摘录至 阮一峰的JavaScript标准参考教程。
