关于文本节点和元素节点！

想统计<body>标签内的子节点个数和类型，HTML的<body>标签如下：<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);return false;">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red,red rose" onclick="showPic(this);return false;">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock"onclick="showPic(this);return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
 </body>
javascipt代码如下：function countBodyChildren()
{
var body_element=document.getElementsByTagName("body")[0];
var countArray=new Array(0,0,0);
for(var i=0;i<body_element.childNodes.length;i++)
{
countArray[(body_element.childNodes[i].nodeType)-1]++;
}
alert(countArray[0]+":"+countArray[1]+":"+countArray[2]+" total "+body_element.childNodes.length);
}
window.onload=countBodyChildren;
最后统计的结果是：IE下显示为4:0:1:5！Firefox下为4:0:5:9
我对元素节点（第一个数字！）没有疑问，应该是"<h1><ul><img><p>",但是文本节点（第三个数字！）的数目统计我就不太懂了，IE显示为1，Firefox显示为5？请教各位，谢谢了！

解决方案 »

  1.   

    Firefox换行会带出一下文本节点
      

  2.   

    包含在 HTML 元素中的文本是文本节点Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。
      

  3.   

    帮楼主测试了一下，将楼主代码中的<img>去掉则文本节点显示为0，所以推测是没有闭合标签的元素在IE中会多加一个文本节点，验证了一下果然如此，添加一行：<input name="txt" type="text" />ie中文本节点又会变为2了，若添加<button>click me</button>则文本节点仍然为1。搞不懂原因，坐等高手解答。
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
     <head>
      <title> New Document </title>
     </head>
     <body >
      <div></div>
      <img src="#" />
      sssssssssss
     </body>
     <script language="JavaScript"> 
    var list=document.getElementsByTagName("body")[0].childNodes;
    for(var i=0;i<list.length;i++){
    alert(list[i].nodeType);
    }  </script> 
    </html>
    结果如下：IE： 1,1,3
    Firefox:  3,1,3,1,3,1
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
     <head>
      <title> New Document </title>
     </head>
     <body >
      <div></div>
      <img src="#" />
      sssssssssss
     </body>
     <script language="JavaScript"> 
            var list=document.getElementsByTagName("body")[0].childNodes;
            for(var i=0;i<list.length;i++){
                alert(list[i].nodeType + "/" + list[i].tagName);
            }  </script> 
    </html>
    结果如下：
    IE1/DIV
    1/IMG
    3/undefined
    1/SCRIPTFirefox:3/undefined
    1/DIV
    3/undefined
    1/IMG
    3/undefined
    1/SCRIPT
      

  6.   


    Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。 
      

  7.   

    对于firefox,chrome等支持标准的浏览器，会把元素间的空白字符视为一个文本节点，而IE则会忽略闭合标签间的空白字符，注意是闭合标签。没有闭合的标签比如<img/><input/>则与标准浏览器无异，也会把后面的空白字符当作一个文本节点。请看下面的测试代码：<!DOCTYPE html>
    <html>
        <head>
         <title>Text</title>
        </head>
        <body>
        <img src="images/placeholder.gif" alt="my image gallery" />
        <p>p1</p>
        <img src="images/placeholder.gif" alt="my image gallery" /><p>p2</p>
        <script>
         function countBodyChildren()
    {
        var body_element = document.getElementsByTagName("body")[0];
        var childs = body_element.childNodes;
        for(var i in childs){
         if(childs[i].nodeType === 1){
         alert(childs[i].nodeName);
         }else if(childs[i].nodeType === 3){
         alert("textNode=> value: " + childs[i].nodeValue);
         }
        }
    }
    window.onload=countBodyChildren;     </script>
        </body>
    </html>