Javascript入門(mén)學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說(shuō)明第1/2頁(yè)
更新時(shí)間:2008年07月06日 10:02:53 作者:
上2篇文章我們講了 用dom方式 創(chuàng)建節(jié)點(diǎn),復(fù)制節(jié)點(diǎn),插入節(jié)點(diǎn), 刪除節(jié)點(diǎn),替換節(jié)點(diǎn),查找節(jié)點(diǎn),獲取屬性等。。。
今天我們講DOM屬性。
前面其實(shí)我們已經(jīng)碰過(guò)DOM屬性了。
比如:
nodeName,nodeType…..今天我們?cè)敿?xì)的講解下。
1,nodeName屬性 : 節(jié)點(diǎn)的名字。
如果節(jié)點(diǎn)是元素節(jié)點(diǎn),那么返回這個(gè)元素的名字。此時(shí),相當(dāng)于tagName屬性。
比如:
<p>aaaa</p> : 則返回 p ;
如果是屬性節(jié)點(diǎn),nodeName將返回這個(gè)屬性的名字。
如果是文本節(jié)點(diǎn),nodeName將返回一個(gè)#text的字符串。
另外我要說(shuō)的是: nodeName屬性是一個(gè)只讀屬性,不能進(jìn)行設(shè)置.(寫(xiě))
它返回 大寫(xiě)字母的值。
2,,nodeType屬性 : 返回一個(gè)整數(shù),代表這個(gè)節(jié)點(diǎn)的類型。
我們常用的3中類型:
nodeType == 1 : 元素節(jié)點(diǎn)
nodeType == 2 : 屬性節(jié)點(diǎn)
nodeType == 3 : 文本節(jié)點(diǎn)
如果想記住的話,我們可以這么去記:
比如: <p title="cssrain" >test</p> 從前往后讀: 你會(huì)發(fā)現(xiàn) 先是元素節(jié)點(diǎn)(1),然后是屬性節(jié)點(diǎn)(2),最后是文本節(jié)點(diǎn)(3),這樣你就很容易記住了 nodeType分別代表什么類型了。(我總結(jié)的一點(diǎn)小技巧, ^_^。)
nodeType屬性經(jīng)常跟 if 配合使用,以確保不會(huì)在錯(cuò)誤的節(jié)點(diǎn)類型上 執(zhí)行錯(cuò)誤的操作。
比如:
function cs_demo(mynode){
if(mynode.nodeType == 1){
mynode.setAttribute("title","demo");
}
}
代碼解釋: 先檢查mynode的nodeType屬性,以確保它所代表的節(jié)點(diǎn)確實(shí)是 一個(gè)元素節(jié)點(diǎn)。
和nodeName屬性一樣,他也是只讀屬性,不能進(jìn)行設(shè)置.(寫(xiě))。
3,nodeValue屬性 : 返回一個(gè)字符串,這個(gè)節(jié)點(diǎn)的值。
如果節(jié)點(diǎn)是元素節(jié)點(diǎn),那么返回null;(注意下)
如果是屬性節(jié)點(diǎn),nodeValue將返回這個(gè)屬性的值。
如果是文本節(jié)點(diǎn),nodeValue將返回這個(gè)文本節(jié)點(diǎn)的內(nèi)容。
比如:
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
var c= document.getElementById("c");
alert( c.nodeValue );//返回null
</SCRIPT>
nodeValue是一個(gè)可以讀、寫(xiě)的屬性。 但它不能設(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一般只用來(lái)設(shè)置 文本節(jié)點(diǎn)的值。如果要刷新屬性節(jié)點(diǎn)的值,一般使用setAttribute().
您可能感興趣的文章:
- js遍歷子節(jié)點(diǎn)子元素附屬性及方法
- JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
- JS獲取節(jié)點(diǎn)的兄弟,父級(jí),子級(jí)元素的方法
- JS獲取父節(jié)點(diǎn)方法
- Javascript removeChild()刪除節(jié)點(diǎn)及刪除子節(jié)點(diǎn)的方法
- javascript獲取網(wǎng)頁(yè)中指定節(jié)點(diǎn)的父節(jié)點(diǎn)、子節(jié)點(diǎn)的方法小結(jié)
- JavaScript 用cloneNode方法克隆節(jié)點(diǎn)的代碼
- javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法
- js查找父節(jié)點(diǎn)的簡(jiǎn)單方法
- JavaScript實(shí)現(xiàn)body內(nèi)任意節(jié)點(diǎn)的自定義屬性功能示例
相關(guān)文章
簡(jiǎn)單的ajax連接庫(kù)分享(不用jquery的ajax)
自己寫(xiě)了一個(gè)簡(jiǎn)單的ajax連接庫(kù),沒(méi)有使用jquery的ajax,這個(gè)代碼要比jquery輕量,大家參考使用吧,2014-01-01
一起來(lái)學(xué)習(xí)JavaScript的語(yǔ)法基礎(chǔ)
這篇文章主要為大家詳細(xì)介紹了JavaScript的語(yǔ)法基礎(chǔ),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03
slice函數(shù)的用法 之不錯(cuò)的應(yīng)用
slice函數(shù)的用法 之不錯(cuò)的應(yīng)用...2006-12-12
關(guān)于eval 與new Function 到底該選哪個(gè)?
本篇文章小編將為大家介紹,關(guān)于eval 與new Function 到底該選哪個(gè)?有需要的朋友可以參考一下2013-04-04
Javascript模塊化編程(一)模塊的寫(xiě)法最佳實(shí)踐
Javascript模塊化編程,已經(jīng)成為一個(gè)迫切的需求。理想情況下,開(kāi)發(fā)者只需要實(shí)現(xiàn)核心的業(yè)務(wù)邏輯,其他都可以加載別人已經(jīng)寫(xiě)好的模塊但是,Javascript不是一種模塊化編程語(yǔ)言,它不支持類class,更遑論模塊module了2013-01-01
Javascript中arguments和arguments.callee的區(qū)別淺析
這篇文章主要介紹了Javascript中arguments和arguments.callee的區(qū)別淺析,本文用一個(gè)實(shí)例來(lái)理解它們的區(qū)別,需要的朋友可以參考下2015-04-04

