javascript - .appendchild 不是函数 - 在 "for in"循环中

Question

控制台抛出错误:P[i].appendChild is not a function 。 如果我使用简单的“for 循环”for( var i=0 ; i<P.length ; ++i ) 则不会出现该错误- 而不是“for-in 循环”

HTML:

<div id="container">
  <div class="parent"></div>
  <div class="parent"></div>
  <div class="parent"></div>
</div>

Javascript:

var P = document.getElementsByClassName("parent");
for (var i in P){
  var Child = document.createElement("div");
  Child.class = "child";
  P[i].appendChild(Child);
}

为什么我不能同时使用“for-in”和“.appendChild()”？

Answer 1

方法getElementsByClassName does not return an array ，所以 P 是一个对象，而不是数组。具体来说，它是HTMLCollection具有节点以外的属性，因此这些属性没有该方法。

您可以在下面的示例中看到这一点。

var P = document.getElementsByClassName("parent");
for (var i in P){
  var output = document.createElement('div');
  
  output.innerHTML = "Checking for appendChild on property '" + i + "' on the collection: " + typeof P[i].appendChild;
  document.body.appendChild(output);
}

<div id="container">
  <div class="parent"></div>
  <div class="parent"></div>
  <div class="parent"></div>
</div>