Obtenir l'élément enfant en JavaScript

Obtenir l'élément enfant en JavaScript

Cet article explique comment obtenir les nœuds enfants du corps d’une page Web en HTML à l’aide de JavaScript.

Obtenir les nœuds enfants du corps d’une page Web en HTML à l’aide de JavaScript

Obtenir un enfant d’un nœud en utilisant JavaScript signifie accéder à la page entière et l’obtenir dans un tableau. Il est important de se rappeler que les espaces blancs sont considérés comme des nœuds de texte dans la page Web.

Dans le cas des espaces blancs, le navigateur obsolète le traite différemment. Certains d’entre eux sont considérés comme des childNodes et d’autres comme des enfants comme Internet Explorer inférieur à la version 8.

<!DOCTYPE html>
<html>
<body>
<!-- we are writing a comment node! -->

<p>Click GET NODES button to get child nodes.</p>

<button onclick="getMyWebPageChildNodes()">GET NODES</button>

<p id="results"></p>

<script>
function getMyWebPageChildNodes() {
var myChildsNode = document.body.childNodes;
var textMessages = "";
var i;
for (i = 0; i < myChildsNode.length; i++) {
textMessages = textMessages + myChildsNode[i].nodeName + "<br>";
}

document.getElementById("results").innerHTML = textMessages;
}
</script>
</body>
</html>

Dans le code ci-dessus, nous créons un bouton et définissons un écouteur sur ce bouton nommé onClick.

Nous mettons une action sur le onclick nommée getMyWebPageChildNodes. Nous avons créé un tableau nommé myChildsNode et stocké tous les nœuds enfants dans cette fonction.

Après cela, nous créons une variable textMessages dans laquelle nous stockons les nœuds purement sans commentaires. Une variable counter est créée pour itérer le tableau myChildsNode.

Nous avons fait une boucle for dans laquelle nous avons récupéré le nom de tous les nœuds présents sur notre page Web, puis nous l’avons stocké dans la variable textMessages. Une fois que c’est fait, vous obtiendrez tous les noms de nœuds, et la boucle for se terminera.

Ici, nous attribuons ces nœuds à notre balise de paragraphe id=results. Enfin, nous obtenons tous les nœuds enfants dans une balise de paragraphe.

Article connexe - JavaScript Element