1.了解DOM：
DOM（Document Object Model ，文檔對象模型）一種獨立于語言，用于操作xml，html文檔的應用程式設計接口。
怎麼說，我從兩個角度了解：
- 對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom程式設計接口。
- 對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
是以說，有了DOM，在我看來就是相當于JavaScript拿到了鑰匙一樣可以去操作Html的每一個節點，觸摸Html每寸肌膚。（咳。。。）
2.介紹Html的DOM樹：
說明：html标簽通過浏覽器的解析後才會形成dom樹，此後HTML中的每個标簽元素，屬性，文本都能看做是一個DOM的節點，JavaScript都能通過dom的提供的程式設計接口操作到每個節點，去了解浏覽器的渲染機制能夠幫助我們了解dom。
Html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
</head>
<body>
<div>
<a href="www.baidu.com">百度</a>
</div>
</body>
</html>
對應的DOM樹結構圖：
3.認識JavaScript中的DOM程式設計接口：
上面說了html形成的dom樹，接着說下通過js的dom程式設計接口去操作這棵dom樹。
JavaScriptDOM操作的常用方法和屬性：:
- 常用方法:
- 擷取節點：
-
- document.getElementById(idName) //通過id号來擷取元素，傳回一個元素對象
- document.getElementsByName(name) //通過name屬性擷取id号，傳回元素對象數組
- document.getElementsByClassName(className) //通過class來擷取元素，傳回元素對象數組（ie8以上才有）
- document.getElementsByTagName(tagName) //通過标簽名擷取元素，傳回元素對象數組
- 擷取/設定元素的屬性值：
-
- element.getAttribute(attributeName) //括号傳入屬性名，傳回對應屬性的屬性值
- element.setAttribute(attributeName,attributeValue) //傳入屬性名及設定的值
- 建立節點Node：
-
- document.createElement("h3") //建立一個html元素，這裡以建立h3元素為例
- document.createTextNode(String); //建立一個文本節點；
- document.createAttribute("class"); //建立一個屬性節點，這裡以建立class屬性為例
- 增添節點：
-
- element.appendChild(Node); //往element内部最後面添加一個節點，參數是節點類型
- elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
- 删除節點：
-
- element.removeChild(Node) //删除目前節點下指定的子節點，删除成功傳回該被删除的節點，否則傳回null
- 常用屬性:
- 擷取目前元素的父節點 ：
-
- element.parentNode //傳回目前元素的父節點對象
- 擷取目前元素的子節點：
-
- element.chlidren //傳回目前元素所有子元素節點對象，隻傳回HTML節點
- element.chilidNodes //傳回目前元素多有子節點，包括文本，HTML，屬性節點。（回車也會當做一個節點）
- element.firstChild //傳回目前元素的第一個子節點對象
- element.lastChild //傳回目前元素的最後一個子節點對象
- 擷取目前元素的同級元素：
-
- element.nextSibling //傳回目前元素的下一個同級元素 沒有就傳回null
- element.previousSibling //傳回目前元素上一個同級元素 沒有就傳回null
- 擷取目前元素的文本：
-
- element.innerHTML //傳回元素的所有文本，包括html代碼
- element.innerText //傳回目前元素的自身及子代所有文本值，隻是文本内容，不包括html代碼
- 擷取目前節點的節點類型：node.nodeType //傳回節點的類型,數字形式（1-12）常見幾個1：元素節點，2：屬性節點，3：文本節點。
- 設定樣式：element.style.color=“#eea”; //設定元素的樣式時使用style，這裡以設定文字顔色為例。
4.總結：
大家都會覺得用jQuery來操作dom會更加的友善且好用，因為jq對js的dom進行了封裝，使得我們Write Less, Do More。但是我覺得還是要總結一下原生js的dom，從根本上了解js對dom的操作，隻會有利而無害。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)