Dynamisez vos pages Web avec JavaScript

Grâce à un script vous pouvez modifier l'aspect initial d'une page sans rechargement de celle-ci (donc sans requête HTTP).
On dit que l'on "dynamise" la page. On parlait avant de DHTML (dynamic HTML) mais le terme n'est plus à la mode.

On dit désormais que l'on modifie le DOM de la page !

le DOM

Le DOM est une interface de programmation qui nous permet de manipuler le code HTML & CSS d’une page web de façon dynamique en utilisant le langage JavaScript.
Le DOM est créé automatiquement lors du chargement d’une page web par le navigateur.
Désormais tous les navigateurs génèrent le même DOM ce qui n'était pas le cas à l'origine. Donc le code pour manipuler dynamiquement le HTML & CSS est désormais indépendant du navigateur !

La structure DOM

Tout dans une page web doit être considéré comme un noeud ("node" en anglais).
Le document HTML est un noeud, chaque élément HTML est un noeud, les attributs des balises sont des noeuds, le texte de chaque balise est aussi un noeud.
Sachez aussi qu’il existe plusieurs types de nœuds : le type ELEMENT (pour les balises HTML), le type de nœud TEXTE, etc.

<!doctype html> <html> <head> <title>texte dans l'onglet</title> <meta charset ='utf-8'> </head> <body> <h1 id = 'titre'>Titre de la page</h1> <p id = 'texte'>Texte de la page</p> <p class ='rem'>Texte de la page - suite</p> <p>Texte de la page - fin</p> </body> </html>

La structure DOM de cette page

Le DOM HTML va être construit comme une hiérarchie de nœuds. On peut le représenter sous forme d'un arbre.
Sachez que la page HTML est le noeud le plus haut hiérarchiquement et appelé : DOCUMENT
Intéressons nous uniquement aux noeuds de type ELEMENT contenus dans DOCUMENT

Toutes les balises doubles ou simples de la page constituent des ELEMENTS !
Ainsi la balise double HTML est un noeud de type ELEMENT.

Le noeud HTML comprend deux "enfants" : HEAD et BODY. Pour ces deux "enfants" HTML est l'élément "parent".
L'élément HEAD contient à son tour deux enfants : TITLE et META. On peut dire aussi que TITLE et META ont pour "parent" HEAD.
L'élément BODY contient quatre enfants : H1 et trois balises P.

Des méthodes

L'API DOM ce n'est pas uniquement la représentation de la page sous forme d'une arborescence. Le DOM c'est un ensemble de méthodes et propriétés pour accéder aux éléments et les manipuler.

Après avoir référencé un élément HTML il est possible d'accéder à son contenu, récupérer la valeur d'un attribut, récupérer le CSS de l'élément correspondant.
Il est également possible de modifier le contenu de l'élément, modifier la valeur d'un attribut, modifier le CSS élément.
On peut même rajouter des éléments voire supprimer certains éléments !

Cibler un élément HTML

Avant de manipuler en JS un élément HTML il faut pouvoir le cibler.
Il existe plusieurs méthodes pour accéder à un élément HTML mais toutes ont un point commun : elles retournent un objet !
Donc la syntaxe générique est : variable = méthode de ciblage d'un élément HTML
Après cette instruction la variable créée n'est pas une variable simple (qui stocke une primitive) mais une variable objet qui référence dans le script un élément HTML du document.
Dans la suite du script l'élément HTML sera toujours désigné par sa variable objet !

Méthodes de ciblage d'un élément

Il faut utiliser le DOM et en particulier les méthodes de l'objet document.
Il faut distinguer les anciennes méthodes et les nouvelles introduites par HTML5.

Ces deux nouvelles méthodes ont pour argument un sélecteur CSS.
Attention la première méthode cible un seul élément (le premier correspondant au sélecteur CSS) alors que la deuxième méthode peut référencer une collection d'éléments (tous ceux correspondant au sélecteur CSS) sous forme d'un tableau indicé .

La méthode querySelector()

La méthode querySelectorAll()

