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.