DOM 對象模型

創(chuàng)新互聯(lián)是一家專業(yè)提供愛輝企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為愛輝眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

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

一．簡介

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

O：代表對象。Javascript對象有三種類型：用戶定義對象（由程序員自行創(chuàng)建的對象），內(nèi)建對象（內(nèi)建在javascript語言里的對象，ECMA-262 只定義了兩個(gè)內(nèi)置對象，即 Global 和 Math （它們也是本地對象，根據(jù)定義，每個(gè)內(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代表著加載到瀏覽器窗口的當(dāng)前網(wǎng)頁，瀏覽器提供了網(wǎng)頁的模型，因此就可以通過javascript去讀取這個(gè)模型（地圖）。

二．Node類型。

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

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

 

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

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

     

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

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

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

DOM幾個(gè)常用方法：

三．選取文檔元素

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

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

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

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

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

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

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

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

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

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

           簡單使用例子代碼如下：

    效果圖：

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：DOM對象模型學(xué)習(xí)與總結(jié)-創(chuàng)新互聯(lián)
URL地址：http://chinadenli.net/article30/ccgcso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、搜索引擎優(yōu)化、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、Google、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)