要進行DOM的增刪改查的操作，首先要先搞懂：
什么是dom?
Document Object Model听隐，即文檔對象模型词顾。DOM把一份文檔表示為一棵樹，這是理解DOM模型的關鍵薛闪。是由節(jié)點（node）構成的一棵節(jié)點樹。那么問題又來了：
節(jié)點是什么俺陋？
DOM中有許多不同類型的節(jié)點豁延。其中最重要的有三種：元素節(jié)點（element node），文本節(jié)點（text node）和屬性節(jié)點（attribute node）腊状。有了節(jié)點诱咏，我們就可以很方便地通過定位節(jié)點，快速的對節(jié)點進行增刪改查的操作缴挖。
查：
以下是一些查找節(jié)點的方法：
getElementById()袋狞、getElementsByTagName()、getElementsByName()映屋、getElementsByClassName()苟鸯、
querySelector()、querySelectorAll()
getElementById()：
getElementById()方法秧荆，接受一個參數(shù)：獲取元素的ID倔毙。如果找到相應的元素則返回該元素的 HTMLDivElement對象，如果不存在乙濒，則返回null陕赃。id表示一個元素節(jié)點的唯一性，不能同時給兩個或以上的元素節(jié)點創(chuàng)建同一個命名的id颁股。當我們通過getElementById()獲取到特定元素節(jié)點時么库，這個節(jié)點對象就被我們獲取到了，而通過這個節(jié)點對象甘有，我們可以訪問它的一系列屬性诉儒。舉例：
<!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()方法將返回一個對象數(shù)組HTMLCollection(NodeList)，這個數(shù)組保存著所有相同元素名的節(jié)點列表亏掀。接上舉例：
<script>
var tag = document.getElementsByTagName("p").length
console.log(tag)
</script>
最后document.getElementsByTagName("p").length返回了頁面中總共有1個p忱反。
getElementsByName():
getElementsByName()方法可以獲取相同名稱(name)的元素，返回一個對象數(shù)組HTMLCollection(NodeList)滤愕。舉例：
<script>
var tag = document.getElementsByName("va")[1].innerHTML
console.log(tag)
</script>
最后document.getElementsByName("va")[1].innerHTML返回了第二個name的值為va的元素的innerHTML:"正文"
getElementsByClassName():
getElementsByClassName()方法接受類名參數(shù)返回一個具有相同類名的元素的數(shù)組温算，返回一個對象數(shù)組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()方法返回文檔中匹配指定的選擇器組的第一個元素(使用深度優(yōu)先先序遍歷文檔的節(jié)點 | 并且通過文檔標記中的第一個元素注竿，并按照子節(jié)點數(shù)量的順序迭代順序節(jié)點)。舉例：
<script>
var tag = document.querySelector(".n1").innerHTML
console.log(tag)
</script>
最后document.querySelector(".n1").innerHTML獲得class=n1的第一個元素的innerHTML:"內容"
querySelectorAll():
querySelectorAll()方法返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優(yōu)先的先序遍歷文檔的節(jié)點)。返回的對象是 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()方法將設置元素中某個屬性和值甘萧。它需要接受兩個參數(shù)：屬性名和值。如果屬性本身已存在梆掸，那么就會被覆蓋。
<script>
var content = document.getElementById('content')
content.setAttribute('style','color:red')
</script>
上面例子中id為content的元素文本會被修改成紅色牙言。
##增：
####添加元素節(jié)點
如需向HTML DOM添加新元素酸钦，必須首先創(chuàng)建該元素（元素節(jié)點），然后向一個已存在的元素追加該元素咱枉。
<script>
var div = document.createElement('div')
var node=document.createTextNode("這是新內容卑硫。");
div.appendChild(node)
var content = document.getElementById('content')
content.appendChild(div)
</script>
#####添加元素節(jié)點的方法還有以下這些：
**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)**: 在父節(jié)點node里面的B節(jié)點前面追加A
PS:沒有 insertAfter 方法.不過可以使用 insertBefore方法和 nextSibling來模擬它蚕断。
在前一個例子中欢伏，可使用下面代碼將 A插入到 B后面：
**node.insertBefore(A, B.nextSibling)**
####替換節(jié)點：
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的效果带斑，而且不需要考慮獲取其具體的父元素鼓寺。
