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。我已经尝试在所有浏览器中使用这两种childNodes浏览getElementsByTagName("*")器，IE、FF、Chrome、Opera、Safari，我看到了相同的行为。

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

4

1 回答 1

3

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

尝试...

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

js小提琴。

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

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

于 2013-07-22T07:43:21.387 回答