Easy-Micro


ESPACEMEMBRE Dom et JavaScript
Trois méthodes

Trois méthodes pour accéder aux nœuds

Trois méthodes pour accéder aux nœuds:
  1. getElementById,
  2. getElementsByTagName
  3. getElementsByName.
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
<script type="text/javascript">
function trouveimg() {
var image = document.getElementById('monimg');
if (image) { image.style.border='3px dashed #ccc'; }
}

window.onload = trouveimg;
</script>

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). Exemple :

window.onload = function() {
mafonction1();
mafonction2();
}

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);
}

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

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.

function trouveimg() {
var imgs,i;
imgs=document.getElementsByTagName('img');
for(i in imgs) {
if(/monimg.gif/.test(imgs[i].src)) { imgs[i].style.border='3px dashed #ccc'; }
}
}

Il est bien plus simple d'utiliser getElementById, puisque nous n'avons pas à parcourir tous les éléments pour retrouver un identifiant unique. Dans notre exemple, nous avons vérifié que l'attribut src de l'objet image contenait 'monimg.gif'. Une méthode plus courante consiste à vérifier la présence d'une classe particulière.

Exemple: L'image contient la classe de style 'nobordure' (class="nobordure") :
JavaScript:
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 #ccc';
}
}
}

Autre exemple: Changer la couleur de chaque titre H2 en bleu
<script type="text/javascript">
function colourh2() {
var h2s,i;
// sélectionne tous les éléments h2
h2s=document.getElementsByTagName('h2');
for(i=0;i<h2s.length;i++) {
// change leur couleur en bleu
h2s[i].style.color='blue';
}
}
// si le navigateur prend en charge DOM, appelle la fonction onload
// createTextNode permet de créer un nouveau nœud de texte
if(document.getElementById && document.createTextNode) {
window.onload=colourh2;
}
</script>

Autre exemple: Ajouter un gestionnaire onclick à chaque lien qui possède l'attribut target pour ouvrir une nouvelle fenêtre de 400x400 pixels.
<script type="text/javascript">
function changeLinks() {
var as,i,islink;
// sélectionne tous les liens et boucle sur eux
as=document.getElementsByTagName('a');
for(i=0;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>

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 de texte nommé 'infos'
<script type="text/javascript">
//<![CDATA[
function test() {
// accéder à la troisième balise ayant l'attribut name="infos"
var age = document.getElementsByName('infos')[2].value;
alert(age + " ans");
}
//]]>
</script>

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.

Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Lundi 18 mars 2019 - Semaine 12 - Saint Cyrille de Jérusalem (Demain: Saint Joseph)
Aujourd'hui, c'est l'anniversaire de Luc Besson (1959-60 ans), réalisateur et producteur français, de Xavier Deluc (1958), acteur français et de Laetitia Hallyday (1975). Autre 18 mars: 1314 : supplice de Jacques de Molay, grand maître des Templiers.
Haut de page Easy-Micro