Easy-Micro [ DOM ET JAVASCRIPT - Trois méthodes ] - Formations informatiques pour entreprises

Dom et JavaScript
Trois méthodes
Trois méthodes - et plus - pour accéder aux nœuds

getElementById

La méthode getElementById parcourt le document à la recherche d'un nœud unique qui a été spécifié par l'attribut id. Cet identifiant id doit être unique dans le document (le terme Element est au singulier).

Exemple: trouver une image qui se nomme 'monimg' et la transformer

<!doctype html>
<html lang="fr">
<body>
<img src="https://www.easy-micro.org/images/logo/logo_Easy-Micro.png" alt="logo Easy-Micro" id="monimg">

<script>
function trouveimg() {
let imageTrouvée = document.getElementById('monimg');
if (imageTrouvée) { imageTrouvée.style.border='3px dashed #ccc'; }
}

window.onload = trouveimg;
</script></body></html>

Note : Pour réaliser plusieurs window.onload en même temps, on utilise la technique JavaScript de définition de fonctions au vol (ce qu'on appelle une fonction anonyme) comme ceci : window.onload = function() { mafonction1(); mafonction2(); } - Voir ce code Easy-Micro dans JS Bin

La fonction my$() vs document.getElementById() Dès qu'on manipule les éléments d'une page (le DOM) en Javascript, on multiplie les appels à document.getElementById('element_id'), ce qui est long et source d'erreurs. Je ne suis sans doute pas le seul à avoir perdu du temps à cause d'une majuscule oubliée. Saviez-vous qu'il était possible d'appeler votre élément par la simple fonction my$('element_id') ? Il suffit de déclarer la fonction my$() qui remplacera élégamment la longue séquence habituelle :

function my$(element_id) { return document.getElementById(element_id); } my$('monimg');

C'est bête comme tout, mais très pratique à écrire et à repérer, surtout pour les habitués de la syntaxe $variable de PHP. Sinon, vous pouvez installez JQuery et passez à la syntaxe $('#id').
Source: Article de Damien Ravé visible sur lePotlatch.org

getElementsByTagName

La méthode getElementsByTagName parcourt le document à la recherche de toutes les balises d'un type spécifique, signalé en argument. Ces balises sont contenues dans une liste (nodelist) qui se gère comme les tableaux de type Array. Le terme Elements de getElementsByTagName est bien au pluriel car il peut y avoir plusieurs balises de même type dans le document.

<!doctype html><html lang="fr"><body>
<img src="https://www.easy-micro.org/images/logo/logo_Easy-Micro.png" alt="logo Easy-Micro">

<script>
function trouveimg() {
let imgs, i;
imgs = document.getElementsByTagName('img');

for(i in imgs) {
       if(/logo_Easy-Micro.png/.test(imgs[i].src)) { 
       imgs[i].style.border = '3px dashed #0000ff';
       }
}
}
trouveimg();</script></body></html>

Dans cet exemple, nous avons vérifié que l'attribut src de l'objet image contenait 'logo_Easy-Micro.png'. Une méthode plus courante consiste à vérifier la présence d'une classe :

L'image contient la classe de style 'nobordure' (class="nobordure") :

<!doctype html><html lang="fr"><body>
<img src="https://www.easy-micro.org/images/logo/logo_Easy-Micro.png" alt="logo Easy-Micro" class="nobordure">

<script>
function trouveimg() {
var imgs, i;
imgs = document.getElementsByTagName('img');

for(i in imgs) {
      if(/nobordure/.test(imgs[i].className)) {
      imgs[i].style.border = '3px dashed #ff0000';
      }
}
}
trouveimg();</script></body></html>

Autre exemple de getElementsByTagName : Changer la couleur de chaque titre H2 en bleu

<!doctype html>
<html lang="fr">
<body>
<h2>Titre 1</h2>
Mon texte
<h2>Titre 2</h2>
Mon texte

<script>
function colourh2() {
let h2s, i;
	
// sélectionne tous les éléments h2
h2s = document.getElementsByTagName('h2');
	
for(i = 0; i< h2s.length; i++) {
        h2s[i].style.color='blue'; // change leur couleur en bleu
}
}

if(document.getElementById && document.createTextNode) {
	window.onload = colourh2;
}
</script></body></html>

createTextNode permet de créer un nouveau nœud de texte

Autre exemple de getElementsByTagName : Ajouter un gestionnaire onclick à chaque lien qui possède l'attribut target pour ouvrir une nouvelle fenêtre de 400x400 pixels.

<!doctype html>
<html lang="fr">
<body>
Ceci est un lien vers <a href="https://www.easy-micro.org/" title="Easy-Micro" target="_blank">Easy-Micro</a> et ceci est un autre lien vers la formation <a href="https://www.easy-micro.org/bootstrap.php&id=1016" title="Easy-Micro" target="_blank"> Bootstrap sur Easy-Micro</a>

<script>
function changeLinks() {
   let as, i, islink;
   // sélectionne tous les liens et boucle sur eux
   as = document.getElementsByTagName('a');
   for(i = 0; i < as.length; i++) {
         // vérifie quels liens ont un attribut target, et les envoie vers la fonction popup
         if(as[i].getAttribute('target') != '') {
               as[i].onclick = function(){ return(popup(this));
               //as[i].onkeypress = function(){ return(popup(this));
         };  
   }
}

function popup(o) {
    // ouvre une nouvelle fenêtre à l'adresse indiquée par le href du lien
    window.open(o.href,'newwin','height=400,width=400');
    return false;
}

// si le navigateur prend en charge DOM, appelle la fonction onload
if(document.getElementById && document.createTextNode) {
window.onload = changeLinks;
}
</script></body></html>

Malheureusement pour cet exemple, les fenêtres popup sont désactivées dans la plupart des navigateurs

getElementsByName

La méthode getElementsByName permet de sélectionner les éléments portant un nom donné, spécifié par l'attribut name. Les éléments portant le même nom sont stockés dans une liste de nœuds. Cette liste ce gère comme un tableau de type Array. Le terme Elements de getElementsByName est bien au pluriel car plusieurs éléments portant le même nom peuvent se trouver dans le document.

Exemple de recherche de la valeur d'un champ nommé 'infos'

<!doctype html>
<html lang="fr">
<body>
<input type="text" name="infos" value="33">
<input type="text" name="infos" value="77">
<input type="text" name="infos" value="44">

<script>
//<![CDATA[
function test() {
// accéder au troisième champ ayant l'attribut name = "infos"
let savaleur  = document.getElementsByName('infos')[2].value;
alert("Valeur : " + savaleur);
}

test();
//]]>
</script>
</body>
</html>

Note: L'attribut name est déprécié en Xhtml au profit de l'identifiant id. Ainsi l'emploi de getElementsByName est de moins en moins fréquent

La façon la plus simple d'accéder à un élément dans un document va être de la faire en le ciblant avec le sélecteur CSS qui lui est associé. Deux méthodes apparues dans une version récente nous permettent de faire cela : les méthodes querySelector() et querySelectorAll()

querySelector()

La méthode querySelector() retourne un objet Element représentant le premier élément dans le document correspondant au sélecteur (ou au groupe de sélecteurs) CSS passé en argument ou la valeur null si aucun élément correspondant n'est trouvé.

<!doctype html>
<html lang="fr">
<body>
<div>
<p>Ceci est le premier paragraphe</p>
</div>

<script>
document.querySelector('p').textContent = '1er paragraphe du document';

let documentDiv = document.querySelector('div'); //1er div du document
documentDiv.querySelector('p').style.background = 'green'; // couleur

</script>
</body>
</html>

Sélectionne le premier paragraphe du document et modifie son texte puis le rempli de couleur

querySelectorAll()

Retourne tous les éléments recherchés dans l'ordre dans lequel ils apparaissent dans l'arbre du document, ou un tableau vide si rien n'est trouvé.

<!doctype html>
<html lang="fr">
<body>
<div>
<p>Ceci est le premier paragraphe</p>
<p>Ceci est le deuxième paragraphe</p>
</div>

<script>
let documentP = document.querySelectorAll('p'); // tous les p

/*Rajoute du texte dans chaque paragraphe de notre document*/
documentP.forEach(function(nom, index) {
    nom.textContent += ' (paragraphe n°:' + index + ')';
});
</script>
</body></html>

Sélectionne tous les p du premier div et rajoute du texte

< >