javascript中的NodeType、NodeValue、NodeName實例測試

javascript中的firstChild是怎么執行的?

<ul id="contain">            <li><a href="http:/www.iwcn.net">Microsotf</a></li>            <li><a href="http:/www.iwcn.net">Yahoo</a></li>            <li><a href="http:/www.iwcn.net">Easy</a></li>            <li><a href="www.iwcn.net">W3c/Javascript</a></li>            <li><a href="www.iwcn.net">Design|Source</a></li> </ul>var container=document.getElementById("contain");  使用firstChild是ul元素下的第一個子節點(包括文本節點、HTML元素節點)。所以按照標準,你這個例子在Firefox和Opera中,container.firstChild應該獲取空白符的文本節點。而IE不是這樣實現的,如果文本節點只包含空白符,IE會直接跳過。所以在IE中通過container.firstChild你獲得的是li元素節點。 2、firstChild是元素的所有子節點(childNodes)中的第一個子節點,如果元素的第一個子節點沒有變化,則firstChild這個引用也不會有變化。連續獲取兩次firstChild是同一個對象。  補充:你要了解引用與對象的關系。firstChild是指向元素首個子節點的引用。你給的xx函數中,將firstChild引用指向的對象append到父對象的末尾,原來firstChild引用的對象就跳到了container對象的末尾,而firstChild就指向了本來是排在第二個的元素對象。如此循環下去,鏈接就逐個往后跳了。  01

<body>

02

<ul id="action">

03

<li title="第一段文字">第一個</li>

04

<li title="第二段文字">第二個</li>

05

</ul>

06

<script type="text/javascript">

07

var attr_p = document.getElementById("action");

08

alert(attr_p.childNodes[1].childNodes[0].nodeValue);

09

</script>

10

</body>

如 果要取得id為action的ul的第一個li內的文本節點(如取得:第一個),可以使 用…childNodes[1].childNodes[0].nodeValue這種方法找到,使用…childNodes[1].firstChild.nodeValue同樣可以找到第一個li的文本節點,

結論childNodes[0]等價于firstChild,無論何時何地,重要需要訪問childNodes[]數組的第一個元素,我們就可以把它寫成firstChild,DOM還提供一個與之對應的lastChild屬性。

需要注意的是,ff的空格節點問題,可以使用nodeType屬性對節點類型判斷,直到發現元素節點為止

*************************************************************

nodeName、nodeValue 以及 nodeType 包含有關于節點的信息。

(一)nodeName 屬性含有某個節點的名稱。

元素節點的 nodeName 是標簽名稱

屬性節點的 nodeName 是屬性名稱

文本節點的 nodeName 永遠是 #text

文檔節點的 nodeName 永遠是 #document

注釋:nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的

(二)nodeValue

對于文本節點,nodeValue 屬性包含文本。

對于屬性節點,nodeValue 屬性包含屬性值。

nodeValue 屬性對于文檔節點和元素節點是不可用的。

(三)nodeType

nodeType 屬性可返回節點的類型。

最重要的節點類型是:

元素類型 節點類型

元素element 1

屬性attr 2

文本text 3

注釋comments   8

文檔document   9

在JavaScript中,存在有nodeName 、nodeType、 nodeValue這三個屬性,今天我們來了解下JavaScript中的nodeName 、nodeType 、nodeValue區別

nodeName

nodeName 屬性含有某個節點的名稱。

* 元素節點的 nodeName 是標簽名稱

* 屬性節點的 nodeName 是屬性名稱

* 文本節點的 nodeName 永遠是 #text

* 文檔節點的 nodeName 永遠是 #document

注釋:nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的.

nodeValue

對于文本節點,nodeValue 屬性包含文本。

對于屬性節點,nodeValue 屬性包含屬性值。

nodeValue 屬性對于文檔節點和元素節點是不可用的。

nodeType

nodeType 屬性可返回節點的類型。

最重要的節點類型是:

元素類型 節點類型

元素element 1

屬性attr 2

文本text 3

注釋comments 8

文檔document 9

HTML文件:

Html代碼  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM標準</title>

<script type="text/javascript" src="test.js"></js>

</head>

<body>

<h1 id="h1">An HTML Document</h1>

<p id="p1">This is a <i>W3C HTML DOM</i> document.</p>

<p><input id="btnDemo1" type="button" value="取H1 Element節點值"></p>

<p><input id="btnDemo2" type="button" value="取H1 Element節點文本"></p>

<p><input id="btnDemo3" type="button" value="取Document Element節點文本"></p>

<p><input type="button" alt="這是個演示按鈕" title="演示按鈕提示標題" name="btnShowAttr" id="btnShowAttr" value="按鈕節點演示" /></p>

</body>

</html>

JS:

Js代碼  

function showElement(){

var element=document.getElementById("h1");//h1是一個<h1>標簽

alert("nodetype:"+element.nodeType);//nodeType=1

alert("nodeName:"+element.nodeName);

alert("nodeValue:"+element.nodeValue); //null

alert("element:"+element);

}

function showText(){

var element=document.getElementById("h1");

var text=element.childNodes[0];

alert("nodeType:"+text.nodeType);  //nodeType=3

alert("nodeValue:"+text.nodeValue);  //文本節點的nodeValue是其文本內容

text.nodeValue=text.nodeValue+"abc"; //文本內容添加修改刪除等等。

alert("nodeName:"+text.nodeName);

alert(text.data);   //data同樣是其內容,這個屬性下同樣可以增刪改。

}

function showDocument(){

alert("nodeType:"+document.nodeType);  //9

alert("nodeName:"+document.nodeName);

alert(document);

}

