js débutant- comment analyser tous les nœuds enfants immédiatement à un niveau inférieur à un nœud DOM dans une page web

Question

Je comprends que pour le nœud d'une page web stocké dans une variable nommée 'parent', je peux obtenir tous ses nœuds enfants en utilisant la commande

var children=parent.childNodes;

J'ai deux questions à vous poser.

(a) La ligne de code ci-dessus ne fournira-t-elle que les nœuds qui sont des enfants immédiats ? Ou les nœuds inférieurs aux enfants immédiats seront-ils également stockés dans la variable 'children' ?

(b) Comment puis-je analyser chaque noeud de la variable 'children' ?

Answer 1

1) Il ne renverra que les enfants immédiats, mais ceux-ci contiendront à leur tour tous ses nœuds enfants... et ainsi de suite.

2)

for(var i=0;i<children.length;i++)
{
    children[i].......
}

Answer 2

A) Il ne retournera que les enfants directs (mais, bien sûr, chaque enfant peut contenir des enfants)

b)

var children = parent.childNodes;

for(var i = 0; i < children.length; i++) 
{
    var singleChild = children[i]
}

Answer 3

A) Oui, seuls les noeuds enfants immédiats sont listés.

b) en utilisant la magie ES5 par exemple

[].forEach.call(children, function( node ) {
    console.log( node );
});

Nous pourrions donc avoir un appel récursif, pour boucler sur tous les noeuds enfants :

(function _loop( current ) {
    [].forEach.call( current.children, function( node ) {
        if( node.children.length ) {
            _loop( node );
        }
        else {
           console.log( node );
        }
    });
}( children ));