Javascript入門學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說明第1/2頁
更新時(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)碰過DOM屬性了。
比如:
nodeName,nodeType…..今天我們詳細(xì)的講解下。
1,nodeName屬性 : 節(jié)點(diǎn)的名字。
如果節(jié)點(diǎn)是元素節(jié)點(diǎn),那么返回這個元素的名字。此時(shí),相當(dāng)于tagName屬性。
比如:
<p>aaaa</p> : 則返回 p ;
如果是屬性節(jié)點(diǎn),nodeName將返回這個屬性的名字。
如果是文本節(jié)點(diǎn),nodeName將返回一個#text的字符串。
另外我要說的是: nodeName屬性是一個只讀屬性,不能進(jìn)行設(shè)置.(寫)
它返回 大寫字母的值。
2,,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)(1),然后是屬性節(jié)點(diǎn)(2),最后是文本節(jié)點(diǎn)(3),這樣你就很容易記住了 nodeType分別代表什么類型了。(我總結(jié)的一點(diǎn)小技巧, ^_^。)
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è)置.(寫)。
3,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().
您可能感興趣的文章:
- js遍歷子節(jié)點(diǎn)子元素附屬性及方法
- JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
- JS獲取節(jié)點(diǎn)的兄弟,父級,子級元素的方法
- JS獲取父節(jié)點(diǎn)方法
- Javascript removeChild()刪除節(jié)點(diǎn)及刪除子節(jié)點(diǎn)的方法
- javascript獲取網(wǎng)頁中指定節(jié)點(diǎn)的父節(jié)點(diǎn)、子節(jié)點(diǎn)的方法小結(jié)
- JavaScript 用cloneNode方法克隆節(jié)點(diǎn)的代碼
- javascript獲取dom的下一個節(jié)點(diǎn)方法
- js查找父節(jié)點(diǎn)的簡單方法
- JavaScript實(shí)現(xiàn)body內(nèi)任意節(jié)點(diǎn)的自定義屬性功能示例
相關(guān)文章
一起來學(xué)習(xí)JavaScript的語法基礎(chǔ)
這篇文章主要為大家詳細(xì)介紹了JavaScript的語法基礎(chǔ),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03
關(guān)于eval 與new Function 到底該選哪個?
本篇文章小編將為大家介紹,關(guān)于eval 與new Function 到底該選哪個?有需要的朋友可以參考一下2013-04-04
Javascript模塊化編程(一)模塊的寫法最佳實(shí)踐
Javascript模塊化編程,已經(jīng)成為一個迫切的需求。理想情況下,開發(fā)者只需要實(shí)現(xiàn)核心的業(yè)務(wù)邏輯,其他都可以加載別人已經(jīng)寫好的模塊但是,Javascript不是一種模塊化編程語言,它不支持類class,更遑論模塊module了2013-01-01
Javascript中arguments和arguments.callee的區(qū)別淺析
這篇文章主要介紹了Javascript中arguments和arguments.callee的區(qū)別淺析,本文用一個實(shí)例來理解它們的區(qū)別,需要的朋友可以參考下2015-04-04

