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

DOM定義了表示和修改文檔的方法，不能修改css樣式表，在js中使用DOM方法改變?cè)氐腸ss樣式，實(shí)質(zhì)上是在元素上添加行間樣式。

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

HTML和xml的區(qū)別：除了xml可以自定義標(biāo)簽外基本上沒(méi)區(qū)別，xml被json替代了。

document，單獨(dú)寫(xiě)的時(shí)候，它代表整個(gè)文檔，隱式的寫(xiě)在html標(biāo)簽的上一層，html只是文檔中的根標(biāo)簽。

注意點(diǎn)：BOM、DOM成組的東西都是類數(shù)組，而不是數(shù)組。

獲取元素的方法：

getElementById();

在IE8以下的瀏覽器不區(qū)分id值得大小寫(xiě)，并且匹配元素的name的屬性值。由于后臺(tái)會(huì)修改id值，所以盡量不用或少用id。

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

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

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

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

document.querySelectAll();

節(jié)點(diǎn)類型：

元素節(jié)點(diǎn) 1

屬性節(jié)點(diǎn) 2

文本(text)節(jié)點(diǎn) 3 // 文本、空格、回車等都是文本節(jié)點(diǎn)

注釋(comment)節(jié)點(diǎn) 8

document節(jié)點(diǎn) 9

documentfragment 11

遍歷節(jié)點(diǎn)數(shù)：

parentNode 子節(jié)點(diǎn)的父節(jié)點(diǎn)，最終的parentNode節(jié)點(diǎn)是document節(jié)點(diǎn)。

childNodes 父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，元素節(jié)點(diǎn)、注釋節(jié)點(diǎn)、文本節(jié)點(diǎn)

firstChild 第一個(gè)子節(jié)點(diǎn)

lastChild 最后一個(gè)子節(jié)點(diǎn)

nextSibling 下一個(gè)兄弟節(jié)點(diǎn)

previousSibling 前一個(gè)兄弟節(jié)點(diǎn)

遍歷元素節(jié)點(diǎn)數(shù)：（除了children節(jié)點(diǎn)，其他的都是IE9及以下不兼容）

parentElement 元素的父元素節(jié)點(diǎn)，最終的父元素節(jié)點(diǎn)是html元素，document是自成節(jié)點(diǎn)。

children 父元素下的元素子節(jié)點(diǎn)。

node.childElementCount === node.children.length 當(dāng)前子節(jié)點(diǎn)的元素子節(jié)點(diǎn)個(gè)數(shù)。用children.length。

firstElementChild 第一個(gè)元素子節(jié)點(diǎn)

lastElementChild 最后一個(gè)元素子節(jié)點(diǎn)

nextElementSibling、previousElemnetSibling

節(jié)點(diǎn)的四個(gè)屬性：

nodeName 除了元素節(jié)點(diǎn)，返回的結(jié)果前面都有一個(gè)‘#'，而元素節(jié)點(diǎn)返回大寫(xiě)形式的標(biāo)簽名，類型都為只讀。

nodeValue 只用于文本節(jié)點(diǎn)和注釋節(jié)點(diǎn),可讀寫(xiě)。

nodeType 返回?cái)?shù)字，該數(shù)字代表對(duì)應(yīng)的節(jié)點(diǎn)類型。只讀

attributes 元素節(jié)點(diǎn)的屬性集合。

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

以上這篇詳談DOM簡(jiǎn)介及節(jié)點(diǎn)、屬性、查找節(jié)點(diǎn)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論