.appendchild не является функцией - в цикле «for in»

Question

Консоль выдает ошибку: P[i].appendChild is not a function. ошибка не появляется, если я использую простой "цикл" for(var i=0 ; i<P.length ; ++i) - вместо "для в цикле"

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>