posts - 297,  comments - 1618,  trackbacks - 0

蜜果私塾: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><href="test1.jpg">图片1</a></li>
           
<li><href="test2.jpg">图片2</a></li>
           
<li><href="test3.jpg">图片3</a></li>
        
</ul>
    
</body>
<html>

测试后可知弹出窗口显示的数字为2。一个是“ul”元素节点,一个是“childNodes测试”文本节点。

【提示】IE会忽略节点之间生成的空白文本节点(比如换行字符),而 MozillaFireFo浏览器不这么做。因此,两者的输出结果很多时候是不同的。可参考IEFireFox中的childNodes的区别

【提示】若测试时提示JS报错“childNodes为空或不是对象”,表示调用childNodes属性的节点为空,例如笔者将body手误写成body1,就会出现该错误提示。

1.2 nodeType属性

childNodes返回的数组包含所有类型的节点,除了所有的元素节点,还包括所有的属性节点和文本节点。若想区分节点的类型,可使用nodeType属性,使用语法参考如下:

node.nodeType

nodeType12种可取值,只有3种具有实用价值:

元素节点的nodeType属性值为1

属性节点的nodeType属性值为2

文本节点的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测试”为文本节点)和1ul为元素节点)。通过nodeType属性,我们可以编写出只对元素节点处理的countBodyChildNodes()方法。

1.3 nodeValue属性

该属性可以用于获取某个节点的值,或设置某个节点的值。

元素节点的 nodeValue null

文本节点的 nodeValue 是文本自身;

属性节点的 nodeValue 是属性的值。

使用语法参考如下:

node.nodeValue

在如下JS代码中,打印body的每个子元素的nodeTypenodeValue属性,并将第二个节点(元素节点)的文本值进行修改:

<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测试
        
<id="description">测试</p>
        
<ul>
           
<li><href="test1.jpg">图片1</a></li>
           
<li><href="test2.jpg">图片2</a></li>
           
<li><href="test3.jpg">图片3</a></li>
        
</ul>
    
</body>
<html>

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

3,nodeValue测试
1,null
1,null

 

1.4 nodeName属性

nodeName 属性规定节点的名称,该属性有如下规定:

nodeName 是只读的;

元素节点的 nodeName 与标签名相同(大写字母);

属性节点的 nodeName 是属性的名称

文本节点的 nodeName 永远是 #text

文档节点的 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测试
        
<id="description">测试</p>
        
<ul>
           
<li><href="test1.jpg">图片1</a></li>
           
<li><href="test2.jpg">图片2</a></li>
           
<li><href="test3.jpg">图片3</a></li>
        
</ul>
    
</body>
<html>

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

#text
#P
#UL

 

1.5 fisrtChild属性

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

node.firstChild

      如下JS代码改变iddescription元素的值:

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

         当某个元素只有一个子节点时,使用firstChildlastChild属性得到的是同一个节点。

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

3IEFireFox中的childNodes的区别

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

4)《JavaScript DOM编程艺术》 [] Jeremy Keith 著,杨涛、王晓云等译,人民邮电出版社出版

 

 

posted on 2011-11-01 10:13 阿蜜果 阅读(2192) 评论(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淘宝
真不错  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2011年11月>
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

      生活将我们磨圆,是为了让我们滚得更远——“圆”来如此。
      我的作品:
      玩转Axure RP  (2015年12月出版)
      

      Power Designer系统分析与建模实战  (2015年7月出版)
      
     Struts2+Hibernate3+Spring2   (2010年5月出版)
     

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

  • 积分 - 2285123
  • 排名 - 3

最新评论

阅读排行榜

评论排行榜