Et si vous voulez cibler la troisième balise P de la page et que cet élément n'a ni l'attribut ID ni l'attribut class ???
Il suffit d'écrire : document.querySelectorAll('p')[2]
Notez que l'on a utilisé la méthode querySelectorAll() argumentée avec 'p' mais suivie d'un indice.
En effet la méthode querySelectorAll retourne non pas un élément une collection d'éléments sous forme d'un tableau indicé. Donc il faut préciser l'indice pour cibler un seul élément !
Ici la valeur de l'indice est 2 (et non pas 3) car le premier élément de la collection a l'indice 0, la deuxième a l'indice 1 et le troisième élément a l'indice 2, etc.

Récupérer des informations sur les éléments HTML

Maintenant que vous savez cibler en JavasScript un élément HTML vous pouvez récupérer toutes les infos possibles sur cet élément.
La récupération d'un paramètre d'un élément est souvent un préalable à sa modification. Un seul exemple : si vous voulez augmenter la largeur d'une image de 10% il faut connaitre la largeur initiale de celle-ci puis ajouter 10%.

Récupération du contenu d'un élément

Le code de la page (extrait)

... <body> <h1>Le pays d'<u>Ardres</u></h1> <img src = '../images/ardres.jpg'> <h2>Le lac d'Ardres en hiver</h2> <p><b>Ardres</b> est connu pour son lac qui est un havre de tranquillité</p> <script> // création de variables objet titre = document.querySelector('h1') ; // titre référence la balise h1 legende_image = document.querySelector('h2') ; // legende_image référence la balise h2 texte = document.querySelector('p') ; // texte référence la balise P alert(titre.innerHTML); // récupère tout le contenu du nœud alert(titre.textContent); // récupère uniquement le texte du nœud alert(texte.innerHTML); alert(texte.textContent); </script> </body> ...

Commentaire

titre est une variable objet qui référence la balise H1 de la page.
Legende_image est une variable objet qui référence la balise H2 de la page.
texte quant à elle référence la balise P de la page.

Pour récupérer le contenu d'un élément on a deux propriétés : innerHTML et textContent.
Attention titre.innerHTML retourne : "Le pays d'<u>Ardres</u>" tandis que titre.textContent retourne : "Le pays d'Ardres".
Donc la première propriété retourne tout le contenu d'un élément (y compris le balisage interne) tandis que la deuxième retourne uniquement le contenu textuel.
Testez cette page !

Récupération des valeurs d'attribut

Le code de la page (extraits)

... <style> .ombre {box-shadow : 5px 5px 5px grey ; } </style> </head> <body> <h1>Afficher les valeurs de tous les attributs d'une image </h1> <img src ='../images/toucan.jpg' alt ='toucan' title ='le toucan' width = '300' height = '200' class = 'ombre'> <script> var vinfo ; // première solution : noeud.getAttribute(attribut) var image = document.querySelector('img') ; vinfo = image.getAttribute('width'); alert('largeur image : ' + vinfo); vinfo = image.getAttribute('height'); alert('hauteur image: ' + vinfo); vinfo =image.getAttribute('src'); alert('source image: ' + vinfo); vinfo =image.getAttribute('alt'); alert('texte alternatif: ' + vinfo); vinfo =image.getAttribute('title'); alert('info bulle: ' + vinfo); vinfo =image.getAttribute('class'); alert('classe affectée : ' + vinfo) ; // deuxième solution : noeud.attribut alert('largeur image : ' + image.width); alert('hauteur image : ' + image.height); alert('source image : ' + image.src); alert('texte alternatif: ' + image.alt); alert('info bulle: ' + image.title); alert('classe affectée: ' + image.className); </script> </body> ...

Commentaire du code

Ce script affiche deux fois la valeur de chacun des six attributs de l'image unique de la page).

Bien sûr dans la syntaxe le mot "élément" désigne la variable objet qui référence cet élément HTML.

Pour récupérer le nom de la classe affectée à un élément il faut argumenter la méthode getAttribute avec le mot class ; ce qui est des plus logiques. Par contre avec la syntaxe simplifiée il faut utiliser le mot className ce qui l'est moins ... Mais l'explication est que le mot "class" est un mot réservé en JavaScript.
Testez cette page !

La récupération des propriétés de style d'un élément

Dans certains ouvrages vous pourrez lire que pour récupérer une propriété CSS associée à un élément HTML il faut utiliser la syntaxe : élément.style.propriété

N'utilisez surtout pas cette syntaxe !
En effet ça ne marche que si les propriétés de style de l'élément sont définies dans la balise (donc via l'attribut style).
Avec cette syntaxe il n'est donc pas possible de récupérer une propriété de l'élément définie au niveau d'une feuille de style(interne ou externe).

Le code de l'exemple

... <link href ="../style.css" rel = "stylesheet" > <style> h1 {background-color : yellow ; height : 50px ; line-height : 50px ; border : 2px solid red ; } ... <h1>Titre de la page</h1> <img src ='../images/toucan.jpg' width = '200' style = "margin : 20px auto 20px auto ; opacity : 0.5; border : 1px solid black " > <button>infos sur mise en forme de l'image</button> <button>infos sur mise en forme du titre </button> <script> // variables objet globales pour référence deux noeuds. var titre = document.querySelector('h1') ; var image = document.querySelector('img'); document.querySelector('button').onclick = function() { var vinfo = getComputedStyle(image).opacity ; alert("valeur de opacity : " + vinfo); var vinfo = getComputedStyle(image).border ; alert("valeur de border : " + vinfo); var vinfo = getComputedStyle(image).marginLeft ; alert("valeur de margin left : " + vinfo); var vinfo = getComputedStyle(image).marginTop ; alert("valeur de margin top : " + vinfo); var vinfo = getComputedStyle(image).display ; alert("valeur de display : " + vinfo); } document.querySelectorAll('button')[1].onclick = function() { vinfo = getComputedStyle(titre).backgroundColor ; alert("valeur de background-color : " + vinfo); vinfo = getComputedStyle(titre).height ; alert("valeur de height : " + vinfo); vinfo = getComputedStyle(titre).lineHeight ; alert("valeur de line-height : " + vinfo); vinfo = getComputedStyle(titre).border ; alert("valeur de border : " + vinfo); vinfo = getComputedStyle(titre).fontSize ; alert("valeur de font-size : " + vinfo ); vinfo = getComputedStyle(titre).marginTop ; alert("valeur de margin top : " + vinfo ); } </script>

Commentaire

J'ai utilisé la méthode getComputedStyle(élément).propriété
Les deux éléments HTML sont référencés dans le script via les variables objet titre & image

Vous pouvez remarquer que j'ai récupéré des valeurs de propriétés de style quelque soit l'endroit où elles sont définies.
Ainsi pour l'élément image la propriété opacity est définie dans la balise mais la propriété display est définie dans la feuille de style externe ("style.css"). Et pour l'élément titre les propriétés sont définies dans la feuille de style interne.
Testez ce code !

Attention vous devez utiliser la syntaxe JavaScript des propriétés de style (et non pas la syntaxe CSS) !

Il y a une différence lorsque la propriété est un mot composé.
En effet en JavaScript les tirets sont interdits(signifie "moins").
Donc pour passer de la syntaxe CSS à la syntaxe JS il suffit de supprimer le tiret et de remplacer la lettre qui suit par son équivalent en majuscule.

Prenons quelques exemples.

propriété de formatagesyntaxe CSSsyntaxe JS
couleur de fondbackground-colorbackgroundColor
bordure (méga propriété)borderborder
hauteur de ligneline-heightlineHeight
marges externesmarginmargin

Modifier les éléments HTML

Vous savez maintenant récupérer des informations sur un élément (contenu, attributs, CSS).
Mais pour obtenir des pages dynamiques (qui changent d'aspect sans rechargement de celle-ci) il faut que l'on puisse modifier le contenu et/ou attributs et/ou CSS de certains éléments.

Modifier le contenu d'un élément

Ma première page dynamique : un clic sur la drapeau tricolore et la page est en français ; un clic sur l'Union Jack et la page est en anglais.

Le code de la page (extraits)

Le code CSS & HTML :

... <h2>Le pays d'Ardres</h2> <figure> <img src = '../images/ardres.jpg'> <figcaption>Le lac d'Ardres en hiver</figcaption> </figure> <p>Ardres est connu pour son lac qui est un havre de tranquillité.</p> <img src ='../images/francais.jpg' class ='miniature' title = 'version française'> <img src ='../images/anglais.jpg' class ='miniature' title = 'version anglaise'>

Le script :

// création de variables objet titre = document.querySelector('h2') ; // titre référence la balise h2 legende_image = document.querySelector('figcaption') ; // legende_image référence la balise figcaption texte = document.querySelector('p') ; // texte référence la balise P // gestion événements document.querySelectorAll('img')[1].onclick = fran; // appel de la fonction fran si clic sur la deuxième image document.querySelectorAll('img')[2].onclick = angl ; // appel de la fonction angl si clic sur la troisième image function fran() { // page en français titre.textContent = "Le pays d'Ardres" ; texte.innerHTML = "<b>Ardres est connu pour son lac qui est un havre de tranquillité.</b>"; legende_image.textContent = "Le lac d'Ardres en hiver"; } // fin fonction function angl() { // page en anglais titre.textContent = "Country of Ardres" ; texte.innerHTML = "<b>Ardres is known for his lake which is a place of tranquillity.</b>"; legende_image.textContent = "The lac of Ardres during winter"; } // fin fonction

En cliquant sur la deuxième image (drapeau tricolore) on appelle la fonction fran qui remplit chaque élément avec un texte français.
En cliquant sur la troisième image (union jack) on appelle la fonction angl qui remplit chaque élément avec un texte anglais.

Attention pour le noeud texte on utilise innerHTML (et non pas textContent) pour modifier non seulement le texte mais tout le contennu (y compris le balisage) ; le texte de ce élément sera donc en gras !
Testez cette page !

Modifier les valeurs d'attributs

Dans la page et selon que je clique sur le bouton "plus" ou "moins" j'augmente ou je réduis la taille de l'image tout en respectant les proportions.
Les dimensions de l'image sont ici des attributs de cet élément !

Le code de la page (extrait)

... <img src ='../images/toucan.jpg ' width = '150' height ='100' style = 'margin : auto ;'> <table> <caption>Faites varier la taille de l'image</caption> <tr><th><button id = 'plus'>+</button></th><th> <button id = 'moins'>-</button></th></tr> </table> <script> var image = document.querySelector('img'); var vlargeur =image.width; console.log(typeof(vlargeur)); //pour connaitre le type retourné par "image.width" var vhauteur ; document.querySelector('#plus').onclick = function() { vlargeur +=9 ; vhauteur = vlargeur *2 /3 ; image.width = vlargeur ; image.height = vhauteur ; } document.querySelector('#moins').onclick = function() { vlargeur -=9 ; vhauteur = vlargeur *2 /3 ; image.setAttribute('width',vlargeur) ; image.setAttribute('height',vhauteur) ; } </script> ...

Commentaire du script

La console JavaScript m'indique que le type retourné par l'instruction image.width et de type number. Donc je peux incrémenter (ou décrémenter) directement la valeur initiale (sans conversion).

Dans la première fonction on utilise la syntaxe simplifiée élément.attribut = nouvelle valeur
Dans la deuxième fonction on utilise la méthode setAttribute avec la syntaxe : élément.setAttribute('attribut',nouvelle valeur )
Testez ce code !

Mais si la largeur de l'image est exprimée en %

Vous savez que désormais afin que l'image soit adaptative, sa largeur est souvent exprimée en pourcentage (et la hauteur à "auto" pour respecter les proportions).
Donc le code pourrait être alors :

<img src ='../images/toucan.jpg ' width = '20%' height ='auto' style = 'margin : auto ;'> <table> <caption>Faites varier la taille de l'image</caption> <tr><th><button id = 'plus'>+</button></th><th> <button id = 'moins'>-</button></th></tr> </table>

Notez les dimensions de l'image ; largeur : 20% de celle du conteneur c'est à dire de BODY (qui a une largeur de 900px sur un grand écran).

Le script devient :

var image = document.querySelector('img'); var vlargeur =image.width; console.log(vlargeur); var vhauteur ; document.querySelector('#plus').onclick = function() { vlargeur +=20 ; image.width = vlargeur ; console.log(vlargeur); } document.querySelector('#moins').onclick = function() { vlargeur -=20 ; image.setAttribute('width',vlargeur) ; console.log(vlargeur); }

La console retourne non pas 20% mais 180 sur un grand écran (20% de 900 pixels).
Donc là aussi on peut incrémenter ou décrémenter directement (sans conversion).
Testez cette page adaptative !

Modifier les propriétés de style

Dans la page et selon que je clique sur le bouton "plus" ou "moins" l'image est plus opaque ou plus transparente.

Le code correspondant

... <style> img{margin : 20px auto 20px auto ; opacity : 0.1;} ... <h1>Modification d'une propriété de mise en forme</h1> <p>La valeur de la propriété de style <b>opacity</b> augmente ou diminue selon que l'on clique sur + ou sur - </p> <img width = '200' src ='../images/toucan.jpg' > <table> <caption>Faites varier l'opacité de l'image</caption> <tr><th><button id = 'plus'>+</button></th><th> <button id = 'moins'>-</button></th></tr> </table> <script> var image = document.querySelector('img'); var vopacite = getComputedStyle(image).opacity ; // récupération de la valeur actuelle de la propriété opacity alert("type de la valeur :" + typeof(vopacite)) ; // attention la valeur retournée par getComputedStyle est de type string var vopacite = parseFloat(vopacite); // conversion d'une chaîne en réel document.querySelector('#plus').onclick = function() { vopacite +=0.1; image.style.opacity = vopacite ;} document.querySelector('#moins').onclick = function() { vopacite -=0.1; image.style.opacity = vopacite ;} </script> ...

Commentaire

La page comprend une image pratiquement transparente (opacity = 0,1) et un clavier tactile.
Cette quasi transparence a été définie au niveau de la feuille de style interne.

Le script consiste à modifier la valeur de la propriété de style opacity.
Mais il faut d'abord récupérer la valeur initiale avec la méthode getComputedStyle
Or la valeur récupérée est de type string comme l'indique la fonction typeof.
On ne peut incrémenter ou décrémenter directement une chaine ! Donc il faut avant la convertir en réel avec la fonction parseFloat.
En cliquant sur le bouton plus l'image devient plus opaque puisque on incrémente la variable vopacite .
En cliquant sur le bouton moinsl'image devient plus transparente puisque on décrémente vopacite.

Pour changer la valeur d'une propriété de style vous pouvez toujours utiliser la syntaxe : élément.style.propriété = nouvelle valeur
Testez cette page !

Modifier le CSS : exercice

Dans une page les images sont par défaut chargées mais masquées.
En cliquant sur un bouton le visiteur les affiche. En cliquant sur un autre bouton le visiteur les masque de nouveau. Rendu à obtenir !

Le code CSS & HTML

... <style> img {display : none ; width : 22% ; margin : 1%; vertical-align : top;} </style></head> <body> <h1>Un bel album photos </h1> <button type ='button'>afficher images</button> <button type ='button'>masquer images</button> <img src = '../images/jolie_fille.jpg'> <img src = '../images/trikini.jpg'> <img src = '../images/bikini.jpg'> ... <img src = '../images/noire_bikini.jpg'> <img src = '../images/black_nue.jpg'>

Reconstituez script associé à chaque bouton de commande !

Aide

Grâce au CSS les images chargées sont par défaut masquées : img{display : none ; }
Donc pour les démasquer il faut que pour chaque image la valeur de la propriété display passe à inline !
Et pour les masquer de nouveau il faut que display repasse à none.
Il s'agit donc d'un changement de valeur d'une propriété de style pour une collection d'objets.
Il faut donc associer à chaque bouton de commande une fonction qui consiste en une boucle qui traite toute la collection d'images de la page.

Correction

Je suis gentil, je vous communique une partie du script

var images_page = document.images ; // utilisation de l'objet document.images // fonction anonyme pour afficher les images document.querySelector('button').onclick = function() { for(i in images_page) { images_page[i].style.display = 'inline' ; } } // fin fonction // fonction anonyme pour remasquer les images ...

Notez l'emploi de la structure FOR ... IN ... qui est très utile pour traiter toute une collection d'objets.

Ajouter un attribut à un élément

On peut modifier l'aspect d'un élément en lui ajoutant l'attribut "class" ou en remplaçant la valeur de cet attribut. C'est ce qu'on fait dans l'exemple ci-dessous.

Le code de la page (extraits)

... <style> section {width : 900px ; height : 600px ; border : 2px solid black ; margin : auto ; } .marine {background : aqua ; color : navy ; border-color : navy ; } .barbie {background : pink ; color : purple ; border-color : purple; } .gothique {background : black ; color : red ;border-color : red ; } ... <section> <h1>Changer la classe affectée à chaque balise</h1> <p>Au départ aucune classe n'est affectée aux trois éléments : section, h1, p <br>Puis en fonction du bouton cliqué vous affectez la classe <b>marine</b> ou la classe <b>barbie</b> ou la classe <b>gothique</b> à chacun de ces trois éléments</p> <button>style marine </button> <button>style barbie </button> <button>style gothique </button> </section> <script> // variables objetq globales var page = document.querySelector("section"); var titre = document.querySelector('h1'); var texte = document.querySelector('p'); var vnomclasse ; document.querySelector('button').onclick = function() { vnomclasse ='marine' page.className = vnomclasse; titre.className = vnomclasse; texte.className = vnomclasse; } // fin fonction document.querySelectorAll('button')[1].onclick = function() { vnomclasse ='barbie'; page.className = vnomclasse; titre.className = vnomclasse; texte.className = vnomclasse; } // fin fonction document.querySelectorAll('button')[2].onclick = function() { page.className = 'gothique'; titre.className = 'gothique'; texte.className = 'gothique'; } // fin fonction </script> ...

Commentaire

En cliquant sur le premier bouton le visiteur ajoute class ="marine" aux trois éléments, en cliquant sur le deuxième bouton c'est alors la classe barbie et en cliquant sur le troisième bouton c'est alors la classe gothique.
J'ai utilisé la syntaxe simplifié pour ajouter l'attribut class : élément.className = nomclasse

Oui vous avez bien lu pour changer la classe affectée à un élément HTML il faut utiliser le mot className et non pas class. C'est pas très logique mais c'est ainsi car le mot "class" est un mot réservé en JavaScrit !!!

ClassName est l'exception qui confirme la règle. Pour tous les autres attributs le mot à employer en JS est identique à celle utilisée en HTML !
Exemple 1 : pour ajouter l'attribut alt à une image la syntaxe simplifiée est : élément.alt ="texte"
Exemple 2 : pour ajouter l'attribut title à une image la syntaxe simplifiée est : élément.title ="texte"
Testez cette page !

Pour tester ce code je vous conseille d'afficher un volet avec le code source (commande sous Chrome : Plus d'outils / outils de développement / onglet "Elements")
Vous constatez qu'à chaque fois que vous cliquez sur l'un des trois boutons de commande la valeur de l'attribut "class" pour trois balises change.
Actualisez la page ; l'attribut "class" disparait ... on revient au code original.

