<!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> </title>
<script language="javascript" type="text/javascript">    window.onload=function()
    {
    //alert(window.document.body.innerHTML);    var col=document.getElementById("test").childNodes;    alert("有"+col.length+"个");
    for(var i=0;i<col.length;i++)
    {
    document.body.innerHTML+=(col[i].nodeType+":<br/>");
  
    }
    
   }
    </script>
</head>
<body>
    <div id="father" >父层</div>
    <div id="test">
    <span>第一个</span>
    <div>第2个</div>
    </div>
    <hr />
    以下是:输出结果<br/>
</body>
</html>
明明 alert("有"+col.length+"个");输出为3,可是结果页面输出时只输出一个"1:"为什么呢?希望高手给说说,明白后立即给分

解决方案 »

  1.   

    而且更奇怪的是:如果把
        <div id="test">
        <span>第一个</span>
        <div>第2个</div>
        </div>改成    <div id="test">
        <div>第一个</div>{注意改成div了}
        <div>第2个</div>
        </div>
    =================
    这时alert("有"+col.length+"个");输出为,为什么呢???
    未解这迷等高手给说说哦
      

  2.   

    <!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> </title>
    <script language="javascript" type="text/javascript">    window.onload=function()
        {
        //alert(window.document.body.innerHTML);    var col=document.getElementById("test").childNodes;    alert("有"+col.length+"个");
    var str="";
        for(var i=0;i<col.length;i++)
        {
    str+=(col[i].nodeName +":<br/>")
      
        }
        document.body.innerHTML+=str;
        
       }
        </script>
    </head>
    <body>
        <div id="father" >父层</div>
        <div id="test">
        <span>第一个</span>
        <div>第2个</div>
        </div>
        <hr />
        以下是:输出结果<br/>
    </body>
    </html>
    对document.body.innerHTML作赋值的时候JS会受影响而被终止.
      

  3.   

    childNodes差异比较http://www.quirksmode.org/dom/w3c_core.html#domtree
      

  4.   

    innerHTML居然阻止了IE的流???为什么?网上一点信息也没有
      

  5.   

    2L说的对
    window.onload = function(){
    var str = '', col = document.getElementById("test").childNodes;
    alert("有" + col.length + "个");
    for (var i = 0; i < col.length; i++) {
    str += (col[i].nodeType + ":<br/>");
    }
    document.body.innerHTML += str;
    }
      

  6.   

    4楼的朋友,你给那东东作什么????
    现在是innerHTML设置时阻止解释器继续解释JS而且是,IE6{IE7,IE8}都这样
      

  7.   


    再说
    而且更奇怪的是:如果把 
        <div id="test"> 
        <span>第一个 </span> 
        <div>第2个 </div> 
        </div> 改成     <div id="test"> 
        <div>第一个 </div>{注意改成div了} 
        <div>第2个 </div> 
        </div> 
    ================= 
    这时alert("有"+col.length+"个");输出为2,为什么呢??? 
    ======================================================这也太TMD的不靠脯了,谁能给从根源上说说,跪求了,我是爱追根问底的人
      

  8.   

    IE在解释的时候会在某些标签的结尾加一个空格.也就是空文本节点.
    具体要问做IE的老大...
      

  9.   

    在IE下看,问题所在
    window.onload = function(){
    var col = document.getElementById("test").childNodes;
    alert("有" + col.length + "个"); // 2
    for (var i = 0; i < col.length; alert(col.length), i++) {  // 0
    var t = col[i].nodeType; // 第二次时,报缺少对象
    document.body.innerHTML += (t + ":<br/>");
    }
    }
    ie刷新document.body.innerHTML会重建DOM
      

  10.   

    异步 innerHTML
    innerHTML 插入节点的性能的问题,通常是我们最关注的。在回答这问题时,James Padolsey 给出了他的解决方案,看到上述代码不仅赞叹了下:function asyncInnerHTML(HTML, callback) {
        var temp = document.createElement('div'),
            frag = document.createDocumentFragment();
        temp.innerHTML = HTML;
        (function(){
            if(temp.firstChild) {
                frag.appendChild(temp.firstChild);
                setTimeout(arguments.callee, 0);
            } else {
                callback(frag);
            }
        })();
    }充分利用闭包解决 IE6 的内存溢出问题 
    使用延时 0 将操作从队列中拉出,防止浏览器假死 
    Document Fragment 给予我们个相当好的沙盘,只是我们经常忘记了它 
    回调的节点可以使用 DOM 标准的手法(appendChild)插入 
    了解了参数就很容易调用,例如var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
    asyncInnerHTML(htmlStr, function(fragment){
        document.body.appendChild(fragment);
    });再次不禁赞叹下!组织 innerHTML 字符串
    说到 innerHTML ,通常在这操作之前会有大部分的字符串操作用于连接节点。考虑下面的三种做法,有何不同方式一
    var arr = ['item 1', 'item 2', 'item 3', ...];
    for (var i = 0, l = arr.length, list = ''; i < l; i++) {
        list += '<li>' + arr[i] + '</li>';
    }
    list = '<ul>' + list + '</ul>';方式二
    var arr = ['item 1', 'item 2', 'item 3', ...];
    for (var i = 0, l = arr.length, list = []; i < l; i++) {
        list[list.length] = '<li>' + arr[i] + '</li>';
    }
    list = '<ul>' + list.join('') + '</ul>';方式三
    var arr = ['item 1', 'item 2', 'item 3', ...];
    var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';详细的对比测试在这里(没错,还是 James Padolsey 那小子的 Blog)。同时,PPK 也整理了份有关 innerHTML 的速度测试报告。IE 的陷阱
    对于 IE,innerHTML 有个不大不小的陷阱(via),就是在 tbody 中插入 innerHTML 时,会报莫名的“未知的运行错误”。测试地址在这里(经过测试,在 IE8 中仍然如此)。有兴趣的同学可以参看更详细的信息。
      

  11.   

    还有childNodes,IE和其他的浏览器之间存在差异
      

  12.   


    你的意思是innerHTML会引起IE刷新,这也太不可以理解了????????
      

  13.   

    不是刷新,只是重建
    所以第一次+=之后col会丢失
    我给你的那段,你试过就知道了