Les propriétés de navigation DOM sont excellentes lorsque les éléments sont proches les uns des autres. Et sils ne le sont pas? Comment obtenir un élément arbitraire de la page?
Il existe des méthodes de recherche supplémentaires pour cela.
document.getElementById ou simplement id
Si un élément a le id, nous pouvons obtenir lélément en utilisant la méthode document.getElementById(id), peu importe où il se trouve.
Par exemple :
De plus, il existe une variable globale nommée par id qui fait référence à lélément:
… Sauf si nous déclarons une variable JavaScript avec le même nom, alors il a priorité:
Ce comportement est décrit dans la spécification, donc cest une sorte de norme. Mais il est supporté principalement pour la compatibilité.
Le navigateur essaie de nous aider en mélangeant les espaces de noms de JS et DOM. Cest bien pour les scripts simples, intégrés au HTML, mais ce nest généralement pas une bonne chose. Il peut y avoir des conflits de noms. De plus, quand on lit du code JS et quon na pas de HTML en vue, on ne sait pas doù vient la variable.
Ici, dans le tutoriel, nous utilisons id pour référencer directement un élément par souci de concision, quand il est évident de savoir doù il vient.
Dans la vraie vie, document.getElementById est la méthode préférée.
id doit être unique Le id doit être unique. Il ne peut y avoir quun seul élément dans le document avec le id donné.
Sil y a plusieurs éléments avec le même id, alors le comportement des méthodes qui lutilisent est imprévisible, par exemple document.getElementById peut renvoyer nimporte lequel de ces éléments au hasard. Veuillez donc respecter la règle et garder id unique.
document.getElementById, pas anyElem.getElementById La méthode getElementById ne peut être appelée que sur document objet. Il recherche le id donné dans tout le document.
querySelectorAll
De loin, le plus méthode polyvalente, elem.querySelectorAll(css) renvoie tous les éléments à lintérieur de elem correspondant au sélecteur CSS donné.
Ici, nous cherchons tous les éléments <li> éléments qui sont les derniers enfants:
Cette méthode est en effet puissante, car nimporte quel sélecteur CSS peut être utilisé.
Les pseudo-classes dans le sélecteur CSS comme :hover et :active sont également prise en charge. Par exemple, document.querySelectorAll(":hover") renverra la collection avec les éléments sur lesquels le pointeur se trouve maintenant (dans lordre dimbrication: du plus extérieur <html> au plus imbriqué).
querySelector
Lappel à elem.querySelector(css) renvoie le premier élément du CSS donné sélecteur.
En dautres termes, le résultat est le même que elem.querySelectorAll(css), mais ce dernier recherche tous les éléments et en choisit un, tandis que elem.querySelector nen cherche quun. Cest donc plus rapide et aussi plus court à écrire.
correspondances
Les méthodes précédentes recherchaient le DOM.
Lélem.matches (css) ne recherche rien , il vérifie simplement si elem correspond au sélecteur CSS donné. Elle renvoie true ou false.
La méthode est pratique lorsque nous itérons sur des éléments (comme dans un tableau ou quelque chose) et en essayant de filtrer ceux qui nous intéressent.
Par exemple:
les plus proches
Les ancêtres dun élément sont: parent, le parent de parent, son parent et ainsi de suite. Les ancêtres forment ensemble la chaîne de parents de lélément vers le haut.
La méthode elem.closest(css) recherche lancêtre le plus proche qui correspond au sélecteur CSS. Le elem lui-même est également inclus dans la recherche.
En dautres termes, la méthode closest part du élément et vérifie chacun des parents. Sil correspond au sélecteur, alors la recherche sarrête et lancêtre est retourné.
Par exemple:
getElementsBy *
Il existe également dautres méthodes à rechercher pour les nœuds par une balise, une classe, etc.
Aujourdhui, ils sont principalement de lhistoire, car querySelector est plus puissant et plus court à écrire.
Nous les couvrons donc ici principalement par souci dexhaustivité, alors que vous pouvez toujours les trouver dans les anciens scripts.
-
elem.getElementsByTagName(tag)recherche les éléments avec le tag et renvoie la collection dentre eux. Le paramètretagpeut également être une étoile"*"pour « toutes les balises ». -
elem.getElementsByClassName(className)renvoie les éléments qui ont la classe CSS donnée. -
document.getElementsByName(name)renvoie les éléments avec lattributnamedonné, à léchelle du document. Très rarement utilisé.
Par exemple:
Trouvons toutes les balises input à lintérieur du tableau:
"s" lettre! Les développeurs novices oublient parfois la lettre "s". Autrement dit, ils essaient dappeler getElementByTagName au lieu de getElementsByTagName.
Le "s" est absente dans getElementById, car elle renvoie un seul élément. Mais getElementsByTagName renvoie une collection déléments, il y a donc "s" à lintérieur.
Une autre erreur courante du novice est décrire:
Cela ne fonctionnera pas, car il prend une collection dentrées et lui attribue la valeur plutôt quaux éléments quil contient.
Nous devrions soit parcourir la collection, soit obtenir un élément par son index, puis attribuer, comme ceci:
Recherche déléments .article:
Collections en direct
Toutes les méthodes "getElementsBy*" renvoient une collection en direct. Ces collections reflètent toujours létat actuel du document et « mise à jour automatiquement » quand il change.
Dans lexemple ci-dessous, il y a deux scripts.
- Le premier crée une référence à la collection de
<div>. À partir de maintenant, sa longueur est1. - Les seconds scripts sexécute après que le navigateur rencontre un autre
<div>, donc sa longueur est2.
En contraste , querySelectorAll renvoie une collection statique. Cest comme un tableau fixe déléments.
Si nous lutilisons à la place, les deux scripts afficheront 1:
Maintenant, nous pouvons facilement voir la différence. La collection statique na pas augmenté après lapparition dun nouveau div dans le document.
Résumé
Il existe 6 méthodes principales pour rechercher des nœuds dans le DOM:
| Méthode | Recherche par … | Peut cal l sur un élément? | Live? |
querySelector |
Sélecteur CSS | ✔ | – |
querySelectorAll |
Sélecteur CSS | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
tag ou "*" |
✔ | ✔ |
getElementsByClassName |
classe | ✔ | ✔ |
De loin, les plus utilisés sont querySelector et querySelectorAll, mais getElement(s)By* peut être utile sporadiquement ou se trouver dans les anciens scripts.
En plus de cela:
- Il y a
elem.matches(css)pour vérifier sielemcorrespond au sélecteur CSS donné. - Il y a
elem.closest(css)pour rechercher lancêtre le plus proche qui correspond le sélecteur CSS donné. Leelemlui-même est également vérifié.
Et mentionnons une autre méthode ici pour vérifier la relation enfant-parent, car elle est parfois utile:
-
elemA.contains(elemB)renvoie true sielemBest à lintérieur deelemA(un descendant deelemA) ou lorsqueelemA==elemB.