En JavaScript, l'arborescence DOM suit la structure hiérarchique contenant une grande liste de nœuds. La structure commence à partir du nœud racine (Document) puis s'ajoute aux nœuds parent et enfant. Afin d'accéder à ces nœuds enfants, JavaScript propose le ' childNodes ' propriété. Cette propriété aide les utilisateurs à accéder à tout ou à un nœud enfant spécifique de l'élément parent associé.
Cet article explique l'objectif et le fonctionnement de la propriété 'childNodes' de l'élément HTML DOM en JavaScript.
Qu'est-ce que la propriété 'childNodes' de l'élément HTML DOM en JavaScript ?
Le ' childNodes » est une propriété en lecture seule qui renvoie la liste de tous les nœuds enfants d'un élément sous la forme d'un objet NodeList. Cette propriété spéciale peut également être utilisée pour accéder au nœud enfant spécifique de l'élément parent. Le nœud enfant commence à partir de l'index '0 (zéro)'. De plus, les espaces blancs, les commentaires et les nœuds de texte sont également considérés comme des nœuds enfants.
Syntaxe
element.childNodes
La syntaxe généralisée ci-dessus renvoie l'objet NodeList contenant les nœuds enfants de l'élément ciblé.
Utilisons pratiquement les syntaxes définies ci-dessus.
Code HTML
Tout d'abord, jetez un œil au code HTML indiqué :
< div identifiant = 'div' style = 'bordure : 2 px noir uni ; hauteur : 200 px ; largeur : 250 px ; rembourrage : 10 px' >< h2 > Premier titre h2 >
< h3 > Deuxième titre h3 >
< p > Premier paragraphe p >
< p > La deuxième paragraphe p >
div >
< p identifiant = 'pour' > p >
Dans les lignes de code ci-dessus :
- Ajouter un ' ” avec un identifiant “Div”, stylisé à l'aide des propriétés indiquées (bordure, hauteur et largeur).
- Dans l'élément '
', définissez respectivement deux titres et deux paragraphes.- Enfin, le « ” intègre un paragraphe vide avec un identifiant “para”.
Note: Le code HTML indiqué est pris en compte tout au long de cet article.
Exemple 1 : Application de la propriété 'childNodes' pour obtenir le nombre total de nœuds enfants d'un élément particulier
Cet exemple utilise les propriétés 'childNodes' et 'length' pour obtenir le nombre total de nœuds enfants présents dans l'élément parent spécifique.
Code Javascript
Suivons le code donné :
< scénario >
const elem = document.getElementById ( 'div' ) ;
laisser num = elem.childNodes.length ;
document.getElementById ( 'pour' ) .innerHTML = 'Valeur: ' + nombre ;
scénario >Dans les lignes de code ci-dessus :
- La variable 'elem' utilise le ' getElementById() » pour accéder à l'élément parent dont l'id est « Div ».
- La variable 'num' utilise le ' childNodes ' et ' longueur ” pour obtenir le nombre de nœuds enfants présents dans l'élément “” accédé.
- Enfin, la méthode 'getElementById()' récupère le paragraphe vide intégré via son identifiant 'para' pour l'ajouter à la valeur de la variable 'num'.
Sortir
La sortie implique qu'il y a un total ' 9 ” nœuds enfants dans l'élément “
” donné, y compris les espaces entre les éléments.Exemple 2 : Application de la propriété 'childNodes' pour obtenir le nom d'un nœud enfant spécifique
La propriété « childNodes » peut également être utilisée avec la propriété « nodeName » pour obtenir le nom du ou des nœuds enfants. Voyons cela concrètement.
Code Javascript
Passez par le code suivant :
< scénario >
const elem = document.getElementById ( 'div' ) ;
laisser num = elem.childNodes [ 1 ] .nodeName ;
document.getElementById ( 'pour' ) .innerHTML = 'Élément: ' +num ;
scénario >Ici le ' childNodes ' la propriété est liée à la ' nodeName ' pour obtenir le nom du nœud enfant spécifié en fonction de l'index accédé, c'est-à-dire '1'.
Sortir
La sortie affiche le nom du nœud enfant, c'est-à-dire l'élément 'H2' par rapport à l'index spécifié.
Exemple 3 : Application de la propriété 'childNodes' pour modifier la couleur du texte d'un nœud enfant spécifique
Cet exemple utilise la propriété discutée pour changer la couleur de l'enfant indexé cible.
Code Javascript
Considérez le code suivant :
< scénario >
document.getElementById ( 'div' ) .childNodes [ 3 ] .style.color = 'vert' ;
scénario >Ici le ' getElementById() » récupère l'élément parent «
» via son identifiant « Div » et son nœud enfant placé à l'index spécifié via le « childNodes ” propriété, respectivement. Après cela, utilisez le ' style.couleur ” propriété pour changer la couleur du texte du nœud enfant accédé.Sortir
La sortie confirme que la couleur du texte du nœud enfant spécifié a été modifiée de manière appropriée.
Conclusion
En JavaScript, le ' childNodes ” récupère l'objet nodeList contenant les nœuds enfants de l'élément HTML cible. Les nœuds enfants sont accessibles tous en même temps ou celui souhaité en spécifiant le numéro d'index avec la propriété 'childNodes'. Cette propriété permet l'exécution de la fonction JavaScript pour effectuer des tâches spéciales sur les nœuds enfants accédés. Cet article a expliqué comment appliquer la propriété 'childNodes' en JavaScript.
- Dans l'élément '