《JavaScript DOM 編程藝術》讀書筆記之DOM基礎

2019-11-20 13:27:10

字體：大中小

來源：轉載

供稿：網友

DOM

DOM：文檔對象模型；

節點

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

文本節點：在XHTML文檔里，文本節點總是被包含在元素節點的內部。

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

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

在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<elems.length;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的真正威力：對頁面內容進行刷新卻不需要在瀏覽器里刷新頁面。

上一篇：《JavaScript DOM 編程藝術》讀書筆記之JavaScript 圖片庫

下一篇：《JavaScript DOM 編程藝術》讀書筆記之JavaScript 語法