本文轉(zhuǎn)自互聯(lián)網(wǎng)?

DOM?對象模型

是針對HTML與XML的API，代表和操作文檔的內(nèi)容。

一．簡介

D?:?代表文檔。作用是把編寫的網(wǎng)頁文檔換為一個文檔對象。

O：代表對象。Javascript對象有三種類型：用戶定義對象（由程序員自行創(chuàng)建的對象），內(nèi)建對象（內(nèi)建在javascript語言里的對象，ECMA-262?只定義了兩個內(nèi)置對象，即?Global?和?Math?（它們也是本地對象，根據(jù)定義，每個內(nèi)置對象都是本地對象），本地對象就是?ECMA-262?定義的類（引用類型）。它們包括：

Object???Function???Array???String????Boolean???Number????Date???RegExp

Error????EvalError???RangeError???ReferenceError??SyntaxError???TypeError??URIError

宿主對象（由瀏覽器提供的對象，所有?BOM?和?DOM?對象都是宿主對象）。

???M：代表模型。某種事物的表現(xiàn)形式，DOM代表著加載到瀏覽器窗口的當前網(wǎng)頁，瀏覽器提供了網(wǎng)頁的模型，因此就可以通過javascript去讀取這個模型（地圖）。

二．Node類型。

?????DOM1定義了一個Node接口，該接口將由DOM中的所有節(jié)點類型實現(xiàn)。

??????????一副圖來說明文檔節(jié)點的部分層次結(jié)構(gòu)

??? ? ?

?Dom樹，樹形的根部是Document節(jié)點，它代表整個文檔，代表HTML元素的節(jié)點是Element節(jié)點，代表文本節(jié)點的是Text節(jié)點，如上圖，下面的節(jié)點都是Node的子類。

??????????????????圖說明的節(jié)點之間的關(guān)系：

?????

?每個節(jié)點都要有一個childNodes屬性，其中保存著一個NodeList對象。Nodelist是一種類數(shù)組對象，是基于DOM結(jié)構(gòu)動態(tài)執(zhí)行查詢的結(jié)果。它訪問節(jié)點，可以通過方括號，也可以使用item()方法。

??剛開始接觸以及常用的節(jié)點類型：元素節(jié)點，文本節(jié)點，屬性節(jié)點。

用一副圖來解釋這幾個節(jié)點??<p?tittle=”this?is?a?para”>我是文本節(jié)點的內(nèi)容</p>

?

DOM幾個常用方法：

三．選取文檔元素

（1）通過ID選取元素：getElementById();該函數(shù)是document對象特有的函數(shù)，參數(shù)只有一個，必須放在單引號，或者雙引號里面，返回值是有著該參數(shù)的元素節(jié)點對應(yīng)的對象。

（2）通過標簽名獲取元素：getElementsByTagName()；也是只有一個參數(shù)，參數(shù)是標簽的名字，但是它返回的是一個對象數(shù)組(Nodelist對象)，即使整個文檔里這個標簽只有一個元素，也是返回一個數(shù)組，只是這時的數(shù)組長度為1,。

（3）通過css類選取元素：getElementsByClassName();也是只接受一個參數(shù)，及類名，要指定多了類名時，只要在字符串參數(shù)中，用空格分隔開來就行

如element.getElementsByClassName("class2?class1")將選取elements后代元素中同時應(yīng)用了class1和class2樣式的元素（樣式名稱不區(qū)分先后順序），返回也是一個對象數(shù)組（Nodelist對象），對應(yīng)著文檔里的一組特定元素節(jié)點。

（4）通過名字選取元素：getElementsByName();也是一個參數(shù)，name?的名稱，返回一個對象數(shù)組（Nodelist對象）。Name屬性，只在少數(shù)的HTML元素中有效，之前看過一個Java視頻對這塊的講解是有問題的，比如：表單，表單元素，<iframe>，<img>元素。這是因為name屬性是為了方便提交表單數(shù)據(jù)而打造。?并且，getElementsByName()方法，不在Document類中，只是針對HTML文檔可用，在XML中卻不能用。

（5）、通過CSS選擇器選取元素：document.querySelectorAll("selector")?其中，selector為合法的CSS選擇器，比如：通過#id，.class,p[tittle=”aaa”]?,?var?test=document.querySelectorAll("#test");通過這樣獲得對象那個后，再繼續(xù)操作。等等。返回值也是一個對象數(shù)組（Nodelist對象）。

????????這些原生的元素選取的方法比jQuery要快很多。

四．獲取和設(shè)置屬性。

???????（1）getAttribute()；只有一個參數(shù)，打算獲得的屬性的名字；

???????（2）setAttribute（）；允許對屬性節(jié)點值做出修改。使用方法：object.setAttribute(attribute,value);?

???????????簡單使用例子代碼如下：

? ? ? ? 效果圖：

轉(zhuǎn)載于:https://www.cnblogs.com/jinshiyill/p/5256653.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的DOM对象分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。