Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
16 novembre 2009 1 16 /11 /novembre /2009 01:00

Le navigateur lit la page HTML et l'affiche : ça c'est pour vos yeux. En la lisant il en construit aussi une représentation en mémoire, représentation qui contient l'équivalent de tout le code HTML. Cette représentation s'appelle le DOM. Chaque élément de la page, même le plus infime (par exemple un br) s'y retrouve, sous une forme accessible à JavaScript. Une fois en possession de la référence de cet élément on peut faire ce qu'on veut, par exemple :

 var r=/* cuisine savante pour obtenir la référence */; var bul=r.getAttribute('title'); // le texte de l'attribut 'title' s'il existe r.setAttribute('title',bul.toUpperCase() )// nouvelle valeur de 'title', en majuscules r.style.display='none'; // cache l'élément /* etc., etc. */ 

Cet article et les suivants traitent de la /* cuisine savante pour obtenir la référence */

Trouver un élément par son identifiant

De loin le procédé le plus commode.

 var r=document.getElementById('mon_menu'); 
… met dans r la référence de l'élément porteur de l'identifiant mon_menu.  L'élément , au singulier, parce qu'un identifiant doit être unique dans une page. Cela dit, l'élément peut être n'importe quoi : un div, un lien a, etc. .

Si aucun élément ne porte cet identifiant la référence est nulle, et on peut la tester. Exemple benêt :

 if (!r) alert("Comment ça ? Pas de menu ?"); 

Trouver des éléments par leur balise

Très fréquent aussi, emploie la méthode getElementsByTagName (remarquez le pluriel de  Elements ).

Exemple 1, recherche dans toute la page :

 var rr=document.getElementsByTagName('a') ; 
… récupère dans un  presque tableau  (précisions plus loin) les références de toutes les ancres a du document.

Exemple 2, recherche restreinte à une partie de la page :

 var banniere=document.getElementById('top'); var rr=banniere.getElementsByTagName('a'); 

On peut aussi l'écrire en une seule instruction :

 var rr=document.getElementById('top').getElementsByTagName('a'); 

Dans les deux cas on récupère d'abord la référence de l'élément porteur de l'identifiant top (= la bannière) puis, dans rr, les références de toutes les ancres de la bannière et d'elle seulement.

Qu'est-ce qu'un  presque tableau  ? Dans le jargon JavaScript il s'agit d'une  collection . Elle ne possède pas toutes les méthodes d'un tableau JavaScript (= un objet Array), telles que push ou pop, on peut cependant la parcourir comme un tableau et utiliser sa longueur rr.length. Autre particularité, cette collection est tenue à jour en permanence : si on ajoute un lien dans la bannière la collection augmentera aussitôt sans qu'il faille invoquer une nouvelle fois getElementsByTagName.

Quelques applications

En pratique comment exploite-t-on cette collection ?

Assez souvent on s'intéresse à un élément précis, souvent le premier ou, parfois, le dernier. Ainsi la référence du body s'obtient-elle par

 rBody=document.getElementsByTagName('body')[0]; 

Dans ce cas précis on peut aussi employer document.body. Mais pour la référence de l'en-tête il n'y pas d'autre choix que

 rHead=document.getElementsByTagName('head')[0]; 
… (dans une page bien constituée il n'y a qu'un seul exemplaire de chacun de ces éléments !)

Sinon, un exemple typique ressemble à

 var rr=document.getElementById('top').getElementsByTagName('a'); for (var i=0,r ; r=rr[i]; i++) {/* traitement de r */} 

Ces deux procédés sont à connaître par cœur. :-)


Pour mémoire : d'autres liens JavaScript

par Aïe mes doigts ! - dans JavaScript Mania
commenter cet article

commentaires

Quichottine 31/05/2010 15:15


Merci encore.
Je vais regarder tout cela à tête reposée et tester sur mon blog essai avant de mettre en ligne. :)

Tu m'as donné un sacré coup de main ! Je n'aurais pas été capable de trouver tout cela seule... mais tester, je crois que je vais pouvoir. :)

Merci infiniment.

Bonne fin de journée à toi.


AïmD ! 31/05/2010 15:32



Bon courage ! ;-)



Quichottine 31/05/2010 13:46


Ah ... j'allais presque oublier. Bien sûr que tu seras présent pour tes idées géniales... sous ma bannière insolite.

:-)


AïmD ! 31/05/2010 15:01



Euh... on peut préférer une formule plus sobre.... :-D



Quichottine 31/05/2010 13:45


Là... Chapeau ! Je n'en attendais pas autant, mais tu as tout à fait compris ce que je voulais... MERCI !

(un immense, et très fort, très sincère, "merci"... ici, je ne peux pas te le mettre autrement qu'avec ces majuscules...)

Je vais tester ce que ça donne mais je suis sûre que ça va marcher. Tu me simplifies même la vie par rapport à ce que je désirais, c'est génial !

Merci encore, et une merveilleuse journée pour toi.


AïmD ! 31/05/2010 15:00



Ouhhh... la réponse était attendue avec impatience, dirait-on ! Je ne l'ai pas testée, j'avoue, mais elle devrait rouler sans accroc. Choses à garder en tête :


le changement de bannière ne sera pas instantané : on verra d'abord la bannière "classique"

la double ou triple bannière sera présente sur toutes les pages. Donc veiller à garder des images légères et ne pas pousser trop loin (15 variantes seraient de trop !)

si tu es attentive à ton référencement, le système est peut-être dangereux (je ne suis pas expert en la matière) : plusieurs fois un lien vers la même url (accueil du blog), possible que
Gogol tousse un peu.



Pour le dernier point (référencement), si tu veux t'en occuper (pas obligatoire du tout) il faudrait abandonner le système de la succession de bannières complètes (=les div #banniereN) et
"saupoudrer" les variations sur les diverses parties de l'en-tête :


les deux ou trois images sont dans le lien vers l'accueil, lien qui reste unique (pour faire plaisir à G.) . Elles ne portent plus des identifiants #banniere1 etc. mais des classes .banniere1
etc. (la raison plus loin)

les autres éléments (texte "merci Aspro" et toutes autres fioritures) sont eux aussi écrits en plusieurs variantes, chacune portant la classe convenable. Ce qui figure dans toutes les
variantes ne porte pas de classe du tout.

dans le(s) CSS et les articles, les identifiants sont bien sûr remplacés par des classes



C'est parce qu'on répartit les indications 'banniere1, banniere2' sur plusieurs morceaux de l'en-tête qu'il faut recourir à des classes au lieu d'identifiants (puisqu'un identifiant n'existe
qu'en un seul exemplaire dans une page).


Voilà, voilà....



Quichottine 31/05/2010 12:10


Grâce à Kinou, j'ai lu ton billet sur la façon de modifier son blog pour certaines catégories d'articles.

J'ai ensuite atterri ici, parce que je ne veux pas transformer tout le blog mais seulement la bannière de mon blog lorsque j'y parle de livres.

Mon but étant de pouvoir y utiliser sur certaines articles la bannière que j'ai mise sur mes "pages".

J'aurais voulu, au départ, quelque chose de tout simple, qui ne fasse que changer la bannière et que je puisse intégrer dans l'article lorsque je l'écris puisque je ne change rien au reste.

As-tu une solution simple, en html, ou faut-il que j'aménage ta solution de js alors que tu précises qu'elle ne sera pas efficace pour ceux qui en limitent l'utilisation par choix ou par obligation
?

Je n'y connais rien en java script et j'ai un peu peur de me planter. :-)

Merci à l'avance pour ta réponse.


Aïe mes doigts ! 31/05/2010 13:22



Si (et seulement si !) j'ai bien compris, tu voudrais pouvoir incorporer à l'article "quelque chose" (que tu me charges de produire :-) ) qui provoque un changement de bannière ?


Il y aurait une possibilité sans JS, en pur HTML/CSS (ça fait envie, hein ?) :


Etape 1 : modifier l'en-tête du blog pour y incorporer toutes les variantes de bannière (pas trop nombreuses tout de même), chaque variante étant logée dans un div doté d'un identifiant.


Le source actuel ressemble à ça, je pense:



Merci à Koulou pour cette photo


Le nouveau source serait




Merci à Koulou pour cette photo



Merci à Bren du fat ! pour ses idées géniales :-)



Etape 2 : modifier le ou les CSS du blog


#banniere2, #banniere3, #banniere4 {/*tout ce que tu veux*/; display:none}


Etape 3 : ajouter dans l'article qui doit faire changer la banniere ceci :



#banniere1 {display:none}
#banniere2 {display:block}



Pièges (si mal compris) et variantes (si compris) :


Si tu es en configuration classique, l'article fera changer la bannière où qu'il se trouve : page d'accueil ou page d'article (mais pas la liste complète des articles ni les archives, qui ne
contiennent qu'un début d'article sans aucun balisage).


Si ce n'est pas ce que tu veux, il faut passer en configuration avancée (si pas déjà fait) et ne modifier l'en-tête que dans la configuration "Article". La configuration "Accueil" demeure
inchangée (surtout pas de #banniere1, #banniere2 dans l'en-tête). Ainsi, le petit bout de CSS contenu dans l'article n'aura aucun effet sur les pages d'accueil et n'agira que sur les pages
"article seul". Est-ce ce que tu désires ?



Archives