Javascript入門學習第九篇 Javascript DOM 總結

更新時間：2008年07月06日 10:03:48 作者：

作為一個js-DOM開發(fā)者，你必須知道的一些DOM方法：

6，    設置/獲取屬性節(jié)點。
setAttribute();//設置
例子：
var a  = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);
不管以前有沒有title屬性，以后的值是 my demo。

getAttribute();//獲取
例子：
var a =document.getElementById(“cssrain”);
var b = a.getAttribute(“title”);
獲取的時候，如果屬性不存在，則返回空，注意ie和ff返回不同，可以看我以前的例子。
返回雖然不同，但是可以用一個方法來判斷。
if(a.getAttribute(“title”) ){   }

7，    查找節(jié)點。
getElementById();
返回一個對象，對象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。

getElementsByTagName() 查找標簽名的所有元素。
返回一個集合，可以用循環(huán)取出每個對象，對象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。
例子：
  var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
           ps[i].setAttribute(“title”,”hello”);
//也可以使用:  ps.item(i).setAttribute("title","hello");
}

hasChildNodes:
由名字就可以知道，是判斷元素是否有子節(jié)點。
返回boolean類型。
文本節(jié)點和屬性節(jié)點不可能有子節(jié)點，所以他們的hasChildNodes 永遠返回false；
hasChildNodes經常跟 childNodes 一起使用。
比如：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var ps = document.getElementById("cssrain")
if(ps.hasChildNodes){
        alert( ps.childNodes.length  );
}
</script>

8, DOM屬性：
nodeName屬性  ：節(jié)點的名字。
如果節(jié)點是元素節(jié)點，那么返回這個元素的名字。此時，相當于tagName屬性。
比如：
<p>aaaa</p>  : 則返回 p ;
如果是屬性節(jié)點，nodeName將返回這個屬性的名字。
如果是文本節(jié)點，nodeName將返回一個#text的字符串。

另外我要說的是： nodeName屬性是一個只讀屬性，不能進行設置.(寫)

nodeType屬性：返回一個整數，代表這個節(jié)點的類型。
我們常用的3中類型：
nodeType == 1  ：元素節(jié)點
nodeType == 2  ：屬性節(jié)點
nodeType == 3  ：文本節(jié)點
如果想記住的話，上面的順序我們可以看做是從前到后。
比如： <p  title="cssrain" >test</p>   從前往后讀：你會發(fā)現先是元素節(jié)點，然后是屬性節(jié)點，最后是文本節(jié)點，這樣你就很容易記住了 nodeType分別代表什么類型了。

nodeType屬性經常跟 if 配合使用，以確保不會在錯誤的節(jié)點類型上執(zhí)行錯誤的操作。
比如：
function cs_demo(mynode){
      if(mynode.nodeType == 1){
              mynode.setAttribute("title","demo");
        }
}
代碼解釋：先檢查mynode的nodeType屬性，以確保它所代表的節(jié)點確實是一個元素節(jié)點。
和nodeName屬性一樣，他也是只讀屬性，不能進行設置.(寫)。

nodeValue屬性：返回一個字符串，這個節(jié)點的值。
如果節(jié)點是元素節(jié)點，那么返回null；（注意下）
如果是屬性節(jié)點，nodeValue將返回這個屬性的值。
如果是文本節(jié)點，nodeValue將返回這個文本節(jié)點的內容。
比如：
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
var c= document.getElementById("c");
alert(  c.nodeValue  );//返回null
</SCRIPT>
nodeValue是一個可以讀、寫的屬性。但它不能設置元素節(jié)點的值。
看下面的例子：
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
var c= document.getElementById("c");
  c.nodeValue =" dddddddddddd"; //不能設置
  //alert( c.firstChild.nodeValue ) //元素節(jié)點包括屬性節(jié)點和文本節(jié)點。
  c.firstChild.nodeValue =  "test"http://能設置
</SCRIPT>
當然我們?yōu)榱舜_保能正確運行：可以加一段代碼：
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
var c= document.getElementById("c");
  c.nodeValue =" dddddddddddd"; //不能設置
  //alert( c.firstChild.nodeValue )
  if( c.firstChild.nodeType==3 ){ //判斷是不是文本節(jié)點
  c.firstChild.nodeValue =  "test"http://能設置
  }
</SCRIPT>
//可以看出，如果要設置元素節(jié)點，不能直接設置，而必須先使用firstChild或者lastChild等然后設置nodeValue.
nodeValue一般只用來設置文本節(jié)點的值。如果要刷新屬性節(jié)點的值，一般使用setAttribute().

childNodes屬性：返回一個數組，數組由元素節(jié)點的子節(jié)點構成。
由于文本節(jié)點和屬性節(jié)點都不可能再包含任何子節(jié)點，
所以他們的childNodes屬性永遠返回一個空數組。

可以使用hasChildNodes方法，它用來判斷某個元素有沒有子節(jié)點。
或者  if (container.childNodes.length < 1) ；

childNodes也是一個只讀屬性。如果要增加節(jié)點，可以使用appendChild()或者insertBefore() ，
刪除節(jié)點可以使用removeChild(); 操作后，childNodes屬性會自動刷新。

firstChild屬性：
由于文本節(jié)點和屬性節(jié)點都不可能再包含任何子節(jié)點，
所以他們的firstChild屬性永遠返回一個空數組。如果沒有子節(jié)點，將返回null;
node.firstChild  等價于  node.childNodes[0]  ;
firstChild屬性是一個只讀屬性。

lastChild屬性：
由于文本節(jié)點和屬性節(jié)點都不可能再包含任何子節(jié)點，
所以他們的lastChild屬性永遠返回一個空數組。如果沒有子節(jié)點，將返回null;
node.lastChild  等價于  node.childNodes[ node.childNodes.length - 1 ]  ;
lastChild屬性是一個只讀屬性。

nextSibling 屬性：
返回目標節(jié)點的下一個兄弟節(jié)點。
如果目標節(jié)點后面沒有同屬于一個父節(jié)點的節(jié)點，nextSibling 將返回null ；
nextSibling 屬性是一個只讀屬性。

previousSibling屬性：
返回目標節(jié)點的前一個兄弟節(jié)點。
如果目標節(jié)點前面沒有同屬于一個父節(jié)點的節(jié)點，previousSibling 將返回null ；
previousSibling 屬性是一個只讀屬性。

parentNode 屬性：
注：parentNode屬性返回的節(jié)點永遠是一個元素節(jié)點，因為只有元素節(jié)點才有可能有子節(jié)點。
當然有個例外：
document節(jié)點，他沒有父節(jié)點。所以document節(jié)點的parentNode屬性將返回null；
parentNode 屬性是一個只讀屬性。

好了，DOM的常用屬性和方法說到這里，了解這些方法的使用，
相信大家的DOM編程技術會有很大的提高。

第一季說到這里。希望大家都有所收獲。
第二季我們將開始實戰(zhàn)演練。  開始編寫自己的js程序了。。。
成就感。。。^_^。。。

您可能感興趣的文章: