1.理解DOM：
? ? DOM（Document Object Model ，文檔對象模型）一種獨(dú)立于語言，用于操作xml，html文檔的應(yīng)用編程接口。
? ? ? 怎么說，我從兩個角度理解：
? ? 一、對于JavaScript，為了能夠使? JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
? ? ? 二、對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
? ? 所以說，有了DOM，在我看來就是相當(dāng)于JavaScript拿到了鑰匙一樣可以去操作Html的每一個節(jié)點(diǎn)，觸摸Html每寸肌膚。（咳。。。）
2.介紹Html的DOM樹：
說明：html標(biāo)簽通過瀏覽器的解析后才會形成dom樹，此后HTML中的每個標(biāo)簽元素，屬性，文本都能看做是一個DOM的節(jié)點(diǎn)，JavaScript都能通過dom的提供的編程接口操作到每個節(jié)點(diǎn)，去了解瀏覽器的渲染機(jī)制能夠幫助我們了解dom。
Html代碼：
對應(yīng)的DOM樹結(jié)構(gòu)圖：
3.認(rèn)識JavaScript中的DOM編程接口：
上面說了html形成的dom樹，接著說下通過js的dom編程接口去操作這棵dom樹。
JavaScriptDOM操作的常用方法和屬性：:
常用方法:
獲取節(jié)點(diǎn)：
document.getElementById(idName)? ? ? ? ? //通過id號來獲取元素，返回一個元素對象
document.getElementsByName(name)? ? ? //通過name屬性獲取id號，返回元素對象數(shù)組
document.getElementsByClassName(className)? //通過class來獲取元素，返回元素對象數(shù)組（ie8以上才有）
document.getElementsByTagName(tagName)? ? ? //通過標(biāo)簽名獲取元素，返回元素對象數(shù)組
獲取/設(shè)置元素的屬性值：
element.getAttribute(attributeName)? ? //括號傳入屬性名，返回對應(yīng)屬性的屬性值
element.setAttribute(attributeName,attributeValue)? ? //傳入屬性名及設(shè)置的值
創(chuàng)建節(jié)點(diǎn)Node：
document.createElement("h3")? ? ? //創(chuàng)建一個html元素，這里以創(chuàng)建h3元素為例
document.createTextNode(String); //創(chuàng)建一個文本節(jié)點(diǎn)；
document.createAttribute("class"); //創(chuàng)建一個屬性節(jié)點(diǎn)，這里以創(chuàng)建class屬性為例
增添節(jié)點(diǎn)：
element.appendChild(Node);? //往element內(nèi)部最后面添加一個節(jié)點(diǎn)，參數(shù)是節(jié)點(diǎn)類型
elelment.insertBefore(newNode,existingNode); //在element內(nèi)部的中在existingNode前面插入newNode
刪除節(jié)點(diǎn)：
element.removeChild(Node)? ? //刪除當(dāng)前節(jié)點(diǎn)下指定的子節(jié)點(diǎn)，刪除成功返回該被刪除的節(jié)點(diǎn)，否則返回null
常用屬性:
獲取當(dāng)前元素的父節(jié)點(diǎn) ：
element.parentNode? ? //返回當(dāng)前元素的父節(jié)點(diǎn)對象
獲取當(dāng)前元素的子節(jié)點(diǎn)：
element.chlidren? ? ? ? //返回當(dāng)前元素所有子元素節(jié)點(diǎn)對象，只返回HTML節(jié)點(diǎn)
element.chilidNodes? //返回當(dāng)前元素多有子節(jié)點(diǎn)，包括文本，HTML，屬性節(jié)點(diǎn)。（回車也會當(dāng)做一個節(jié)點(diǎn)）
element.firstChild? ? ? //返回當(dāng)前元素的第一個子節(jié)點(diǎn)對象
element.lastChild? ? ? //返回當(dāng)前元素的最后一個子節(jié)點(diǎn)對象
獲取當(dāng)前元素的同級元素：
element.nextSibling? ? ? ? ? //返回當(dāng)前元素的下一個同級元素 沒有就返回null
element.previousSibling? //返回當(dāng)前元素上一個同級元素 沒有就返回null
獲取當(dāng)前元素的文本：
element.innerHTML? //返回元素的所有文本，包括html代碼
element.innerText? ? //返回當(dāng)前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼
獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類型：node.nodeType? //返回節(jié)點(diǎn)的類型,數(shù)字形式（1-12）常見幾個1：元素節(jié)點(diǎn)，2：屬性節(jié)點(diǎn)，3：文本節(jié)點(diǎn)。
設(shè)置樣式：element.style.color=“#eea”;? ? ? //設(shè)置元素的樣式時使用style，這里以設(shè)置文字顏色為例。
4.總結(jié)：
大家都會覺得用jQuery來操作dom會更加的方便且好用，因為jq對js的dom進(jìn)行了封裝，使得我們Write Less, Do More。但是我覺得還是要總結(jié)一下原生js的dom，從根本上了解js對dom的操作，只會有利而無害。
