要進(jìn)行DOM的增刪改查的操作，首先要先搞懂：
什么是dom?
Document Object Model，即文檔對(duì)象模型。DOM把一份文檔表示為一棵樹(shù)，這是理解DOM模型的關(guān)鍵。是由節(jié)點(diǎn)（node）構(gòu)成的一棵節(jié)點(diǎn)樹(shù)。那么問(wèn)題又來(lái)了：
節(jié)點(diǎn)是什么？
DOM中有許多不同類(lèi)型的節(jié)點(diǎn)。其中最重要的有三種：元素節(jié)點(diǎn)（element node），文本節(jié)點(diǎn)（text node）和屬性節(jié)點(diǎn)（attribute node）。有了節(jié)點(diǎn)，我們就可以很方便地通過(guò)定位節(jié)點(diǎn)，快速的對(duì)節(jié)點(diǎn)進(jìn)行增刪改查的操作。
查：
以下是一些查找節(jié)點(diǎn)的方法：
getElementById()、getElementsByTagName()、getElementsByName()、getElementsByClassName()、
querySelector()、querySelectorAll()
getElementById()：
getElementById()方法，接受一個(gè)參數(shù)：獲取元素的ID。如果找到相應(yīng)的元素則返回該元素的 HTMLDivElement對(duì)象，如果不存在，則返回null。id表示一個(gè)元素節(jié)點(diǎn)的唯一性，不能同時(shí)給兩個(gè)或以上的元素節(jié)點(diǎn)創(chuàng)建同一個(gè)命名的id。當(dāng)我們通過(guò)getElementById()獲取到特定元素節(jié)點(diǎn)時(shí)，這個(gè)節(jié)點(diǎn)對(duì)象就被我們獲取到了，而通過(guò)這個(gè)節(jié)點(diǎn)對(duì)象，我們可以訪(fǎng)問(wèn)它的一系列屬性。舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content"name="va" class="n1" style="color:blue">內(nèi)容</div>
<p id="main" name="va" class="n2">正文</p>
<span id="foot" name="va" class="n1">結(jié)尾</span>
<script>
var tag = document.getElementsById("content").innerHTML
console.log(tag)
</script>
</body>
</html>
最后console.log((id.innerHTML)得到的結(jié)果是"內(nèi)容"
getElementsByTagName():
getElementsByTagName()方法將返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)，這個(gè)數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表。接上舉例：
<script>
var tag = document.getElementsByTagName("p").length
console.log(tag)
</script>
最后document.getElementsByTagName("p").length返回了頁(yè)面中總共有1個(gè)p。
getElementsByName():
getElementsByName()方法可以獲取相同名稱(chēng)(name)的元素，返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)。舉例：
<script>
var tag = document.getElementsByName("va")[1].innerHTML
console.log(tag)
</script>
最后document.getElementsByName("va")[1].innerHTML返回了第二個(gè)name的值為va的元素的innerHTML:"正文"
getElementsByClassName():
getElementsByClassName()方法接受類(lèi)名參數(shù)返回一個(gè)具有相同類(lèi)名的元素的數(shù)組，返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)。舉例：
<script>
var tag = document.getElementsByClassName("n1")[1].innerHTML
console.log(tag)
</script>
最后 document.getElementsByClassName("n1")[1].innerHTML返回了第二個(gè)class為n1的元素的innerHTML:"結(jié)尾"
getAttribute():
getAttribute()方法將獲取元素中某個(gè)屬性的值。舉例：
<script>
var tag = document.getElementById("content").getAttribute("name")
console.log(tag)
</script>
最后document.getElementById("content").getAttribute("name")獲得了id=content元素的name值："va"
querySelector():
querySelector()方法返回文檔中匹配指定的選擇器組的第一個(gè)元素(使用深度優(yōu)先先序遍歷文檔的節(jié)點(diǎn) | 并且通過(guò)文檔標(biāo)記中的第一個(gè)元素，并按照子節(jié)點(diǎn)數(shù)量的順序迭代順序節(jié)點(diǎn))。舉例：
<script>
var tag = document.querySelector(".n1").innerHTML
console.log(tag)
</script>
最后document.querySelector(".n1").innerHTML獲得class=n1的第一個(gè)元素的innerHTML:"內(nèi)容"
querySelectorAll():
querySelectorAll()方法返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優(yōu)先的先序遍歷文檔的節(jié)點(diǎn))。返回的對(duì)象是 NodeList。
<script>
var tag = document.querySelectorAll(".n1")[1].innerHTML
console.log(tag)
</script>
最后document.querySelectorAll(".n1")[1].innerHTML返回所有符合class=n1的元素中，第二個(gè)元素的innerHTML:"結(jié)尾"
改：
修改HTML元素：
修改元素內(nèi)容：
document.getElementById(id).innerHTML=new value，如修改id為content元素的文本內(nèi)容，可以這樣：
var text = document.getElementById('content').innerHTML="修改內(nèi)容"
console.log(text)
</script>```
于是content的文本內(nèi)容就會(huì)替換成```"修改內(nèi)容"```
####修改元素屬性：
document.getElementById(id).attribute=new value，如修改id為content的元素的name值：
<script>
var name = document.getElementById('content').name="new name"
console.log(name)
</script>
content的name值就會(huì)替換成```"new name"```
###修改元素CSS：
document.getElementById(id).style.property=new style，如修改id為content的元素的color值:
<script>
var name = document.getElementById('content').style.color="red"
</script>
content的文本內(nèi)容會(huì)變成紅色。
####setAttribute()方法：
setAttribute()方法將設(shè)置元素中某個(gè)屬性和值。它需要接受兩個(gè)參數(shù)：屬性名和值。如果屬性本身已存在，那么就會(huì)被覆蓋。
<script>
var content = document.getElementById('content')
content.setAttribute('style','color:red')
</script>
上面例子中id為content的元素文本會(huì)被修改成紅色。
##增：
####添加元素節(jié)點(diǎn)
如需向HTML DOM添加新元素，必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素。
<script>
var div = document.createElement('div')
var node=document.createTextNode("這是新內(nèi)容。");
div.appendChild(node)
var content = document.getElementById('content')
content.appendChild(div)
</script>
#####添加元素節(jié)點(diǎn)的方法還有以下這些：
**A.append(B) **: 把B追加到A內(nèi)部（所有的A元素，以下類(lèi)似）
**A.appendTo(B)** : 把A追加到B內(nèi)部
**A.prepend(B)** : 把B追加到A內(nèi)部的內(nèi)容前(即B成為A第一個(gè)子元素)
**A.prependTo(B)** : 把A追加到B的內(nèi)容前（即A成為B第一個(gè)子元素）
**A.after(B)** : 在A后追加B
**A.before(B)**: 在A前追加B
**node.insertBefore(A,B)**: 在父節(jié)點(diǎn)node里面的B節(jié)點(diǎn)前面追加A
PS:沒(méi)有 insertAfter 方法.不過(guò)可以使用 insertBefore方法和 nextSibling來(lái)模擬它。
在前一個(gè)例子中，可使用下面代碼將 A插入到 B后面：
**node.insertBefore(A, B.nextSibling)**
####替換節(jié)點(diǎn)：
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元素內(nèi)容.")
span.appendChild(span_content)
var parentDiv = p.parentNode;
parentDiv.replaceChild(span,p);
</script>
上例中原本的P標(biāo)簽及里面的內(nèi)容被替換成```<span id="newSpan">新的span元素內(nèi)容.</span>```
####添加class:
<script>
var div = document.getElementById('content')
div.className+=" nn"
</script>
最后輸出結(jié)果```<div id="content" name="va" class="n1 nn" style="color:blue">內(nèi)容</div>```
**重要PS: 在這種方法追加class的過(guò)程中，要注意被添加的class" nn"前面有一個(gè)空格，否則最后添加成功之后，原class會(huì)變成"n1nn"連成了一個(gè)新的class造成錯(cuò)誤。**
####第二種添加class的方法：
var element = document.getElementById("content");
element.classList.add("nn");
**PS:這種方法class前面不需要添加空格，最后的結(jié)果跟上面的方法相同。**
##刪：
####remove()：
刪除該元素。
<script>
var div = document.getElementById('content')
div.remove()
</script>
上面例子中id為content的整個(gè)元素被刪除了。
####parent.removeChild(child):
<script>
var div = document.getElementById('content')
var p = document.getElementById('p1')
div.removeChild(p);
</script>
上例中父元素content下的子元素P被刪除了。
####child.parentNode.removeChild(child)：
在不確定子元素的父元素是哪一個(gè)的時(shí)候，可以這樣做：
<script>
var p = document.getElementById('p1')
p.parentNode.removeChild(p)
</script>
一樣可以達(dá)到上面的移除子元素P的效果，而且不需要考慮獲取其具體的父元素。
