Javascript - Manipulation du DOM

Transcription

1 Javascript - Manipulation du DOM 1 Référence Vous trouverez sur le site les détails de l API HTML5. Introduction Les fonctions ayant longtemps coexisté pour la sélection de nœuds dans le DOM sont getelementbyid et getelementsbytagname (depuis DOM Level ). Leur nom est relativement explicite. Elles permettent de cibler un élément par son identifiant, l attribut id, ou par son nom. Une fois l objet obtenu par retour de ces fonctions, on peut accéder en lecture ou en modification à ses propriétés (attributs, style, etc.). On les applique sur des interfaces, telles que l objet document qui fait référence à la page web courante et qui implémente en réalité l interface Document définie dans la première version de la spécification DOM. Cependant, malgré leur efficacité, ces fonctions se sont révélées limitées face à des documents dont l arborescence devient de plus en plus complexe, et ne permet pas toujours de déterminer les éléments par leurs identifiants uniques ou par leur nom. Il est bien possible de combiner toutes ces fonctions sur des ensembles d éléments, mais ce n est pas très pratique à mettre en place puisqu on tend à discriminer les groupes de balises HTML par leurs classes ou leur parenté, voire à d autres propriétés. L idéal pour arriver à ces fins étant de se baser sur la syntaxe des sélecteurs CSS qui décrit déjà tous ces principes, pseudo-classes y compris. Les frameworks JavaScript, tels que jquery, ont introduit des alternatives pour pallier ce manque et implémenter directement ces algorithmes, avec pour inconvénient des performances moindres. En complément à ce succès, ont ensuite été inaugurées nativement des fonctions remplissant parfaitement ce rôle :getelementsbyclassname, mais aussi et surtout queryselector et queryselectorall. Elles ont bien sûr pour avantage d être interprétées directement par le navigateur, et peuvent aussi être interrogées par les frameworks JavaScript pour gagner en performance si ceux-ci détectent leur support. 3 getelementbyid() Renvoie un élément dont on spécifie l identifiant (attribut id), et null sinon. 1 <h1 id="titre">html5!</h1> 4 var element = document.getelementbyid("titre"); 5 alert(element.textcontent); // Affiche "HTML5!" 6 </script> 4 getelementsbytagname() Renvoie un ensemble d éléments dont le type est spécifié.

2 5 Propriétés et méthodes DOM var elements = document.getelementsbytagname("img"); La variable elements obtenue est de type nodelist. deux manières : elements.item(1); elements[1]; Il en va de même pour les fonctions suivantes. getelementsbyclassname() Renvoie un ensemble d éléments dont on spécifie la classe. var elements = document.getelementsbyclassname("maclasse"); queryselector() Retourne le premier élément qui correspond au sélecteur spécifié (CSS). var el = document.queryselector("#menu ul li.sousmenu"); queryselectorall() Retourne tous les éléments qui correspondent au sélecteur spécifié (CSS). Chacun de ses éléments est accessible de var titres = document.queryselectorall("article>h1"); var lignespaires = document.queryselectorall("table tr:nth-child(even)"); 5 Propriétés et méthodes DOM Les éléments DOM renvoyés par les fonctions précédentes sont de type HTMLElement. Il s agit d une interface basique regroupant les propriétés reflétant des caractéristiques intrinsèques aux éléments HTML présents dans le document, ou plutôt des nœuds du DOM au travers desquels ils sont représentés. Une partie des attributs HTML correspond à des propriétés DOM éponymes. Dans le tableau ci-dessous, vous trouverez quelques membres de l interface HTMLElement. Propriété ou méthode Description Type innerhtml Contenu HTML d un élément. string outerhtml Contenu HTML et l élément lui-même. string textcontent ou innertext Contenu texte simple. string style Ensemble des propriétés CSS de l élément. CSSStyleDeclaration style.* Propriétés CSS individuelles, accessibles par des string membres écrits en camelcase : style.width, style.fontsize, style.liststyletype, etc. tabindex Index de tabulation. long id Valeur de l attribut id. string lang Valeur de l attribut lang. string title Valeur de l attribut title. string tagname Type de l élément (nom de la balise). string classname Valeur de l attribut de classe affecté à l élément. string classlist énumération des classes individuelles présentes DOMTokenList dans l attribut class. childnodes Liste des nodes enfants contenus dans l élément. NodeList firstchild Premier node enfant. HTMLElement lastchild Dernier node enfant. HTMLElement parentnode Node parent. HTMLElement nextsibling Node frère suivant. HTMLElement prevsibling Node frère précédent. HTMLElement attributes Attributs de l élément. NamedNodeMap getattribute(attr) Renvoie la valeur de l attribut attr. setattribute(attr,val) Modifie la valeur de l attribut attr par val. removeattribute(attr) Supprime l attribut attr si celui-ci existe. focus() Donne le focus à l élément. blur() Retire le focus.

3 6 Méthodes de manipulation DOM 3 6 Méthodes de manipulation DOM 6.1 createelement() Crée dynamiquement un nœud DOM. Le nom de l élément HTML est indiqué (sans chevrons). nouveaudiv = document.createelement("div"); nouveaudiv.innerhtml = "<p>je suis <b>nouveau</b>!</p>"; Cet élément n est créé que dans les "limbes" du document, et ne devient visible qu après insertion à l aide d une des fonctions suivantes. 6. appendchild() Insère un nœud DOM enfant dans un parent. paragraphe = document.createelement("p"); paragraphe.innerhtml = "Je suis <b>nouveau</b>!"; document.body.appendchild(paragraphe); 6.3 removechild() Retire un enfant à son parent. paragraphe = document.queryselector("body>p"); document.body.removechild(paragraphe); 6.4 insertbefore() Insère un nœud DOM avant un autre. nouveauli = document.createelement("li"); nouveauli.innerhtml = "Je suis <b>nouveau</b>!"; var uneliste = document.getelementsbytagname("ul")[0]; uneliste.insertbefore(nouveauli,uneliste.lastchild); 6.5 createtextnode() Crée un nœud texte. nouveautexte = document.createtextnode("beau comme un DOM"); document.queryselector("body").appendchild(nouveautexte); 7 Méthodes pour formulaires En plus des fonctions évoquées, coexistent des méthodes propres aux API d éléments particuliers. Parmi eux, les champs d entrée de type <input> Quelques méthodes de l API Input Propriété ou méthode Description Retour value Retourne la valeur du champ. Peut être modifié (avec = ) pour changer la valeur. checked Retourne true si coché, ou false si décoché. boolean files Liste des fichiers sélectionnés. Renvoie null si ce n est FileList pas un champ d entrée de fichiers. valueasdate Peut être modifié (avec = ) pour changer la valeur. Date valueasnumber Peut être modifié (avec = ) pour changer la valeur. Number list Retourne l élément datalist indiqué par l attribut list. HTMLElement selectedoption Retourne l option de liste sélectionnée. HTMLElement stepup(n) Incrémente la valeur de n. stepdown(n) Décrémente la valeur de n.

4 8 Gestionnaires d événements 4 8 Gestionnaires d événements Les gestionnaires d événements sont des fonctions JavaScript associées à un événement utilisateur ou navigateur. Une fois l événement déclenché (par exemple un clic, une touche pressée, ou une page chargée), la fonction est exécutée. Un gestionnaire d événement est, en général, déclaré pour un nœud HTML : 1 <button id="bouton1" value="cliquez-moi!"> 4 var objetbouton1 = document.getelementbyid('bouton1'); 5 6 objetbouton1.onclick = function(event) { 7 // Un clic a été effectué sur le bouton 8 // event contient les propriétés de l'événement 9 } 10 </script> Cette méthode exploite la propriété DOM onclick du nœud, qui correspond à l événement click. Il en va de même pour tous les autres événements, qui sont également préfixés par on. En revanche, cela présente l inconvénient de ne pouvoir assigner qu une fonction à la fois. La spécification DOM Level prévoit deux méthodes nommées addeventlistener() pour ajouter une fonction associée et removeeventlistener() pour la retirer: 1 <button id="bouton1" value="cliquez-moi!"> 4 var objetbouton1 = document.getelementbyid('bouton1'); 5 6 objetbouton1.addeventlistener("click",function(event) { 7 // Un clic a été effectué sur le bouton 8 // event contient les propriétés de l'événement },false); // false = phase de capture 9 </script> Les valeurs courantes possibles pour la souris sont click, dblclick, mouseup, mousedown, mouseover, mouseenter, mouseleave, mousemove. Pour le clavier : keypress, keydown, keyup, avec la propriété event.keycode pour savoir quelle touche a été utilisée. Pour le navigateur : load, error, unload, resize. Pour les formulaires : focus, blur, change, reset, select, submit. Il en existe bien d autres, par exemple pour la navigation tactile. 9 Autres fonctions Quelques autres fonctions JavaScript ont su se rendre indispensables. En voici un bref aperçu. Fonction Rôle Détail des arguments setinterval(fct,ms) Exécute la fonction fct fct :nomdefonctionjavascript. toutes les ms millisecondes. ms : intervalle en millisecondes. Renvoie un objet utilisable avec clearinterval(). clearinterval(intv) Supprime un intervalle créé intv : référence renvoyée par setinterval(). par setinterval(). settimeout(fct,ms) Exécute la fonction fct fct : nom de fonction JavaScript. après ms millisecondes. ms : délai en millisecondes. Renvoie un objet utilisable avec cleartimeout(). cleartimeout(to) Efface un timeout programmé to : référence renvoyée par settimeout(). avec settimeout(). document.print() Appelle la boîte de dialogue d impression du document. alert(txt) Affiche un pop-up d alerte. txt : chaîne de texte à afficher.

5 10 Prise en charge 5 10 Prise en charge La bonne nouvelle est que le support est quasi complet pour les navigateurs récents qui comprennent HTML 5, et que de ce fait les fonctions évoquées dans ce document sont toutes disponibles. La mauvaise est que le support parfait des différents niveaux DOM est un vaste sujet... Le site Quirksmode met à disposition des tableaux de compatibilité pour les navigateurs d un certain âge.