<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var ohtml=document.documentElement;
alert(ohtml.childNodes.length)
</script>
</head><body>
</body>
</html>为什么输出的是1,而不是2呢!html节点不是包含head和body2个子节点么?请教一下高手!

解决方案 »

  1.   

    在DOM中使用 document.documentElement访问的是个节点树的根节点,就是<html>,当然length是1。body是子节点,是下一层的节点,不计算在上层中
    你可以这样测试,就明白了:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档 </title>
    <script>
    var ohtml=document.documentElement;
    alert(ohtml.childNodes.length)
    alert(ohtml.innerHTML)
    </script>
    </head><body>
    <a></a>
    <div></div>
    </body>
    </html> 
      

  2.   

    childNodes.length是子节点的个数啊,而且
    alert(ohtml.childNodes[0])可以输出head
    为什么ohtml.childNodes[1]就是undefined了呢 我很费解啊~~~难道<head/>和<body/>不是兄弟关系?
      

  3.   

    而且我发现在IE6里,好像是正常的,即:
    <script> 
    var ohtml=document.documentElement; 
    alert(ohtml.childNodes.length)   // 2
    alert(ohtm.firstChild.nodeName)   //head
    alert(ohtm.lastChild.nodeName)    //body
    </script> 但是到了ie7里 就不行了。<script> 
    var ohtml=document.documentElement; 
    alert(ohtml.childNodes.length)   // 1
    alert(ohtm.firstChild.nodeName)   //head
    alert(ohtm.lastChild.nodeName)    //null
    </script> 这是为什么啊。哪位大侠能给我详细解答下,先谢谢你了。这个弄的我头好晕!!!!
      

  4.   

    在哪里也是正常的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title> new document </title>
     </head> <body>
    <script> 
    var ohtml=document.documentElement; 
    alert(ohtml.childNodes.length)  // 2 alert(ohtml.childNodes[0].nodeName)  //head 
    alert(ohtml.childNodes[1].nodeName)    //body 
    alert(ohtml.firstChild.nodeName)  //head 
    alert(ohtml.lastChild.nodeName)    //body 
    </script> 
     </body>
    </html>
      

  5.   

    楼主要弄明白这个问题,首先要清楚html和加载顺序:
    那么我们看下面的例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nodes</title>
    <script>
    alert("show me first!");
     </script>
    </head>
    <body>
    <div>
    show me second!
    </div>
    </body>
    </html>
    当页面加载时,大家会看到先强出了show me first!,此时页面上并没有显示show me second!,说明<body>其实还没有被浏览器加载.这个例子中JS是以内嵌的方式加入到HTML中的,那么HTML是近观顺序执行.理所当然得到的是先弹出显示show me first!那么我们再来看下面的例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nodes</title>
    <script type="text/javascript" src="js/2.js"> </script>
    <script>
    alert("show me first!");
     </script>
    </head>
    <body>
    <div>
    show me second!
    </div>
    </body>
    </html>
    此时页面中加入一个引入的2.js,代码如下:
    window.onload = function(){
        var ohtml = document.documentElement;
        var cNodes = ohtml.childNodes;
        for (var i = 0; i < cNodes.length; i++) {
            alert(cNodes[i]);
        }
        
    }
    我们会看到依然先弹出显示show me first!紧接着页面上显示show me second!最后依次弹出head节点对象和body节点对象.因为window.onload表明是在页面加载完毕后执行的.这时我们如愿得到了两个节点,长度为2.而且节点的顺序是<head>,<body>.所以凡是规范就不会乱了手脚.
      

  6.   

    楼上说的对,初始化的函数还是放在body的onload事件中比较安全
      

  7.   

    谢谢,tidelglde 热心解答!问题已经解决!!!!