DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> Javascript入門學習第八篇 js dom節點屬性說明第1/2頁
Javascript入門學習第八篇 js dom節點屬性說明第1/2頁
編輯:JavaScript基礎知識     
 
今天我們講DOM屬性。
前面其實我們已經碰過DOM屬性了。
比如:
nodeName,nodeType…..今天我們詳細的講解下。


1,nodeName屬性  : 節點的名字。
如果節點是元素節點,那麼返回這個元素的名字。此時,相當於tagName屬性。
比如:
<p>aaaa</p>  : 則返回 p ;
如果是屬性節點,nodeName將返回這個屬性的名字。
如果是文本節點,nodeName將返回一個#text的字符串。

另外我要說的是: nodeName屬性是一個只讀屬性,不能進行設置.(寫)
它返回 大寫字母的值。

2,,nodeType屬性 : 返回一個整數,代表這個節點的類型。
我們常用的3中類型:
nodeType == 1  : 元素節點
nodeType == 2  : 屬性節點
nodeType == 3  : 文本節點
如果想記住的話,我們可以這麼去記:
比如: <p  title="cssrain" >test</p>   從前往後讀: 你會發現 先是元素節點(1),然後是屬性節點(2),最後是文本節點(3),這樣你就很容易記住了 nodeType分別代表什麼類型了。(我總結的一點小技巧, ^_^。)

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

3,nodeValue屬性 : 返回一個字符串,這個節點的值。
如果節點是元素節點,那麼返回null;(注意下)
如果是屬性節點,nodeValue將返回這個屬性的值。
如果是文本節點,nodeValue將返回這個文本節點的內容。
比如:
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
 var c= document.getElementById("c");
 alert(  c.nodeValue  );//返回null
</SCRIPT>
nodeValue是一個可以讀、寫的屬性。 但它不能設置元素節點的值。
再看看下面的例子:
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
 var c= document.getElementById("c");
  c.nodeValue =" dddddddddddd"; //不能設置
  //alert( c.firstChild.nodeValue ) //元素節點 包括屬性節點和文本節點。
  c.firstChild.nodeValue =  "test"//能設置
</SCRIPT>
當然我們為了確保能正確運行:可以加一段代碼:
<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 ){ //判斷是不是 文本節點
  c.firstChild.nodeValue =  "test"//能設置
  }
</SCRIPT>
//可以看出,如果要設置元素節點,不能直接設置,而必須先使用firstChild或者lastChild等 然後設置nodeValue.
nodeValue一般只用來設置 文本節點的值。如果要刷新屬性節點的值,一般使用setAttribute().
當前1/2頁 12下一頁閱讀全文
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved