JS dans les balises
Blabla, un peu de texte ici.
Et encore du texte là...
- Le premier élément d'une liste à puces.
- Le deuxième élément de cette même liste.
- Et un troisième.
Un titre contenu dans un bloc standard div
un texte dans le même bloc.
Un texte avec du gras et un bloc en ligne standard
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 ''%%%%'' de la page.
* On peut parcourir les éléments contenus dans ''body'' grâce à une boucle :
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
}
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.
let node_ul = document.getElementById("liste");
// node_ul représente maintenant le nœud dont l'id est "liste"
let compteur = 0;
for (let item of node_ul.children){
// parcours des enfants
item.innerHTML = "coucou "+compteur;
compteur ++;
}
Voir dans [[https://jsfiddle.net/gromax/8ejo1Ls5/13/|jsFiddle]]
- en ligne 1, on atteint la balise ''%%
// 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
items[2].style.color = "blue"; // Fait passer le
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é
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 ''%%%%'' de la page - l'exemple est donné pour une version 3.5.1 de jQuery :
%%'' et les rend invisibles.
$("p").hide();