| Les deux révisions précédentesRévision précédente | |
| nsi:langages:js:dom [2023/03/06 14:36] – supprimée - modification externe (Unknown date) 127.0.0.1 | nsi:langages:js:dom [2023/03/06 14:36] (Version actuelle) – ↷ Page déplacée de nsi:langages:dom à nsi:langages:js:dom goupillwiki |
|---|
| | ====== Accès au DOM ====== |
| |
| | **DOM :** Document Object Model -- représentation en mémoire de la page html. |
| | |
| | ===== Identifier un élément du DOM ===== |
| | |
| | Prenons une page simple comme : |
| | |
| | <code html linenums> |
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="utf-8"> |
| | <title>JS dans les balises</title> |
| | <link rel="stylesheet" type="text/css" href="styles.css"> |
| | </head> |
| | <body> |
| | <p class="rouge">Blabla, un peu de texte ici.</p> |
| | <p>Et encore du texte là...</p> |
| | <ul id="liste"> |
| | <li>Le premier élément d'une liste à puces.</li> |
| | <li>Le deuxième élément de cette même liste.</li> |
| | <li>Et un troisième.</li> |
| | </ul> |
| | <div> |
| | <h2 class="rouge">Un titre contenu dans un bloc standard div</h2> |
| | <p id="texte1">un texte dans le même bloc.</p> |
| | <p>Un texte avec du <b>gras</b> et un <span id="sp1">bloc en ligne standard</span></p> |
| | </div> |
| | <form> |
| | <input name="profession" type="text"> |
| | <input type="submit" value="Valider"> |
| | </form> |
| | </body> |
| | <script language="javascript" src="script.js"></script> |
| | </html> |
| | </code> |
| | |
| | En plus des noms des balises html, vous remarquez quelques éléments permettant d'identifier tel ou tel bloc : |
| | * ''id'' : on ajoute un identifiant à une balise. L'identifiant doit être unique.\\ //Exemples en lignes 11, 18 et 19// |
| | * ''name'' : très proche de ''id''. On utilise ''name '' dans les formulaires.\\ //Exemple ici en ligne 22.// Dans ce cas, //input// permet à l'utilisateur d'écrire quelque chose. Ce quelque chose sera identifié par le nom -- //name// -- "profession" qui est la valeur associée à ''name''. |
| | * ''class'' : La classe est utilisée pour spécifier un élément de mise en forme CSS. Mais on peut exploiter cet attribut pour identifier une balise particulière. Il arrive sur internet que l'on attribue une classe qui ne correspond à aucune mise en forme et qui ne sert qu'à identifier certains éléments de la page.\\ //Exemple en lignes 9 et 17// |
| | |
| | ===== Parcourir le DOM ===== |
| | |
| | * Le code javascript accède à une variable ''document'' qui représente la racine du DOM. |
| | * On peut également atteindre directement ''document.body'' qui représente la partie ''%%<body>%%'' de la page. |
| | * On peut parcourir les éléments contenus dans ''body'' grâce à une boucle :<code javascript> |
| | for (let item of document.body.children) { |
| | // la boucle se répète en parcourant les nœuds |
| | // enfants de document.body. À chaque boucle, |
| | // item est un nœud enfant de document.body |
| | }</code> |
| | |
| | Cette méthode est possible mais peu efficace : le DOM est plein d'éléments qui ne nous servent pas. Si on saute une ligne dans le document html, ce saut de ligne n'apparaît pas dans la page mais on aura un enfant de plus dans le DOM... |
| | |
| | ===== Atteindre directement un élément ===== |
| | |
| | La méthode native la plus efficace est d'atteindre un élément par son id. |
| | |
| | <code javascript linenums> |
| | let node_ul = document.getElementById("liste"); |
| | // node_ul représente maintenant le nœud <ul> dont l'id est "liste" |
| | let compteur = 0; |
| | for (let item of node_ul.children){ |
| | // parcours des enfants |
| | item.innerHTML = "coucou "+compteur; |
| | compteur ++; |
| | } |
| | </code> |
| | |
| | Voir dans [[https://jsfiddle.net/gromax/8ejo1Ls5/13/|jsFiddle]] |
| | |
| | - en ligne 1, on atteint la balise ''%%<ul>%%'' et on stocke cette référence dans ''%%node_ul%%'' pour la suite, |
| | - en ligne 3, on initialise un compteur, |
| | - en ligne 4, on lance une boucle parcourant les éléments enfants de ''%%node_ul%%'', donc les enfants de la balise ''%%<ul>%%'', donc les balises ''%%<li>%%'', |
| | - en ligne 6, donc pour chaque ''item'' ''%%<li>%%'', on modifie le contenu html -- le ''innerHTML'' -- en écrivant ''%%"coucou"%%'' suivi de la valeur courante du compteur |
| | |
| | Le résultat est que le contenu html des ''%%<li>%%'' est modifié. |
| | |
| | <WRAP important>Comme un id est unique, ''getElementById'' ne doit renvoyé qu'un élément ou rien -- si rien, on obtient ''null''.</WRAP> |
| | |
| | ===== Autres possibilités ===== |
| | |
| | On peut atteindre des éléments par leur ''name'', leur ''class'', leur ''tag'' -- c'est à dire leur type de balise. Mais comme plusieurs items peuvent avoir le même nom, la même classe CSS ou le même type de balise, alors les fonctions ci-dessous, ne renvoient pas qu'un élément mais une collection d'éléments, cette collection pouvant être vide. |
| | |
| | Voici quelques exemples. |
| | |
| | <code javascript linenums> |
| | // by name |
| | let items = document.getElementsByName("profession"); |
| | console.log(items.length); // renvoie 1 |
| | let item = items[0]; |
| | // item contient l'unique élément de name = "profession" |
| | // il s'agit du input. |
| | item.value = "peintre"; // changement du contenu de input |
| | |
| | // by tag |
| | items = document.getElementsByTagName("p"); |
| | console.log(items.length); // renvoie 4, les 4 balises <p> |
| | items[2].style.color = "blue"; // Fait passer le <p> ciblé en bleu |
| | |
| | //by class |
| | items = document.getElementsByClassName("rouge"); |
| | console.log(items.length); // renvoie 2, les 2 items doté de la classe "rouge" |
| | items[0].style.display = "None"; // Cet élément n'est plus affiché |
| | </code> |
| | |
| | Voir dans [[https://jsfiddle.net/gromax/9hkcoxrL/18|jsFiddle]]. |
| | |
| | ===== jQuery ===== |
| | |
| | [[https://jquery.com/|jQuery]] est un module javascript extrêmement utilisé. Tous les sites beaux et animés en JS l'utilisent. C'est un module très léger qui ajoute de grandes fonctionnalités notamment pour sélectionner les éléments de la page. |
| | |
| | Pour utiliser jQuery, c'est très simple : il suffit d'ajouter ce lien dans la partie ''%%<head>%%'' de la page - l'exemple est donné pour une version 3.5.1 de jQuery : |
| | |
| | <code html> |
| | <script src="jquery-3.5.1.min.js"></script> |
| | </code> |
| | |
| | <WRAP tip>Le nom de fichier est suivi de ''min'' ce qui signifie que le fichier ''.js'' a été **minifié**. Ce n'est pas vraiment une compression bien que l'idée est de réduire la taille. Minifié, c'est enlever tous les caractères inutiles du fichier ''.js'', changer des noms de variables pour les rendre plus courtes... Après cette étape, le fichier ''.js'' est plus léger mais quasiment illisible.</WRAP> |
| | |
| | Ensuite, jQuery met à disposition des fonctions très utiles. Comme on se retrouve à constamment demander des fonctions jQuery, pour ne pas avoir à écrire ''jquery'' tout le temps, on a choisi un raccourci : ''$''. Donc dans un fichier JS, quand vous voyez ''$'', il est presque certain qu'il s'agit de jQuery. |
| | |
| | Ci-dessous, un exemple de code rendu très simple par jQuery qui sélectionne tous les éléments ''%%<p>%%'' et les rend invisibles. |
| | |
| | <code javascript> |
| | $("p").hide(); |
| | </code> |
