JavaScript–淺談DOM操作
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 //返回節點的類型,數字形式
- 設置樣式
element.style.color=“#eea”; //設置元素的樣式時使用style，這裏以設置文字顏色爲例。
4.總結
大家都會覺得用jQuery來操作dom會更加的方便且好用，因爲jq對js的dom進行了封裝，使得我們Write Less, Do More。但是我覺得還是要總結一下原生js的dom，從根本上了解js對dom的操作，只會有利而無害。