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 mise à jour le

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 24/11/2017 06:45:40 sur php7 en 19.9 ms