DOM，即文檔對象模型（ Model），是通過來對HTML文檔進(jìn)行管理和操作的一類 對象模型，通過DOM可以操作HTML的元素和元素的屬性，包括對元素的增刪改等操作。
首先需要了解DOM的理論，DOM是將一系列HTML元素看做對象進(jìn)行管理的操作方法，每個HTML的元素節(jié)點都是一個可調(diào)用的對象，通過對象的方法可以對元素進(jìn)行操作。DOM是樹形結(jié)構(gòu)的模型，最頂級的節(jié)點是文檔節(jié)點，即對象，他可以理解為整個HTML文檔，或者是
標(biāo)簽，然后在標(biāo)簽中有許多子元素，包括body和head都是html的子元素，接下來body是網(wǎng)頁的主體部分，在這里又有很多的子元素，這些子元素又有很多屬性，所有的這些節(jié)點和屬性都可以被看做是對象。
DOM模型圖示：
由圖可知：文檔是整個樹的根，其中的根元素是標(biāo)簽，對應(yīng)的對象是，往下一級元素是head和Body，這兩個元素定義了文檔的頭部和主體，在頭部中的title標(biāo)簽定義了文檔的標(biāo)題，這個標(biāo)題有一個特殊點就是，雖然他是head的子元素，但是他可以在對象中直接調(diào)用。
例如;
document.title="DOM測試";這段代碼就會改變整個文檔的標(biāo)題，因為title可看做是對象的一個屬性，調(diào)用這個屬性并重新賦值就可以改變title的內(nèi)容。
注意，雖然title是html下的一個子標(biāo)簽，但是他不作為節(jié)點，他是文檔的屬性（標(biāo)題），所以通過對象可以直接修改他的值。
我們也可以通過對象直接操作body的內(nèi)容，例如：
document.body.style.color="red";這樣會修改body內(nèi)也就是整個頁面的文字顏色為紅色。
因為在對象中直接包含了body作為子對象，且style是body標(biāo)簽屬性，實際上在DOM中，style是用作對css進(jìn)行操作的，這里我們暫時理解為標(biāo)簽屬性，他是body的子對象，因此他可以包含一些屬性和方法，顯然，color就是style的對象屬性。
簡單來說，是一個對象，body是一個對象，且是的子對象，style又是body的子對象js增加節(jié)點和內(nèi)容，而style不是標(biāo)簽，就沒有子對象，color只能作為對象的屬性了。
同理，修改body下的字體大小：
document.body.style.fontSize="20px";值得注意的是，的類屬性和方法采用嚴(yán)格的小駝峰法命名，并且不能使用連字符作為命名，所以在CSS中對應(yīng)的font-size屬性在DOM中應(yīng)該寫為：.
同理，-應(yīng)該寫作。
我們是否可以這樣做：
document.body.p.style.color="red";絕對不可以！這樣做會產(chǎn)生錯誤！因為DOM是樹形展開的，并且只有屬性能作為標(biāo)簽的子對象，在任何一個標(biāo)簽的對象下，都只包含這個標(biāo)簽的屬性和一些DOM自帶的屬性、方法，子對象只能通過選擇的方式獲取對象。
如何對body下的標(biāo)簽進(jìn)行管理呢？
需要使用對象中的方法來完成操作：
1.()方法：
()方法是通過元素的id來獲取元素對象，因為id在HTML文檔中原則上是唯一的，所以它一次只會獲取一個元素。然后返回的內(nèi)容就是這個id的元素的對象。
例如：
HTML:
這是一段測試文本
JS:
document.getElementById("test").inneHTML="但是他的文字被修改了";是元素對象下的一個屬性，代表標(biāo)簽內(nèi)的內(nèi)容。通過()方法獲取id為test的元素的對象，然后修改屬性即修改元素內(nèi)容。也可以通過這種方式向元素內(nèi)添加新元素：
document.getElementById("test").inneHTML="這是一個鏈接";但是通常情況下我們不選擇這么做，因為這樣代碼美觀性不足，并且不適合完成復(fù)雜的添加節(jié)點操作，所以我們一般采用()的方式，會在下文中敘述。
2.()方法：
()是通過HTML標(biāo)簽的name屬性來查找HTML元素，所以方法名式而不是，因為HTML允許多個標(biāo)簽是同一個name屬性。此方法返回的是一組對象組成的數(shù)組。
而我們在對通過此方法獲得的節(jié)點進(jìn)行操作時，必須選中指定的元素才能訪問DOM提供的方法和屬性，因為他返回的不是某個節(jié)點的對象，而是所有符合條件的對象組成的數(shù)組，通常情況下，我們?nèi)绻胍獙λ械倪@些節(jié)點進(jìn)行修改，會使用for循環(huán)來完成。
注意：即使只有一個節(jié)點的name屬性與選擇的內(nèi)容相同，返回的仍然是節(jié)點組成的數(shù)組，通過指定數(shù)組下標(biāo)才能選取對應(yīng)的節(jié)點。同時對于新手可能還會有一個誤區(qū)，通過判斷返回的數(shù)據(jù)類型是 ，這不是對象嗎？千萬別忘了！的數(shù)據(jù)類型比較特殊，所有的引用類型都是對象！Array
HTML：
basketball
baseball
ping-pong：
list=document.getElementsByName("hobby"); //獲取已選的復(fù)選框
for(i=0;i<=list.length;i++){
if(list[i].checked==true){
document.write("興趣愛好是："+list[i].value);
}
}以上代碼是是簡單的驗證已選的復(fù)選框的內(nèi)容，上面已經(jīng)提到，每個HTML標(biāo)簽的屬性都會被作為屬性存在標(biāo)簽的對象中，所以在我們選中節(jié)點（標(biāo)簽對象）時，就可以直接通過訪問節(jié)點屬性訪問標(biāo)簽的內(nèi)容。如上，list[i]就是遍歷的每個復(fù)選框的節(jié)點對象。通過訪問屬性就可以得到對應(yīng)的標(biāo)簽屬性，list[i].就是復(fù)選框的check屬性，如果復(fù)選框被勾選就是true如果沒有被勾選就是false。
.write()是在文檔中寫入內(nèi)容的方法。
3.me()方法：
me()是通過HTML元素的類名獲取節(jié)點，返回的同樣是一組有序的對象的組成的數(shù)組，與用法相同。
例：修改所有類名為women的元素字體顏色為紅色。
HTML:
小芳
小劉
小櫻
：
list=document.getElementsByClassName("women");
for(i=0;i<=list.length;i++){
list[i].style.color="red";
}效果：
3.()方法：
()即通過標(biāo)簽名選中節(jié)點，與上面兩個方法一樣，就不演示了。 4.()方法：
()方法是對象的直屬子方法，并且只有對象可以使用此方法，別的節(jié)點對象沒有此方法。此方法的用處是創(chuàng)建一個節(jié)點對象，但是這個對象不會直接寫入文檔，而是在內(nèi)存中，需要通過()方法來將此節(jié)點添加到某個元素中，參數(shù)值是要創(chuàng)建的節(jié)點名即HTML標(biāo)簽名。
例：在body中插入一個div元素，并且在div中插入一個無序列表，然后將列表標(biāo)記刪除。
divnode=document.createElement("div");
ulnode=document.createElement("ul");
for(i=0;i<=3;i++){
linode=document.createElement("li");
linode.innerHTML="項目"+i;
ulnode.appendChild(linode);
}
ulnode.style.listStyleType="none";
divnode.appendChild(ulnode);
document.body.appendChild(divnode);效果：
()方法：
()方法即在某個元素的節(jié)點下插入子元素，方法的參數(shù)是一個節(jié)點的對象，一般配合()方法使用。
()方法可以用于節(jié)點對象下，如果用于下，會產(chǎn)生一個錯誤：only one on .
例：向表單中新增一個備注框。
HTML:
:
form=document.getElementById("form");
input=document.createElement("input");
input.type="text"; input.name="beizhu";
input.placeholder="備注";
form.appendChild(input);效果：
能否選中一個元素，然后將他的內(nèi)容添加到另一個元素中，比如：
var a=document.getElementById("a");
var div=document.getElementById("div");
div.appendChild("a"");這樣做的話，原來的id為a的元素會消失，會被移動到id為div的元素下，所以我們可以通過這種方法移動元素。因為每個元素對應(yīng)的都是一個唯一的對象，獲取的這個對象就是這個元素的整個標(biāo)簽內(nèi)容，這個對象中也包含元素的節(jié)點位置，因此，將通過js選中的元素添加的另一個元素的子對象，會將唯一的元素添加到另一元素的對象中。
()方法：
既然通過選中元素直接添加子元素的方法無法復(fù)制元素，JS自然會給出復(fù)制元素的方法，也就是方法，方法只會克隆節(jié)點以及節(jié)點的屬性，而不會改變文檔樹。
該方法有一個參數(shù)，表示是否復(fù)制該節(jié)點下的子節(jié)點。參數(shù)類型是bool，如果是true則連同元素下的子節(jié)點一同復(fù)制，如果是false則只復(fù)制當(dāng)前節(jié)點。
例：
HTML:
是一個段落這是一個超鏈接
JS:
div=document.getElementById("t");
p=document.getElementsByTagName("p");
pnode=p[0].cloneNode(0)
div.appendChild(pnode);運(yùn)行一下這段代碼，發(fā)現(xiàn)沒有任何反應(yīng)？因為這時候參數(shù)為0，也就是false，這時方法只會克隆節(jié)點，而不會克隆節(jié)點內(nèi)容，如果我們打印一下pnode，發(fā)現(xiàn)他的值是
查看源代碼，div元素中多了一個子元素P，但是沒有內(nèi)容。
為什么p里面的字也沒有被克隆呢？實際上，節(jié)點中的內(nèi)容也可被認(rèn)為是子元素，p中的文字是一個文字節(jié)點，他自然不能是與p同級的節(jié)點，所以不會被克隆，我們也可以對已選中節(jié)點新增文字節(jié)點。
上面的例子，只要將的0改為1就可以將節(jié)點內(nèi)容和子元素復(fù)制下來。接下來測試文本節(jié)點方法。
()方法
()方法即創(chuàng)建一個文本節(jié)點，他是對象下的方法，返回一個文本節(jié)點對象。
例：
p=document.getElementsByTagName("p")
text=document.createTextNode("測試文本")
p[0].appendChild(text); //為第一個p元素添加測試文本。以上是常用的DOM方法，然而這只是冰山一角，DOM提供了非常多的屬性方法和元素的屬性和方法，關(guān)于這些更多的方法和屬性js增加節(jié)點和內(nèi)容，會另起篇幅詳述。