Comment boucler à travers les objets enfants en javascript ?

Question

J'ai ce code dans une fonction :

tableFields = tableFields.children;
for (item in tableFields) {
    // Faire quelque chose
}

Selon un console.log de tableFields, je reçois un tableau comme je le suppose. Un console.log de l'élément dans les boucles renvoie undefined. Que dois-je faire pour parcourir tableFields et insérer chaque objet dans un tableau ?

console log de tableFields :

HTMLCollection[label, input, label, input 25, label, input, input, input Remove]

0
label

1
input

2
label

3
input 25

4
label

5
input

6
input

7 
input Remove

description[]
input

hours[]
input

invoice_number
input

getlength
8

rate[]
input 25

item
item()

iterator
iterator()

namedItem
namedItem()

__proto__
HTMLCollectionPrototype { item=item(), namedItem=namedItem(), iterator=iterator()}

Voici la section de code entière que j'ai jusqu'à présent :

$this->title("Test");
    $this->defaultMenu();
    $select = "";
    $names = Customer::getNames();
    foreach ($names as $id => $name) {
        $select .= 'customerid == $id) $select .= ' selected ';
        $select .= '>'.$name.'';
    }

    $form = '

var counter = 0;

function isEven(int){
int = Number(int);
return (int%2 == 0);
}

function moreLabor() {

    var table = document.getElementById("editTable");
    var tableFields = document.getElementById("readroot");

    tableFields = tableFields.children;
    console.log(tableFields);
    for (item in tableFields) {

        if (isEven(counter)) {
            var tableRow = table.insertRow(-1);
            var label = tableRow.insertCell(-1);
            console.log(tableFields[item]);
            label.appendChild(tableFields[item]);

        } else {
            var field = tableRow.insertCell(-1);
            field.innerHTML = item.innerHTML;

        }

        counter++;
    }

    console.log();
var insertHere = document.getElementById("writeroot");
}

window.onload = function(){
    document.getElementById(\'moreLabor\').onclick = function(){ moreLabor(); }
    moreLabor();
}

    Hours:

    Rate:

    Description:

        Work Order Number:

        Customer:
        '.$select.'

    ';
    if (!is_null($this->id)) {
        $form .= '';
    }
    $form .= '';

    $this->component($form);

Answer 1

En utilisant ES6,

[...element.children].map(child => console.log(child));

Answer 2

En 2020 / 2021, il est encore plus facile avec Array.from de 'convertir' un tableau de nœuds de type tableau en un tableau réel, puis d'utiliser .map pour parcourir le tableau résultant. Le code est aussi simple que suit :

Array.from(tableFields.children).map((child)=>console.log(child))

Answer 3

Je suis surpris que personne n'ait répondu avec ce code :

for(var child=elt.firstChild;
    child;
    child=child.nextSibling){
  do_thing(child);
}

Ou, si vous ne voulez que des enfants qui sont des éléments, ce code :

for(var child=elt.firstElementChild;
    child;
    child=child.nextElementSibling){
  do_thing(child);
}