Chargement...

Sélectionner des éléments

Une étagère de boulanger garde un titre et trois fiches. Le titre dit Rye. Les fiches nomment le service : Morning, Noon et Evening. La dernière fiche porte aussi la classe sold. L'étagère est un main d'id shelf. Dedans, un h2 d'id loaf, puis trois éléments p de classe tag. Sélectionner, c'est demander au document vivant ces nœuds sous un nom que tu choisis. document.getElementById("loaf") rend le titre, et son texte est Rye. document.getElementsByClassName("tag") rend une liste vivante de longueur 3. document.querySelector(".tag") rend Morning, la première fiche. document.querySelectorAll(".tag") rend une liste fixe, et l'index 1 est Noon. Un nom que l'étagère n'écrit jamais vaut null depuis querySelector, et une liste de longueur 0 depuis querySelectorAll.

Cinq appels, pas une descente dans l'arbre

La page DOM nommait le parent d'un titre et comptait les enfants éléments face à tous les nœuds. Ici on ne lit ni parentElement, ni nextElementSibling, ni children, et on n'appelle pas Math. L'arbre est déjà là. Tu distingues quel appel rend un nœud, quel appel rend une liste, et quel résultat veut dire que rien n'a correspondu.

Ce que chaque appel rend

Compte sur l'étagère qui ne contient que le titre et les trois fiches. Le fichier de lecture, plus bas, ajoute un autre paragraphe, donc le compte des éléments p y change.

📊 Ce que chaque appel rend

Appel Ce qui revient Sur cette étagère Facile à confondre
getElementById("loaf") un élément, ou null texte du titre Rye une liste à indexer
getElementsByClassName("tag") HTMLCollection vivante longueur 3 écrire le point, comme dans .tag
getElementsByTagName("p") HTMLCollection vivante longueur 3 le titre, qui est un h2
querySelector(".tag") premier trouvé, ou null la fiche Morning toutes les fiches
querySelectorAll(".tag") NodeList statique longueur 3 ; l'index 1 est Noon une collection vivante
querySelectorAll(".oven") NodeList vide longueur 0 null

La méthode de classe et un sélecteur CSS n'écrivent pas le point de la même façon. getElementsByClassName("tag") veut le nom nu tag. getElementsByClassName(".tag") cherche une classe qui s'appelle littéralement .tag et rend la longueur 0. querySelector veut du CSS, donc le point reste sur .tag. querySelector("tag") cherche un élément dont le nom de balise est tag, n'en trouve aucun et rend null. L'index 0 est la première fiche. L'index 1 est Noon. La liste de getElementsByClassName est vivante : une page plus tard qui ajoute une autre fiche tag fait grandir la longueur. querySelectorAll garde la longueur du moment de l'appel. Evening porte deux classes, tag et sold, donc il est dans la liste de longueur 3 et c'est aussi l'unique trouvé pour sold.

Un id, un élément

Un id est censé être unique sur la page. getElementById rend cet unique élément, ou null si l'id est absent. Il ne rend pas de liste, et il n'existe que sur document, pas sur un élément.

Un id

javascript 
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);

La première ligne est Rye. La seconde est false, parce que le titre est sur l'étagère. Si deux éléments partageaient l'id loaf, l'appel rendrait quand même seulement le premier du document.

Nom de classe et nom de balise

Les deux appels rendent une HTMLCollection vivante. Lis length avant de prendre une fiche. Compte sur l'étagère à quatre éléments, pas dans le fichier de lecture.

Classe et balise

javascript 
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);

Les lignes sont 3, 3 et 1. Trois fiches partagent tag. Les trois sont des éléments p, le titre est un h2, donc sur cette étagère le compte de balise rejoint le compte de classe. Seul Evening a sold. getElementsByClassName(".tag") est un autre appel : le point ne fait pas partie du nom de classe, donc cette longueur est 0.

Le premier trouvé CSS

querySelector rend un élément, le premier dans l'ordre du document, ou null.

Premier trouvé

javascript 
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);

La première ligne est Morning. La seconde est Evening. #shelf .sold veut dire un élément de classe sold dans l'étagère, pas l'étagère elle-même. document.getElementById("shelf").querySelector(".sold") part de l'étagère et tombe sur cette même fiche Evening.

Tous les trouvés, puis un index

querySelectorAll rend chaque trouvé dans une NodeList statique. La liste peut être vide. Elle n'est pas null.

Tous les trouvés

javascript 
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);

La longueur est 3. L'index 1 est Noon. L'index 0 est Morning, l'index 2 est Evening. Cette liste ne grandit pas si un script plus tard ajoute une fiche. La HTMLCollection de getElementsByClassName("tag") grandirait. L'une est un instantané. L'autre reste vivante.

Un nom que l'étagère n'a pas écrit

Demande un id et une classe qui ne sont pas dans le fichier.

Rien n'a correspondu

javascript 
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);

La première ligne est null. La seconde est null. La troisième est 0. querySelectorAll rend encore une liste quand rien ne correspond, donc tu lis la longueur 0, et la liste elle-même n'est pas null. getElementById n'a pas de liste à rendre, donc un échec est null, pas 0.

Une ligne sur la page

Un paragraphe dit combien de fiches tag il y a, quelle est la première, et quelle est la fiche sold. Le script est à la fin de body, une fois les éléments en place. La ligne n'a pas la classe tag, donc elle n'est pas l'une des trois.

Démo de page — trois fiches

html 
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>

Le paragraphe affiche 3 / Morning / Evening. Dans ce fichier, getElementsByTagName("p") compte 4, parce que la ligne est un p de plus. querySelectorAll(".tag") compte toujours 3. La page suivante change le HTML des éléments que ces appels ont déjà trouvés.

Vérifie l'étagère

  1. Note le texte du titre et attends Rye, puis le test null et attends false
  2. Note la longueur de classe, celle de p et celle de sold : 3, 3 et 1
  3. Note le texte du premier .tag et attends Morning, puis #shelf .sold et attends Evening
  4. Note la longueur de querySelectorAll et attends 3, puis l'index 1 et attends Noon
  5. Note l'id absent et le querySelector absent et attends null les deux fois
  6. Note querySelectorAll(".oven").length et attends 0
  7. Lis le paragraphe et attends 3 / Morning / Evening

Mauvais appel

La page reste ouverte. L'appel que tu as écrit a demandé autre chose.

  • Passer .tag à getElementsByClassName ; le point n'appartient qu'à un sélecteur CSS
  • Passer tag sans point à querySelector et attendre les fiches
  • Lire l'index 1 comme la première fiche
  • Prendre un échec de querySelectorAll pour null au lieu d'une longueur 0
  • Prendre un échec de getElementById pour une liste de longueur 0
  • Compter getElementsByTagName("p") dans le fichier de lecture et attendre 3
  • Appeler .map sur la HTMLCollection ; ce n'est pas un tableau
  • Lire parentElement sur cette page ; c'était la page de l'arbre

Tu repars avec ça

  • getElementById rend un élément, ou null
  • getElementsByClassName et getElementsByTagName rendent une HTMLCollection vivante
  • La méthode de classe veut tag, pas .tag
  • querySelector rend le premier trouvé CSS, ou null
  • querySelectorAll rend une NodeList statique ; un échec a la longueur 0
  • L'index 0 est Morning et l'index 1 est Noon
  • La page suivante change le HTML d'éléments que tu as déjà sélectionnés

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 45 de 45
Javascript Tutoriel