function showAttr(){

var btnShowAttr=document.getElementById("btnShowAttr"); //演示按鈕,有很多屬性

var attrs=btnShowAttr.attributes;

for(var i=0;i<attrs.length ;i++){

var attr=attrs[i];

alert("nodeType:"+attr.nodeType); //attribute 的nodeType=2

alert("attr:"+attr);

alert("attr.name:"+attr.name+"="+attr.value);

}

}

function demo(){

var btnDemo1=document.getElementById("btnDemo1");

btnDemo1.onclick=showElement; //按鈕1取節點nodetype值

var btnDemo2=document.getElementById("btnDemo2");

btnDemo2.onclick=showText;

var btnDemo3=document.getElementById("btnDemo3");

btnDemo3.onclick=showDocument;

var btnShowAttr=document.getElementById("btnShowAttr");

btnShowAttr.onclick=showAttr;

}

window.onload=demo;

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>

Js代碼  

<SCRIPT LANGUAGE="JavaScript">

var c= document.getElementById("c");

alert(  c.nodeValue  );//返回null

nodeValue是一個可以讀、寫的屬性。 但它不能設置元素節點的值。

再看看下面的例子:

<div id="c">aaaaaaaaaaaaaaaa</div>

Js代碼  

var c= document.getElementById("c");

c.nodeValue =" dddddddddddd"; //不能設置

//alert( c.firstChild.nodeValue ) //元素節點 包括屬性節點和文本節點。

c.firstChild.nodeValue =  "test"http://能設置

當然我們為了確保能正確運行:可以加一段代碼:

<div id="c">aaaaaaaaaaaaaaaa</div>

Js代碼  

var c= document.getElementById("c");

c.nodeValue =" dddddddddddd"; //不能設置

//alert( c.firstChild.nodeValue )

if( c.firstChild.nodeType==3 ){ //判斷是不是 文本節點

c.firstChild.nodeValue =  "test"http://能設置

}

//可以看出,如果要設置元素節點,不能直接設置,而必須先使用firstChild或者lastChild等 然后設置nodeValue.

nodeValue一般只用來設置 文本節點的值。如果要刷新屬性節點的值,一般使用setAttribute().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM標準</title>

</head>

<body>

<h1 id="h1">An HTML Document</h1>

<p id="p1">

This is a <i>W3C HTML DOM</i>

document.

</p>

<p>

<input id="btnDemo1" type="button" value="取H1 Element節點值">

</p>

<p>

<input id="btnDemo2" type="button" value="取H1 Element節點文本">

</p>

<p>

<input id="btnDemo3" type="button" value="取Document Element節點文本">

</p>

<p>

<input type="button" alt="這是個演示按鈕" title="演示按鈕提示標題" name="btnShowAttr" id="btnShowAttr" value="按鈕節點演示" />

</p>

<script type="text/javascript">

function showElement(){

var element = document.getElementById("h1");//h1是一個<h1>標簽

console.log("nodetype:" + element.nodeType);//nodeType=1

console.log("nodeName:" + element.nodeName);

console.log("nodeValue:" + element.nodeValue); //null

console.log("element:" + element);

}

function showText(){

var element = document.getElementById("h1");

var text = element.childNodes[0];

console.log("nodeType:" + text.nodeType); //nodeType=3

console.log("nodeValue:" + text.nodeValue); //文本節點的nodeValue是其文本內容

text.nodeValue = text.nodeValue + "abc"; //文本內容添加修改刪除等等。

console.log("nodeName:" + text.nodeName);

console.log(text.data); //data同樣是其內容,這個屬性下同樣可以增刪改。

}

function showDocument(){

console.log("nodeType:" + document.nodeType); //9

console.log("nodeName:" + document.nodeName);

console.log(document);

}

function showAttr(){

var btn = document.getElementById("btnShowAttr");//演示按鈕,有很多屬性

console.log(btn);

var attrs = btn.attributes;

console.log(attrs);

for (var i = 0; i < attrs.length; i++) {

console.log(attrs[i].nodeType);//attribute 的nodeType=2

console.log(attrs[i].nodeName);

console.log(attrs[i].nodeValue);

console.log(attrs[i].name);

console.log(attrs[i].value);

}

}

function demo(){

var btnDemo1 = document.getElementById("btnDemo1");

btnDemo1.onclick = showElement; //按鈕1取節點nodetype值

var btnDemo2 = document.getElementById("btnDemo2");

btnDemo2.onclick = showText;

var btnDemo3 = document.getElementById("btnDemo3");

btnDemo3.onclick = showDocument;

var btnShowAttr = document.getElementById("btnShowAttr");

btnShowAttr.onclick = showAttr;

}

window.onload = demo;

</script>

</body>

</html>

免責聲明:本文僅代表文章作者的個人觀點,與本站無關。其原創性、真實性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容文字的真實性、完整性和原創性本站不作任何保證或承諾,請讀者僅作參考,并自行核實相關內容。

http://www.eoauzbr.cn/style/images/nopic.gif
?
分享
評論
首頁
山东十一选五遗漏 2019年新疆35选7 摩登5分赛车计划 股票涨跌的意义 重庆快乐十分预测推荐 大乐透周六走势图 基金配资申请 云南快乐十分走势图一定牛 澳洲幸运五开奖记录中国体彩 足球彩票比分直播 原千岁溺爱子中文字幕 河北11选5直选遗漏 青海十一选五开奖结果遗漏图 1分11选5安卓版下载 股票配资杠杆 老十一选五开奖 杠杆炒股网站ˉ杨方配资