蜜果私塾：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 阿蜜果阅读(2193) 评论(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、参考文档

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

最新评论

阅读排行榜

评论排行榜

1、 DOM的重要属性

1.1 childNodes属性

1.2 nodeType属性

1.3 nodeValue属性

1.4 nodeName属性

1.5 fisrtChild属性

1.6 lastChild属性

2、 参考文档

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

最新评论

阅读排行榜

评论排行榜

2、参考文档