快捷導(dǎo)航

《JavaScript DOM 編程藝術(shù)》讀書筆記之DOM基礎(chǔ)

更新時(shí)間：2015年01月09日 14:17:15 投稿：hebedich

這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之DOM基礎(chǔ),需要的朋友可以參考下

DOM

DOM：文檔對(duì)象模型；

節(jié)點(diǎn)

元素節(jié)點(diǎn)：DOM的原子是元素節(jié)點(diǎn)。<body>、<p>、<ul>之類的元素。元素可以包含其他的元素。沒有被包含在其他元素里的唯一元素是<html>元素

文本節(jié)點(diǎn)：在XHTML文檔里，文本節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)的內(nèi)部。

屬性節(jié)點(diǎn)：屬性節(jié)點(diǎn)用來(lái)對(duì)元素做出更具體的描述。例如，幾乎每個(gè)元素都有一個(gè)title屬性，而我們可以利用這個(gè)屬性對(duì)包含在元素里的東西作出準(zhǔn)確的描述：

<p title="a gentle reminder">Don't forget to buy this stuff.</p>

在DOM中，title="a gentle reminder"是一個(gè)屬性節(jié)點(diǎn)。

CSS

獲取元素
getElementById, getElementsByTagName, getElementsByClassName三種可以獲取元素節(jié)點(diǎn)的方法。

getElementsByTagName允許把一個(gè)通配符作為它的參數(shù)，而這意味著文檔里的每個(gè)元素都將在這個(gè)函數(shù)所返回的數(shù)組里占有一席之地。通配符（“*”）必須在引號(hào)里，這是為了和乘法操作有所區(qū)別。

還可以把getElementById和getElementsByTagName結(jié)合起來(lái)運(yùn)用。如下所示：

復(fù)制代碼代碼如下:

      var shopping = document.getElementById("purchase");

      var items = shopping.getElementsByTagName("*");

這樣就可以得到id屬性值為purchase的元素包含著多少個(gè)元素。

getElementsByClassName方法只有較新的瀏覽器才支持。為了彌補(bǔ)這一點(diǎn)，DOM腳本程序員需要使用已有的DOM方法來(lái)實(shí)現(xiàn)自己的getElementsByClassName。而多數(shù)情況下，他們的實(shí)現(xiàn)過(guò)程都與下面這個(gè)getElementsByClassName大致相似：

復(fù)制代碼代碼如下:

      function getElementsByClassName(node, classname){

        if(node.getElementsByClassName){

          return node.getElementsByClassName(classname);

        }else{

          var results = new Array();

          var elems = node.getElementsByTagName("*");

          for(var i=0;i<elems.length;i++){

            if(elems[i].className.indexOf(classname) != -1){

              results[results.length] = elems[i];

            }

         }

         return results;

      }

   }

這個(gè)getElementsByClassName函數(shù)接受兩個(gè)參數(shù)，第一個(gè)node表示DOM樹中的搜素起點(diǎn)，第二個(gè)classname就是要搜索的類名了。

獲取和設(shè)置屬性

getAttribute是一個(gè)函數(shù)，它只有一個(gè)參數(shù)——你打算查詢的屬性的名字：

復(fù)制代碼代碼如下:

object.getAttribute(attribute)

setAttribute()允許我們對(duì)屬性節(jié)點(diǎn)的值做出修改。通過(guò)setAttribute對(duì)文檔作出修改后，在通過(guò)瀏覽器的view source（查看源代碼）選項(xiàng)去查看文檔的源代碼時(shí)看到的仍將是改變前的屬性值，也就是說(shuō)，setAttribute做出的修改不會(huì)反映在文檔本身的源代碼里。這種“表里不一”的現(xiàn)象源自DOM的工作模式：先加載文檔的靜態(tài)內(nèi)容，再動(dòng)態(tài)刷新，動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。這正是DOM的真正威力：對(duì)頁(yè)面內(nèi)容進(jìn)行刷新卻不需要在瀏覽器里刷新頁(yè)面。

您可能感興趣的文章: