Retourner ' la page d'accueil de TJSRetourner ' la page d'accueil de TJS

Propriété : HTMLElement.childNodes

Tableau d'éléments HTML de tous les noeuds du parent

Syntaxe
Array parent.childNodes

Compatible tous navigateurs

Description
childNodes est un tableau d'éléments HTML de tous les noeuds de l'élément parent.

Ce tableau est directement lié au document. Une modification sur un élement, un ajout ou une suppression ont un impact direct et immédiat sur le DOM.

Le premier élément du tableau est accessible directement par firstChild et le dernier par lastChild.


Exemple 1 : Utilisation de childNodes
Code source
<style type="text/css">
 div.enfant {
   border:1px solid #999;
   font-size:13px;
   margin:3px;
   display:inline-block;
 }
</style>
<div id="myDiv"></div>
<div onclick="traiterNodes()" class="btn radius btn-outline cursor-pointer ">Lancer le traitement sur childNodes</div>
<script>
 /* Création des enfants */
 var div=document.querySelector("div#myDiv");
 for (var i=1; i<=25; i++) {
   var d=document.createElement("div");
   d.setAttribute("class", "enfant");
   d.dataset.number=i;
   d.innerHTML="Enfant "+i;
   div.appendChild(d);
 }

 function traiterNodes() {
   let div=document.querySelector("div#myDiv");
   console.log(div.childNodes.length+" enfants au départ");

   div.childNodes.forEach(function(element) {
      // changer la couleur de fond  
      element.style.backgroundColor="#fff";
  });

  div.childNodes.forEach(function(element) {
     // supprimer les éléments pairs
     if (element.dataset.number %2 ==0) {
       div.removeChild(element);
     }
   });


   console.log(div.childNodes.length+" enfants après les traitements");
 }
</script>

Résultat
Lancer le traitement sur childNodes
Emulation de la console
Explication
Ajout de 25 éléments div de classe enfant et avec l'attribut data-number contenant un indice dans div#myDiv.

L'appel à la fonction traiterNodes() lancé par le bouton déclenche un parcours du tableau childNodes avec forEach().
Chaque élément du tableau est parcouru.
Le fond est passé en blanc
si la propriété data-number, accessible par dataset, est divisible par 2, l'élément est supprimé.

Page en rapport
Introduction au DHTML
Page mise à jour le

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 24/04/2024 06:06:51 sur php 7 en 42.73 ms