快捷導(dǎo)航

Javascript入門學(xué)習(xí)第九篇 Javascript DOM 總結(jié)第2/2頁

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

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

6，    設(shè)置/獲取屬性節(jié)點(diǎn)。
setAttribute();//設(shè)置
例子：
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é)點(diǎn)。
getElementById();
返回一個對象，對象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。

getElementsByTagName() 查找標(biāo)簽名的所有元素。
返回一個集合，可以用循環(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é)點(diǎn)。
返回boolean類型。
文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)不可能有子節(jié)點(diǎn)，所以他們的hasChildNodes 永遠(yuǎn)返回false；
hasChildNodes經(jīng)常跟 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é)點(diǎn)的名字。
如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，那么返回這個元素的名字。此時，相當(dāng)于tagName屬性。
比如：
<p>aaaa</p>  : 則返回 p ;
如果是屬性節(jié)點(diǎn)，nodeName將返回這個屬性的名字。
如果是文本節(jié)點(diǎn)，nodeName將返回一個#text的字符串。

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

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

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

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

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

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

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

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

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

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

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

parentNode 屬性：
注：parentNode屬性返回的節(jié)點(diǎn)永遠(yuǎn)是一個元素節(jié)點(diǎn)，因?yàn)橹挥性毓?jié)點(diǎn)才有可能有子節(jié)點(diǎn)。
當(dāng)然有個例外：
document節(jié)點(diǎn)，他沒有父節(jié)點(diǎn)。所以document節(jié)點(diǎn)的parentNode屬性將返回null；
parentNode 屬性是一個只讀屬性。

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

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

上一頁 12閱讀全文

您可能感興趣的文章: