Salut, Javascript, les débuts dans le DOM - logo JS

De retour après une longue période d’absence, pour continuer à parler de Javascript. J’ai donc terminé 2 formations à ce sujet, et j’ai commencé à entrer un peu dans le vif du sujet: modifier du HTML avec Javascript. J’ai obtenu de très bonne base et fais pas mal de chose très sympa avec la formation d’Anthony Welc. Actuellement je suis sur celle d’Openclassrooms, qui va un peu plus loin sur certains points, notamment en ce qui concerne les premières fonctions qui permettent de cibler précisément un élément HTML.

Il y a eu quelques exercices intéressant sur ce sujet sur Openclassrooms et j’ai ressenti le besoin de faire une petite synthèse de cela pour me garder un mémo.

Cet article ne va pas être très long, je vais essayer de les faire au fur et à mesure que j’apprends de nouvelles choses, soit en fonction des problèmes que je rencontre…

 

Le DOM

Le DOM (Document Object Model) est la structure d’une page web. On va donc ici parler un peu de HTML. C’est ce DOM que l’on va pouvoir au fur et à mesure, modifier dynamiquement avec du Javascript. Le DOM est représenté sous forme d’un arbre comprenant des ramifications . Il est bon je pense de penser à un arbre généalogique, tellement il est question de relation parents-enfants…

Voici donc une représentation du DOM, comme tu en as surement déjà vu dans de nombreux cours en ligne.

Javascript, les débuts dans le DOM - Le DOM

 

Chaque rectangle représente un noeud (node en anglais, et non on ne va pas parler de Node JS). On distingue 2 types de noeuds:

  • En bleu  ce sont les noeuds qui correspondent à des éléments HTML,  comme la balise <h1>, <p>, mais aussi la balise <head> ou <body>.  Ces noeuds peuvent avoir des sous-noeuds. Par exemple on dira que h1 est sous-noeud (enfant) de body.
  • En jaune, ces noeuds correspondent au contenu textuel de la page, du texte entre deux balises. Ces éléments ne peuvent pas avoir d’enfant. Ils sont donc systématiquement en bout de ramification.

Là où je trouve une difficulté c’est que les noeuds textuels sont des éléments de texte mais peuvent aussi être des espaces entre balise ou des retours à la ligne…On peut illustrer cela avec la propriété childNodes

childNodes

Pour mettre cette dernière chose en évidence, il te suffit de recopier ce code HTML dans ton éditeur, puis d’aller jeter un   oeil dans la console de ton navigateur. Tu noteras que j’ai intégré le code Javascript dans le HTML, au sein d’une balise script :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Instruments de musiques</title>
</head>

<body>
<h1>Les instruments utilisé en musiques actuelles</h1>
    <div>
        <ul><li>Guitare</li>
            <li id="musicien">Basse</li>
            <li class="sourd ">Batterie</li>
        </ul>
    </div>
    <script>
		console.log(document.body.childNodes);
	</script>
</body>

</html>

Voici le résultat obtenu dans la console:

Javascript, les débuts dans le DOM - console exemple

La console affiche 6 noeuds, alors qu’on a pas 6 balises HTML dans le code à partir de body! La première ligne affichée est un tableau dans lequel on trouve des noms de balise et des éléments text? Tu remarqueras aussi que la longueur de ce tableau (NodeList) est égal à7 . Ce qui est bizarre ici je trouve c’est que le nombre de noeud est bien de 7 (h1/div/ul/li/li/li/script) mais on remarque qu’il arrive à 7 en comptant les noeuds parents (pas les sous-noeuds) et les retours à la ligne, repéré « text » dans le console! J’ai eu un peu de mal à comprendre tout ça au départ… Mais avec quelques tests ça va un peu mieux.

On peut faire les tests suivant pour mettre ça en évidence :

console.log(document.body.childNodes[0]); // => retourne #text
console.log(document.body.childNodes[1]); // => retourne <h1>Les instruments utilisés en musiques actuelles</h1>

Du coup pour afficher « Basse » il faut saisir le code suivant:

    console.log(document.body.childNodes[3].childNodes[1].childNodes[2]);

Plutôt compliquée comme syntaxe… et aléatoire surtout si on fait une mise à jour de la page en ajoutant des balises HTML  supplémentaires, ou simplement si on ajoute un retour à la ligne par inadvertance…

Mémo de la recherche de noeuds dans le DOM

Pour cette partie je vais essayer de faire court parce qu’un mémo qui fait 300000 mots ça sert à rien.

  • document: variable servant à entrer dans la balise html. Toutes les instructions démarrent en générales par document.autreChose;
  • .nodeType:  renvoi un nombre correspondant à un type de noeud. Pour plus de détail, je te conseille de regarder sur le MDN, c’est très bien expliqué! Je n’ai pas tout exploré mais le principe est simple à comprendre en fait;
  • .ELEMENT_NODE: correspond à un type de noeud, un paragraphe ou une div par exemple. Renvoi un nombre;
  • .childNodes: renvoi une liste de noeud (NodeList) exploitable comme un tableau. On peut donc travailler avec et cibler les éléments comme dans un array avec une paire de crochet: .childNodes[2], (cible le 3 ème éléments de la liste),
  • .parentNode : permet d’accéder aux parents d’un noeuds
    console.log(document.body.childNodes[3].parentNode); // => renvoie body dans notre exempleconsole.log(document.parentNode); // => renvoie null, la balise html n'a pas de parent

Je note ce que ces instructions retournent parce que je me surprends parfois à vouloir cibler des éléments avec les mauvaises expressions, ce qui ne donne naturellement rien de bon.

Tout cela est très bien mais un peu lourd en terme de syntaxe, il y a plus simple, on voit ça maintenant!

Naviguer dans le DOM

Il existe des méthodes qui permettent de cibler plus rapidement des éléments du DOM. On peut par exemple demander de cibler le titre h1, ou un li.

Pour cela il existe plusieurs méthodes que je vais résumer sous forme de mémo, histoire de garder un document efficace sous le coude…

Javascript, les débuts dans le DOM - memo - Naviguer dans le DOM

Tu peux télécharger ce document en pdf, pour l’avoir en meilleure qualité : memo-naviguerDansLeDom.

Nous venons de voir très rapidement comment cibler précisément des éléments, mais on peut aller encore un peu plus loin.  Il est possible  d’accéder au contenu des balises et donc de récupérer le contenu d’un paragraphe pour le modifier, changer le texte d’un titre etc… mais on verra ça lors du prochain article.

Cet article est court, mais comme je suis en pleine période de préparation pour la 3WAcademy, j’ai encore plein de choses à voir pour ne pas être trop à la rue pendant la formation.

Je profites de la formation d’Openclassrooms pour compléter la première formation que j’ai suivi, afin de faire plus d’exercice.Le principal problème que je rencontre actuellement, c’est que je me fixe beaucoup de notion à apprendre mais je n’ai pas le temps de les mettre en application sur des minis projets perso. J’apprends donc pleins de choses, que je ne mets pas en pratique tout de suite… Je compte sur la formation à la 3WA pour palier à ce problème…

Je retourne à mon apprentissage…

A bientôt!

Guillaume