Insérer ou supprimer des éléments HTML

Sachez que l'on peut encore aller plus loin dans la modification du DOM. On peut en effet ajouter de nouveaux noeuds voire supprimer des éléments existants.

Pour insérer / supprimer de nouveaux éléments il faut pouvoir se déplacer dans le DOM car l'ajout / suppression se fait à partir d'un élément parent.

Se déplacer dans le DOM

Dans l'exemple le script retourne le "parent" ou les "enfants" de certains éléments.

Le code HTLM

... <body> <section style ="border :1px solid red"> <h1>Titre général</h1> <p>Corps de texte associé au titre général. Blabla ... </p> <h2>Titre de niveau 2</h2> <p>Corps du texte associé au titre de niveau 2. Blabla ...</p> <h2>Titre de niveau 2</h2> <p>Corps du texte associé au titre de niveau 2. Blabla ...</p> </section> <button>Infos sur le parent de H1</button> <button>Infos sur deux enfants de SECTION</button> <button>Infos sur tous les enfants de SECTION</button> ... <ul>La balise SECTION a 6 enfants : <li>une balise H1 <li>2 balises H2 <li>3 balises P </ul>

Le script

	document.querySelectorAll('button')[0].onclick = function() 
	{
		var enfant = document.querySelector('h1');
		var parent = enfant.parentNode ;
		alert('balise parente de H1 :' + parent.nodeName) ; 
		alert('contenu de cette balise :' + parent.innerHTML) ; 
	}
	document.querySelectorAll('button')[1].onclick = function() 
	{
		var parent = document.querySelector('section');
		var premier = parent.firstElementChild ; 
		alert('premier enfant de section : ' + premier.nodeName) ;
		alert('texte de cette balise : ' + premier.textContent) ; 
		var dernier = parent.lastElementChild ; 
		alert('dernier enfant de section :' + dernier.nodeName) ; 
		alert('texte de cette balise : ' + dernier.textContent); 
	}
	document.querySelectorAll('button')[2].onclick = function() 
	{
		var parent = document.querySelector('section');
		var enfants =parent.childNodes; 
		var nombre =enfants.length;
		alert("nombre d'enfants de section : " + nombre);
	}

