JavaScript DOM操作淺談
阿新 • • 發佈:2019-01-18
next meta eval asc 進行 too dna parent tag 1.理解DOM:
DOM(Document Object Model ,文檔對象模型)一種獨立於語言,用於操作xml,html文檔的應用編程接口。
怎麽說,我從兩個角度理解:- 對於JavaScript,為了能夠使JavaScript操作Html,JavaScript就有了一套自己的dom編程接口。
- 對於Html,dom使得html形成一棵dom樹,類似於一顆家族樹一樣,一層接一層,子子孫孫。
<!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
- 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,這裏以設置文字顏色為例。
JavaScript DOM操作淺談