nodeList

Eléments du DOM

On peut accèder aux éléments html d'une page html avec javascript. Cela permet notamment des modifications dynamiques de la page.

Premier exemple.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Un premier tableau </title>
        <style>
        p{
        	border: 1px dashed black;
        	width : 300px;
        	height: 100px;
        }
        article{
        	border: 1px solid orange;
        	margin : 3px;
        	padding : 2px;
        }
        </style>
    </head>
    <body>
    
        <article>
        <p></p>
        <p></p>        
        </article>
        
        <article>
        <p></p>
        <p></p>     
        <p></p>    
        </article>
        
        <article>
        <p></p>       
        </article>
    
        <script>
     
     	// tableau des articles : 
        let tabArticles = document.getElementsByTagName("article"); 
        // tableau vide pour stocker les paragraphes :
        let tabParagraphes = [];
        
       for(let  elementArticle of tabArticles) {
        	//tabParagraphes[0] sera le tableau des éléments de type p de l'article d'indice 0
        	//tabParagraphes[1] sera le tableau des éléments de type p de l'article d'indice 1
        	tabParagraphes.push( elementArticle.getElementsByTagName("p") );
       }
         
       
        
        for(let i = 0; i < tabArticles.length; i++) // pour chaque article
        {
        	for(let j = 0; j < tabParagraphes[i].length; j++) // pour chaque élément p de l'article
        	//définition du contenu html du paragraphe :
        	tabParagraphes[i][j].innerHTML = "Je suis le paragraphe " + (j+1) + " de l'article " + (i+1) + ".";
        }
         
        </script>
    </body>
</html>

document.getElementsByTagName("article") n'est pas du type Array, il s'agit d'une nodeList.

Convertir une nodeList en array avec Array.from().

Modification du css

On peut modifier le style css à l'aide de javascript.

La notion de tableau n'est plus nécessairement en jeu pour cela, mais nous continuons ici à illustrer les tableaux créés à partir de l'arbre du DOM.

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> paragraphe rouge </title>
        <style>
        article p{
        	border: 1px dashed black;
        	width : 300px;
        	height: 100px;
        }
        article{
        	border: 1px solid orange;
        	margin : 3px;
        	padding : 2px;
        }
        </style>
    </head>
    <body>
    
        <article>
        <p></p>
        <p></p>        
        </article>
        
        <article>
        <p></p>
        <p></p>     
        <p></p>    
        </article>
        
        <article>
        <p></p>       
        </article>
        
         <p> Choisissez un numéro d'article (ils sont numérotés à partir de 0) :</p>
         <input type="number" id="numArticle" value="0" min="0" max="2">
         
         <p> Puis cliquez sur le bouton <button onclick="regleMaxArticle()">Clic ! </button>.</p>
         
         <p> Choisissez un numéro de paragraphe dans cet article <br>
         (entre 0 et <span id="plusGrandIndice">...</span>) : </p>
         <input type="number" id="numPara" min="0" value="0">
         
         <p> Et cliquez ici : <button onclick="rouge()">Clac ! </button></p>
    
        <script>
     
     	// tableau des articles : 
        let tabArticles = document.getElementsByTagName("article"); 
        // tableau vide pour stocker les paragraphes :
        let tabParagraphes = [];
        
        for(let elementArticle of tabArticles) {
        	//tabParagraphes[0] sera le tableau des éléments de type p de l'article d'indice 0
        	//tabParagraphes[1] sera le tableau des éléments de type p de l'article d'indice 1
        	tabParagraphes.push( elementArticle.getElementsByTagName("p") );
        }
        
        
        function regleMaxArticle(){
		    // on récupère le numéro de l'article entré par l'utilisateur :
		    let numArticle = document.getElementById("numArticle").value;
		    // on récupère l'élément input number dans lequel sera entré le numéro de l'article :
		    let nbPara = document.getElementById("numPara");
		    //remise à 0 de la valeur proposée par défaut :
		    nbPara.value = "0";
		    // mise à jour de la valeur max :
		    nbPara.max = tabParagraphes[numArticle].length -1;
		    document.getElementById("plusGrandIndice").textContent = nbPara.max;
        }
        
        function rouge(){
		    let numArticle = document.getElementById("numArticle").value;
		    let numPara = document.getElementById("numPara").value;
		    tabParagraphes[numArticle][numPara].style.backgroundColor = "red";
        }
        
         
        
         
        </script>
    </body>
</html>