DOM的示例分析

這篇文章將為大家詳細講解有關DOM的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

DOM(Document Object Modle) 操作文檔的編程接口

DOM定義了表示和修改文檔的方法，不能修改css樣式表，在js中使用DOM方法改變元素的css樣式，實質上是在元素上添加行間樣式。

DOM對象就是宿主對象，用來操作HTML和xml功能對象的集合。 xml——>xhtml——>html4.0——>html5

HTML和xml的區別：除了xml可以自定義標簽外基本上沒區別，xml被json替代了。

document，單獨寫的時候，它代表整個文檔，隱式的寫在html標簽的上一層，html只是文檔中的根標簽。

注意點：BOM、DOM成組的東西都是類數組，而不是數組。

獲取元素的方法：

getElementById();

在IE8以下的瀏覽器不區分id值得大小寫，并且匹配元素的name的屬性值。由于后臺會修改id值，所以盡量不用或少用id。

getElementsByTagName();標簽名，所有瀏覽器都支持

getElementsByClassName(); IE8及其以下得瀏覽器不支持

getElementsByName(); 在舊版本中，只有能提交請求的標簽的name才生效(form、表單元素、img、iframe)

document.querySelector(); css選擇器，IE7及以下不兼容，并且不具有實時性。

document.querySelectAll();

節點類型：

元素節點 1

屬性節點 2

文本(text)節點 3 // 文本、空格、回車等都是文本節點

注釋(comment)節點 8

document節點 9

documentfragment 11

遍歷節點數：

parentNode 子節點的父節點，最終的parentNode節點是document節點。

childNodes 父節點的所有子節點，元素節點、注釋節點、文本節點

firstChild 第一個子節點

lastChild 最后一個子節點

nextSibling 下一個兄弟節點

previousSibling 前一個兄弟節點

遍歷元素節點數：（除了children節點，其他的都是IE9及以下不兼容）

parentElement 元素的父元素節點，最終的父元素節點是html元素，document是自成節點。

children 父元素下的元素子節點。

node.childElementCount === node.children.length 當前子節點的元素子節點個數。用children.length。

firstElementChild 第一個元素子節點

lastElementChild 最后一個元素子節點

nextElementSibling、previousElemnetSibling

節點的四個屬性：

nodeName 除了元素節點，返回的結果前面都有一個‘#'，而元素節點返回大寫形式的標簽名，類型都為只讀。

nodeValue 只用于文本節點和注釋節點,可讀寫。

nodeType 返回數字，該數字代表對應的節點類型。只讀

attributes 元素節點的屬性集合。

node.hasChildNodes()方法，判斷父節點里面是否有子節點，返回結果為布爾值。

關于“DOM的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。