要进行DOM的增删改查的操作，首先要先搞懂：
什么是dom?
Document Object Model，即文档对象模型。DOM把一份文档表示为一棵树，这是理解DOM模型的关键。是由节点（node）构成的一棵节点树。那么问题又来了：
节点是什么？
DOM中有许多不同类型的节点。其中最重要的有三种：元素节点（element node），文本节点（text node）和属性节点（attribute node）。有了节点，我们就可以很方便地通过定位节点，快速的对节点进行增删改查的操作。
查：
以下是一些查找节点的方法：
getElementById()、getElementsByTagName()、getElementsByName()、getElementsByClassName()、
querySelector()、querySelectorAll()
getElementById()：
getElementById()方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该元素的 HTMLDivElement对象，如果不存在，则返回null。id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命名的id。当我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content"name="va" class="n1" style="color:blue">内容</div>
<p id="main" name="va" class="n2">正文</p>
<span id="foot" name="va" class="n1">结尾</span>
<script>
var tag = document.getElementsById("content").innerHTML
console.log(tag)
</script>
</body>
</html>
最后console.log((id.innerHTML)得到的结果是"内容"
getElementsByTagName():
getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。接上举例：
<script>
var tag = document.getElementsByTagName("p").length
console.log(tag)
</script>
最后document.getElementsByTagName("p").length返回了页面中总共有1个p。
getElementsByName():
getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。举例：
<script>
var tag = document.getElementsByName("va")[1].innerHTML
console.log(tag)
</script>
最后document.getElementsByName("va")[1].innerHTML返回了第二个name的值为va的元素的innerHTML:"正文"
getElementsByClassName():
getElementsByClassName()方法接受类名参数返回一个具有相同类名的元素的数组，返回一个对象数组HTMLCollection(NodeList)。举例：
<script>
var tag = document.getElementsByClassName("n1")[1].innerHTML
console.log(tag)
</script>
最后 document.getElementsByClassName("n1")[1].innerHTML返回了第二个class为n1的元素的innerHTML:"结尾"
getAttribute():
getAttribute()方法将获取元素中某个属性的值。举例：
<script>
var tag = document.getElementById("content").getAttribute("name")
console.log(tag)
</script>
最后document.getElementById("content").getAttribute("name")获得了id=content元素的name值："va"
querySelector():
querySelector()方法返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点)。举例：
<script>
var tag = document.querySelector(".n1").innerHTML
console.log(tag)
</script>
最后document.querySelector(".n1").innerHTML获得class=n1的第一个元素的innerHTML:"内容"
querySelectorAll():
querySelectorAll()方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList。
<script>
var tag = document.querySelectorAll(".n1")[1].innerHTML
console.log(tag)
</script>
最后document.querySelectorAll(".n1")[1].innerHTML返回所有符合class=n1的元素中，第二个元素的innerHTML:"结尾"
改：
修改HTML元素：
修改元素内容：
document.getElementById(id).innerHTML=new value，如修改id为content元素的文本内容，可以这样：
var text = document.getElementById('content').innerHTML="修改内容"
console.log(text)
</script>```
于是content的文本内容就会替换成```"修改内容"```
####修改元素属性：
document.getElementById(id).attribute=new value，如修改id为content的元素的name值：
<script>
var name = document.getElementById('content').name="new name"
console.log(name)
</script>
content的name值就会替换成```"new name"```
###修改元素CSS：
document.getElementById(id).style.property=new style，如修改id为content的元素的color值:
<script>
var name = document.getElementById('content').style.color="red"
</script>
content的文本内容会变成红色。
####setAttribute()方法：
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。
<script>
var content = document.getElementById('content')
content.setAttribute('style','color:red')
</script>
上面例子中id为content的元素文本会被修改成红色。
##增：
####添加元素节点
如需向HTML DOM添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<script>
var div = document.createElement('div')
var node=document.createTextNode("这是新内容。");
div.appendChild(node)
var content = document.getElementById('content')
content.appendChild(div)
</script>
#####添加元素节点的方法还有以下这些：
**A.append(B) **: 把B追加到A内部（所有的A元素，以下类似）
**A.appendTo(B)** : 把A追加到B内部
**A.prepend(B)** : 把B追加到A内部的内容前(即B成为A第一个子元素)
**A.prependTo(B)** : 把A追加到B的内容前（即A成为B第一个子元素）
**A.after(B)** : 在A后追加B
**A.before(B)**: 在A前追加B
**node.insertBefore(A,B)**: 在父节点node里面的B节点前面追加A
PS:没有 insertAfter 方法.不过可以使用 insertBefore方法和 nextSibling来模拟它。
在前一个例子中，可使用下面代码将 A插入到 B后面：
**node.insertBefore(A, B.nextSibling)**
####替换节点：
parent.replaceChild(child,oldElem);
<script>
var p = document.getElementById('main')
var span = document.createElement('span')
span.setAttribute("id", "newSpan")
var span_content = document.createTextNode("新的span元素内容.")
span.appendChild(span_content)
var parentDiv = p.parentNode;
parentDiv.replaceChild(span,p);
</script>
上例中原本的P标签及里面的内容被替换成```<span id="newSpan">新的span元素内容.</span>```
####添加class:
<script>
var div = document.getElementById('content')
div.className+=" nn"
</script>
最后输出结果```<div id="content" name="va" class="n1 nn" style="color:blue">内容</div>```
**重要PS: 在这种方法追加class的过程中，要注意被添加的class" nn"前面有一个空格，否则最后添加成功之后，原class会变成"n1nn"连成了一个新的class造成错误。**
####第二种添加class的方法：
var element = document.getElementById("content");
element.classList.add("nn");
**PS:这种方法class前面不需要添加空格，最后的结果跟上面的方法相同。**
##删：
####remove()：
删除该元素。
<script>
var div = document.getElementById('content')
div.remove()
</script>
上面例子中id为content的整个元素被删除了。
####parent.removeChild(child):
<script>
var div = document.getElementById('content')
var p = document.getElementById('p1')
div.removeChild(p);
</script>
上例中父元素content下的子元素P被删除了。
####child.parentNode.removeChild(child)：
在不确定子元素的父元素是哪一个的时候，可以这样做：
<script>
var p = document.getElementById('p1')
p.parentNode.removeChild(p)
</script>
一样可以达到上面的移除子元素P的效果，而且不需要考虑获取其具体的父元素。
