《JavaScript DOM 程式設計藝術》閱讀筆記之DOM基礎_javascript技巧

DOM
      
      DOM：文檔物件模型；

節點

       元素節點：DOM的原子為元素節點。

、

、

之類的元素。元素可以包含其他的元素。沒有被包含在其他元素裡的唯一元素是元素

       文字節點：在XHTML文件裡，文字節點總是被包含在元素節點的內部。

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

      

Don't forget to buy this stuff.

       在DOM中，title="a gentle reminder"是屬性節點。

CSS

     取得元素
      getElementById, getElementsByTagName, getElementsByClassName三種可以取得元素節點的方法。

      getElementsByTagName允許以一個通配符作為它的參數，而這表示文件裡的每個元素都將在這個函數所傳回的陣列裡佔有一席之地。通配符（“*”）必須在引號裡，這是為了和乘法運算有所區別。

      也可以將getElementById和getElementsByTagName結合起來運用。如下圖所示：

複製程式碼 程式碼如下:

      var shopping = document.getElementById("purchase");
      var items = shopping.getElementsByTagName("*");


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

      getElementsByClassName方法只有較新的瀏覽器才會支援。為了彌補這一點，DOM腳本程式設計師需要使用現有的DOM方法來實作自己的getElementsByClassName。而多數情況下，他們的實作過程都與下面這個getElementsByClassName大致相似：

複製程式碼 程式碼如下:

      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             if(elems[i].className.indexOf(classname) != -1){
              results[results.length] = elems[i];
            }
         }
         return results;
      }
   }


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

取得與設定屬性

     getAttribute是一個函數，它只有一個參數－你打算查詢的屬性的名字：

複製程式碼 程式碼如下:

     object.getAttribute(attribute)


     setAttribute()允許我們對屬性節點的值做出修改。透過setAttribute對文件作出修改後，在透過瀏覽器的view source（查看原始碼）選項去查看文件的原始碼時看到的仍將是改變前的屬性值，也就是說，setAttribute所做的修改不會反映在文檔本身的源碼裡。這種「表裡不一」的現像源自DOM的工作模式：先載入文件的靜態內容，再動態刷新，動態刷新不影響文件的靜態內容。這正是DOM的真正威力：對頁面內容進行重新整理卻不需要在瀏覽器裡重新整理頁面。