De quels sélecteurs JavaScript dispose-t-il ?

Les sélecteurs JavaScript incluent : getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Quels sont les sélecteurs en JavaScript ?

Les sélecteurs JavaScript couramment utilisés incluent getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll().

1. La méthode document.querySelector()

querySelector() renvoie uniquement le premier élément qui correspond au sélecteur spécifié. Si vous devez renvoyer tous les éléments, veuillez plutôt utiliser la méthode querySelectorAll()

(1) Récupérez l'élément avec id="demo" dans le document :

document.querySelector("#demo");

(2) Récupérez l'élément du premier p du document

document.querySelector(“p”);

(3) Obtenez le premier élément avec class="example" dans le document

document.querySelector(".example");

(4) Obtenez le premier élément p avec class="example" dans le document :

document.querySelector(“p.example”);

(5) Obtenez la "cible " attribut dans le document Le premier élément a :

document.querySelector(“a[target]”);

(6) Lorsqu'il y a plusieurs sélecteurs

document.querySelectorAll(’.ynqc’)

2. document.getElementById()

Cette méthode renverra un objet nœud correspondant à l'attribut id, qui est unique à l'objet document Cette méthode ne peut être appelée que via sa fonction. La méthode d'utilisation est la suivante : document.getElementById('idName');

3. getElementsByTagName()

Cette méthode renvoie un tableau d'objets (htmlCollection). collection pour être précis), l'ordre des éléments renvoyés est leur ordre dans le document. La chaîne passée à la méthode getElementsByTagName() peut être insensible à la casse. La méthode d'utilisation est la suivante : document.getElementsByTagName(tagName);

. 4. getElementsByClassName()

Cette méthode est utilisée pour obtenir l'élément avec le nom de classe spécifié. Cette méthode renvoie une collection de tous les éléments avec le nom de classe spécifié dans le document en tant qu'objet NodeList. Un objet NodeList représente une liste ordonnée de nœuds. Pour l'objet NodeList, nous pouvons accéder aux nœuds de la liste via le numéro d'index du nœud dans la liste des nœuds (le numéro d'index commence à 0), nous devons donc parfois spécifier l'indice lors de son utilisation. La méthode d'utilisation est la suivante : document.getElementsByClassName('className');

5. La méthode document.getElementsByName()

getElementsByName() peut renvoyer une collection d'objets avec le nom spécifié.

Cette méthode est similaire à la méthode getElementById(), mais elle interroge l'attribut name de l'élément au lieu de l'attribut id.

De plus, comme l'attribut name dans un document peut ne pas être unique (par exemple, les boutons radio des formulaires HTML ont généralement le même attribut name), toutes les méthodes getElementsByName() renvoient un tableau d'éléments au lieu d'un seul élément.

6. La méthode document.querySelectorAll()

querySelectorAll() renvoie tous les éléments du document qui correspondent au sélecteur CSS spécifié et renvoie un objet NodeList.

L'objet NodeList représente une collection de nœuds. Il est accessible par index, à partir de 0.

Conseils : vous pouvez utiliser la propriété length de l'objet NodeList pour obtenir les propriétés d'élément qui correspondent au sélecteur, puis parcourir tous les éléments pour obtenir les informations souhaitées.

【Apprentissage recommandé : Tutoriel avancé javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!