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

2024-05-06 16:14:05

字體：大中小

來源：轉載

供稿：網友

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

DOM

DOM：文檔對象模型；

節點

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

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

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

<p style="border-left-color: rgb(0, 153, 204); border-left-width: 1px; border-left-style: solid; padding: 0px 3px; margin: 3px auto 0px; width: 640px; background-color: rgb(242, 246, 251); clear: both; border-top-color: rgb(0, 153, 204); border-top-width: 1px; border-top-style: solid; border-right-color: rgb(0, 153, 204); border-right-width: 1px; border-right-style: solid;"> 復制代碼代碼如下:

		
		      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 圖片庫

下一篇：js實現鍵盤控制DIV移動的方法