Question

我正在尝试读取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。我尝试在所有浏览器中使用childNodes和getElementsByTagName("*")，IE，FF，Chrome，Opera，Safari，我也看到了同样的行为。

当我在所有跨距之间添加空白区域时，所有元素都被读取。这是预期的行为吗？如果是这样，为什么？

Answer 1

返回的项目是实时NodeList。您将它们附加到body元素，因此NodeList随着for循环的每次迭代而缩小。这就是它看起来像是随意跳过元素的原因。

...试

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

jsFiddle

当我在所有跨距之间添加空白区域时，所有元素都被读取。这是预期的行为吗？如果是这样，为什么？

是的，这是预期的。它只是意味着不跳过span元素，而是跳过空格引入的文本节点。永远不要依赖于此 - 它非常脆弱。

JavaScript：无法读取innerHTML内容中的所有元素

1 个答案: