Retourner à 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

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

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 13/12/2018 19:23:56 sur php7 en 22.85 ms