Retourner à la page d'accueil de TJS

Propriété : HTMLElement.childNodes

Compatible Internet Explorer / Edge  Compatible Chrome  Compatible Safari  Compatible Firefox  Compatible Opera  

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

Syntaxe
Array parent.childNodes

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 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() {
   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

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 18/09/2019 09:27:31 sur php7 en 29.03 ms