DOM(Document Object Modle) 操作文檔的編程介面DOM定義了表示和修改文檔的方法,不能修改css樣式表,在js中使用DOM方法改變元素的css樣式,實質上是在元素上添加行間樣式。DOM對象就是宿主對象,用來操作HTML和xml功能對象的集合。 xml——>xhtml——>ht ...
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()方法,判斷父節點裡面是否有子節點,返回結果為布爾值。