蜜果私塾：DOM，黑色藝術的終結者（2）

——DOM的重要屬性

文：阿蜜果/2011-11-1

轉載請注明出處

1、 DOM的重要屬性

1.1 childNodes屬性

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

element.childNodes;

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

<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>

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

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

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

1.2 nodeType屬性

由childNodes返回的數組包含所有類型的節點，除了所有的元素節點，還包括所有的屬性節點和文本節點。若想區分節點的類型，可使用nodeType屬性，使用語法參考如下：

node.nodeType

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

l 元素節點的nodeType屬性值為1；

l 屬性節點的nodeType屬性值為2；

l 文本節點的nodeType屬性值為3。

我們可將1.1中的實例進行改造，循環遍歷子節點，打印出節點類型，修改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>

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

1.3 nodeValue屬性

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

l 元素節點的 nodeValue 是 null；

l 文本節點的 nodeValue 是文本自身；

l 屬性節點的 nodeValue 是屬性的值。

使用語法參考如下：

node.nodeValue

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

<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的元素節點的值被修改，提示框信息為:

3,nodeValue測試

1,null

1.4 nodeName屬性

nodeName 屬性規定節點的名稱，該屬性有如下規定：

l nodeName 是只讀的；

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

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

l 文本節點的 nodeName 永遠是 #text；

l 文檔節點的 nodeName 永遠是 #document。

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

<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

#UL

1.5 fisrtChild屬性

數組的childNodes[0]用于訪問數組的第一個元素，有一個更直觀易懂的寫法，即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數組的最后一個元素，語法如下：

node.lastChild

該語句與如下語句等價：

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

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

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的區別》

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

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

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

FeedBack:

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

2011-11-06 15:43 | alex

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

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

# re: 蜜果私塾：DOM，黑色藝術的終結者（2）

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

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

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

2011-11-06 19:03 | alex

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

# re: 蜜果私塾：DOM，黑色藝術的終結者（2）

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

真不錯回復更多評論

新用戶注冊刷新評論列表


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




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

2011年11月

日

一

二

三

四

五

六

      生活將我們磨圓，是為了讓我們滾得更遠——“圓”來如此。
      我的作品：
  玩轉Axure RP （2015年12月出版）

Power Designer系統分析與建模實戰（2015年7月出版）

Struts2+Hibernate3+Spring2 （2010年5月出版）

1、 DOM的重要屬性

1.1 childNodes屬性

1.2 nodeType屬性

1.3 nodeValue屬性

1.4 nodeName屬性

1.5 fisrtChild屬性

1.6 lastChild屬性

2、參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊

關注blog

積分與排名

最新評論

閱讀排行榜

評論排行榜

1、 DOM的重要屬性

1.1 childNodes屬性

1.2 nodeType屬性

1.3 nodeValue屬性

1.4 nodeName屬性

1.5 fisrtChild屬性

1.6 lastChild屬性

2、 參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊

關注blog

積分與排名

最新評論

閱讀排行榜

評論排行榜

2、參考文檔