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

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

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

DOM

DOM：文檔對象模型；

節(jié)點

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

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

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

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

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

CSS

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

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

還可以把getElementById和getElementsByTagName結(jié)合起來運用。如下所示：

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

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

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

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

getElementsByClassName方法只有較新的瀏覽器才支持。為了彌補這一點，DOM腳本程序員需要使用已有的DOM方法來實現(xiàn)自己的getElementsByClassName。而多數(shù)情況下，他們的實現(xiàn)過程都與下面這個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;

      }

   }

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

獲取和設(shè)置屬性

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

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

object.getAttribute(attribute)

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

您可能感興趣的文章: