蜜果私塾：DOM，黑色艺术的终结者（2）

蜜果私塾：DOM，黑色艺术的终结者（2）

蜜果私塾：DOM，黑色艺术的终结者（2）

——DOM的重要属性

文：阿蜜果/2011-11-1

转载请注明出处

1、 DOM的重要属性

1.1 childNodes属性

该属性让开发人员可以将给定节点树里把任何一个元素的所有子节点检索出来。它返回一个数组，这个数组包含给点元素节点的所有子元素。使用语法参考如下：

element.childNodes;

例如如下JavaScript代码countBodyChildNodes()方法遍历body元素的所有子元素，并打印出子元素个数，该方法在浏览器窗口的onload事件发生时执行：

< html >
     < head >
         < title > childNodes测试 </ title >
         < script  type ="text/javascript" >
            window.onload = countBodyChildNodes;
            function countBodyChildNodes()
            {
                var bodyElement = document.getElementsByTagName("body")[0];
                var items = bodyElement.childNodes;
                alert(items.length);
            }
         </ script >
     </ head >
     < body >
        childNodes测试
         < ul >
            < li >< a  href ="test1.jpg" > 图片1 </ a ></ li >
            < li >< a  href ="test2.jpg" > 图片2 </ a ></ li >
            < li >< a  href ="test3.jpg" > 图片3 </ a ></ li >
         </ 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代码：

< script  type ="text/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 >
         < script  type ="text/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 + "," + items[i].nodeValue);
                    if (i == 1) {
                        items[i].firstChild.nodeValue = "修改后的文本值";
                    }
                }
            }
         </ script >
     </ head >
     < body >
        nodeValue测试
         < p  id ="description" > 测试 </ p >
         < ul >
            < li >< a  href ="test1.jpg" > 图片1 </ a ></ li >
            < li >< a  href ="test2.jpg" > 图片2 </ a ></ li >
            < li >< a  href ="test3.jpg" > 图片3 </ a ></ li >
         </ ul >
     </ body >
< html >

运行后可看到id为description的元素节点的值被修改，提示框信息为:

3,nodeValue测试
1,null
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 >
         < script  type ="text/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].nodeName);
                }
            }
         </ script >
     </ head >
     < body >
        nodeName测试
         < p  id ="description" > 测试 </ p >
         < ul >
            < li >< a  href ="test1.jpg" > 图片1 </ a ></ li >
            < li >< a  href ="test2.jpg" > 图片2 </ a ></ li >
            < li >< a  href ="test3.jpg" > 图片3 </ a ></ li >
         </ ul >
     </ body >
< html >

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

#text
#P
#UL

 

1.5 fisrtChild属性

         数组的childNodes[0]用于访问数组的第一个元素，有一个更直观易懂的写法，即firstChild属性，语法如下：

node.firstChild

      如下JS代码改变id为description元素的值：

< html >
     < head >
         < title > firstChild测试 </ title >
         < script  type ="text/javascript" >
            window.onload = changeDescription;
            function changeDescription()
            {
                var description = document.getElementById("description");
                description.firstChild.nodeValue = "firstChild测试";
            }
         </ script >
     </ head >
     < body >
         < p  id ="description" > 测试 </ p >
     </ 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 著，杨涛、王晓云等译，人民邮电出版社出版