阿蜜果

你所浪費的今天，是昨天死去的人奢望的明天。
你所厭惡的現(xiàn)在，是未來的你回不去的曾經(jīng)。

posts - 297, comments - 1618, trackbacks - 0

蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）

蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）

——DOM的重要屬性

文：阿蜜果/2011-11-1

轉(zhuǎn)載請注明出處

1、 DOM的重要屬性

1.1 childNodes屬性

該屬性讓開發(fā)人員可以將給定節(jié)點樹里把任何一個元素的所有子節(jié)點檢索出來。它返回一個數(shù)組，這個數(shù)組包含給點元素節(jié)點的所有子元素。使用語法參考如下：

element.childNodes;

例如如下JavaScript代碼countBodyChildNodes()方法遍歷body元素的所有子元素，并打印出子元素個數(shù)，該方法在瀏覽器窗口的onload事件發(fā)生時執(zhí)行：

<html>

<head>

<title>childNodes測試</title>

window.onload = countBodyChildNodes;

function countBodyChildNodes()

{

var bodyElement = document.getElementsByTagName("body")[0];

var items = bodyElement.childNodes;

alert(items.length);

}

</script>

</head>

<body>

childNodes測試

<ul>

</ul>

</body>

<html>

測試后可知彈出窗口顯示的數(shù)字為2。一個是“ul”元素節(jié)點，一個是“childNodes測試”文本節(jié)點。

【提示】IE會忽略節(jié)點之間生成的空白文本節(jié)點（比如換行字符），而 Mozilla、FireFo瀏覽器不這么做。因此，兩者的輸出結(jié)果很多時候是不同的。可參考《IE和FireFox中的childNodes的區(qū)別》

【提示】若測試時提示JS報錯“childNodes為空或不是對象”，表示調(diào)用childNodes屬性的節(jié)點為空，例如筆者將body手誤寫成body1，就會出現(xiàn)該錯誤提示。

1.2 nodeType屬性

由childNodes返回的數(shù)組包含所有類型的節(jié)點，除了所有的元素節(jié)點，還包括所有的屬性節(jié)點和文本節(jié)點。若想?yún)^(qū)分節(jié)點的類型，可使用nodeType屬性，使用語法參考如下：

node.nodeType

nodeType有12種可取值，只有3種具有實用價值：

l 元素節(jié)點的nodeType屬性值為1；

l 屬性節(jié)點的nodeType屬性值為2；

l 文本節(jié)點的nodeType屬性值為3。

我們可將1.1中的實例進行改造，循環(huán)遍歷子節(jié)點，打印出節(jié)點類型，修改JavaScript代碼：

window.onload = printProperty;

function printProperty()

{

var bodyElement = document.getElementsByTagName("body")[0];

var items = bodyElement.childNodes;

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

alert(items[i].nodeType);

}

</script>

測試可發(fā)現(xiàn)彈出的兩口提示框的值分別為3（“childNodes測試”為文本節(jié)點）和1（ul為元素節(jié)點）。通過nodeType屬性，我們可以編寫出只對元素節(jié)點處理的countBodyChildNodes()方法。

1.3 nodeValue屬性

該屬性可以用于獲取某個節(jié)點的值，或設置某個節(jié)點的值。

l 元素節(jié)點的 nodeValue 是 null；

l 文本節(jié)點的 nodeValue 是文本自身；

l 屬性節(jié)點的 nodeValue 是屬性的值。

使用語法參考如下：

node.nodeValue

在如下JS代碼中，打印body的每個子元素的nodeType和nodeValue屬性，并將第二個節(jié)點（元素節(jié)點）的文本值進行修改：

<html>

<head>

<title>nodeValue測試</title>

window.onload = printProperty;

function printProperty()

{

var bodyElement = document.getElementsByTagName("body")[0];

var items = bodyElement.childNodes;

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

alert(items[i].nodeType + "," + items[i].nodeValue);

if (i == 1) {

items[i].firstChild.nodeValue = "修改后的文本值";

}

</script>

</head>

<body>

nodeValue測試

<ul>

</ul>

</body>

<html>

運行后可看到id為description的元素節(jié)點的值被修改，提示框信息為:

3,nodeValue測試

1,null

1.4 nodeName屬性

nodeName 屬性規(guī)定節(jié)點的名稱，該屬性有如下規(guī)定：

l nodeName 是只讀的；

l 元素節(jié)點的 nodeName 與標簽名相同（大寫字母）；

l 屬性節(jié)點的 nodeName 是屬性的名稱

l 文本節(jié)點的 nodeName 永遠是 #text；

l 文檔節(jié)點的 nodeName 永遠是 #document。

如下JS代碼使用提示框打印出body的三個子節(jié)點（分別為文本節(jié)點、元素節(jié)點、元素節(jié)點）的節(jié)點名稱：

<html>

<head>

<title>nodeName測試</title>

window.onload = printProperty;

function printProperty()

{

var bodyElement = document.getElementsByTagName("body")[0];

var items = bodyElement.childNodes;

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

alert(items[i].nodeName);

}

</script>

</head>

<body>

nodeName測試

<ul>

</ul>

</body>

<html>

提示框先后提示的信息如下：

#text

#P

#UL

1.5 fisrtChild屬性

數(shù)組的childNodes[0]用于訪問數(shù)組的第一個元素，有一個更直觀易懂的寫法，即firstChild屬性，語法如下：

node.firstChild

如下JS代碼改變id為description元素的值：

<html>

<head>

<title>firstChild測試</title>

window.onload = changeDescription;

function changeDescription()

{

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

description.firstChild.nodeValue = "firstChild測試";

}

</script>

</head>

<body>

</body>

<html>

頁面顯示被更改為：

firstChild測試

“description.firstChild.nodeValue”這一句與如下語句達到同樣的功能：

description.childNodes[0].nodeValue = "firstChild測試";

1.6 lastChild屬性

與firstChild對應，DOM還提供了lastChild屬性，用于獲取childNodes數(shù)組的最后一個元素，語法如下：

node.lastChild

該語句與如下語句等價：

node.childNodes[node.childNodes.length - 1]

當某個元素只有一個子節(jié)點時，使用firstChild和lastChild屬性得到的是同一個節(jié)點。

2、參考文檔

（1）《DOM屬性(childNodes, nodeType, nodeValue, nodeName, firstChild, lastChild)》

http://www.cnblogs.com/chenjmdg/archive/2009/10/27/1590652.html

（2）《XML DOM childNodes屬性》

http://www.w3school.com.cn/xmldom/prop_element_childnodes.asp

（3）《IE和FireFox中的childNodes的區(qū)別》

http://wenku.baidu.com/view/046be91cfad6195f312ba69b.html

（4）《JavaScript DOM編程藝術(shù)》 [英] Jeremy Keith 著，楊濤、王曉云等譯，人民郵電出版社出版

posted on 2011-11-01 10:13 阿蜜果閱讀(2242) 評論(4) 編輯收藏所屬分類: Javascript

FeedBack:

# re: 蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）[未登錄]

2011-11-06 15:43 | alex

該屬性讓開發(fā)人員可以將給定節(jié)點樹里把任何一個元素的所有節(jié)點檢索出來。
這句話是不是遺漏了一個字？

該屬性讓開發(fā)人員可以將給定節(jié)點樹里把任何一個元素的所有（子）節(jié)點檢索出來。回復更多評論

# re: 蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）

2011-11-06 17:46 | 阿蜜果

@alex
Thanks，：）回復更多評論

# re: 蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）[未登錄]

2011-11-06 19:03 | alex

@阿蜜果
我應該感謝您寫了這么好的文章 ^_^ 回復更多評論

# re: 蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）

2011-11-11 13:48 | tbw淘寶

真不錯回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 蜜果私塾：在JavaScript中使用適配器模式蜜果私塾：在JavaScript中使用工廠模式蜜果私塾：在JavaScript中使用單例模式蜜果私塾：JavaScript代碼的壞味道【不斷補充】蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（1） js操作iframe的一些知識 JavaScript學習筆記——繼承 JavaScript學習筆記——瀏覽器中的JavaScript