今天我們講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下一頁閱讀全文