Testez cette page

Commentaire

Rappels sur deux propriétés déjà connues : textContent retourne le contenu textuel d'un élément tandis que innerHTML retourne tout le contenu (texte et balisage) !

La propriété parentNode pointe l'élément parent du noeud sélectionné.
La propriété nodeName indique le type de balise correspondante.
Les propriétés firstElementChild et lastElementChild pointent respectivement le premier élément enfant et le dernier élément enfant du parent.
childNodes est un tableau de tous les noeuds de l'élément parent.

Ajouter / supprimer des éléments

Manipuler le DOM c'est aussi pouvoir créer de nouveaux noeuds et en supprimer d'autres.
Pour ajouter un élément à la page il faut utiliser successivement les méthodes createElement() & appendChild()

Exemple : insertion d'un lien vers une feuille de style externe puis insertion d'une image puis suppression des boutons d'insertion.

Le code correspondant

... <meta charset = 'utf-8'> <title>onglet à fermer</title> <meta name="viewport" content= "width=device-width, user-scalable=yes" /> <body> <section style ="border :1px solid red"> <h1>Titre général</h1> <p>Page très moche car aucun CSS !!! <br>Blabla ... </p> <h2>Titre de niveau 2</h2> <p>Corps du texte associé au titre de niveau 2. <br>Blabla ...</p> <h2>Titre de niveau 2</h2> <p>Corps du texte associé au titre de niveau 2. <br>Blabla ...</p> </section> <button>Mettre en forme la page</button> <button>Insérer une image dans la page</button> ...

