2

div の innerHTML 内の要素を読み取ろうとしていますが、別の要素が読み取られているようです。

コードブロック:

<!DOCTYPE html>
<html>
  <body>
    <script type="text/javascript">
       var tdiv=document.createElement("div");
       tdiv.innerHTML="<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span>";

       var cn=tdiv.getElementsByTagName("*");
       var len=cn.length;

       console.log("length: "+len);
       console.log("tdiv len: "+tdiv.getElementsByTagName("*").length);

       for(var i=0;i<len;i++){
          if(cn[i]){
             console.log(i+": "+cn[i].nodeName+": "+cn[i].tagName);
             document.body.appendChild(cn[i]);
          }
       }
    </script>
  </body>
</html>

出力: a1a3a5

注: a2 と a4 がありません。IE、FF、Chrome、Opera、Safari のすべてのブラウザで両方childNodesを使用してみましたが、同じ動作が見られます。getElementsByTagName("*")

すべてのスパンの間に空白を追加すると、すべての要素が読み取られます。これは予想される動作ですか? もしそうなら、なぜですか？

4

1 に答える 1

3

返品された商品はライブNodeListです。それらをbody要素に追加しているため、NodeList はforループの反復ごとに縮小しています。これが、要素を任意にスキップしているように見える原因です。

試す...

while (cn.length) {
    cn[0] && document.body.appendChild(cn[0]);
}

jsFiddle .

すべてのスパンの間に空白を追加すると、すべての要素が読み取られます。これは予想される動作ですか? もしそうなら、なぜですか？

はい、期待されています。要素をスキップする代わりにspan、スペースによって導入されたテキスト ノードをスキップすることを意味します。これに頼らないでください - それはひどく壊れやすいです。

于 2013-07-22T07:43:21.387 に答える