La page est très moche car il n'y a pas de CSS (pas de lien vers la feuille de style externe du site).

Le script

	var page = document.querySelector('body');
	var bouton1 =document.querySelector('button');
	var bouton2 =document.querySelectorAll('button')[1];
	bouton1.onclick = function() 
	{
		var lien =document.createElement('link');
		lien.href ="../style.css"; 
		lien.rel ="stylesheet";
		document.querySelector('head').appendChild(lien); 
		document.querySelector('p').textContent ="Page désormais plus jolie !!!" ; 
		page.removeChild(bouton1); // suprression bouton1 (enfant de page)
	}
	bouton2.onclick = function() 
	{
		var image =document.createElement('img');
		image.src ="../images/bikini.jpg";
		image.alt ="jolie fille en bikini";
		image.style.width ="200px";
		document.querySelector('section').appendChild(image); 
		page.removeChild(bouton2); //suppression bouton2 (enfant de page)
	}

Testez ce code

Commentaire

Si clic sur le premier bouton il y a alors insertion d'une balise LINK qui charge une feuille de style. Donc la page est beaucoup plus jolie !
Si clic sur deuxième bouton il y a alors insertion dans la boite SECTION d'une belle image.
Dans les deux cas il faut d'abord créer un nouvel élément avec la méthode createElement(type de balise) puis il faut donner des attributs (ici src, alt, style) à cet élément et enfin il faut insérer l'élément avec la méthode appendChild
La balise LINK est insérée dans HEAD et l'image est insérée dans la boite SECTION.

Après avoir été cliqué chaque bouton est supprimé.
Notez la syntaxe pour supprimer un élément HTML : parent.removeChild(enfant)
Retour menu