Un moyen simple de sélectionner des éléments DOM à l'aide de JS

JS est une méthode simple pour sélectionner des éléments DOM Cet article résume les différentes méthodes de js pour sélectionner DOM, qui peuvent être utilisées pour apprendre js. connaissances~ ~

Méthodes de sélection des éléments du document :

1. Sélectionnez les éléments par ID (getElementById)

1 ) Utilisation :

document.getElementById("domId") Où, domId est la valeur de l'attribut id de l'élément à sélectionner

2) Compatibilité : inférieure que la version IE8 L'implémentation de la méthode getElementById par le

navigateur IE est insensible à la casse du numéro d'identification de l'élément et renverra les éléments correspondant à l'attribut name.

2. Sélectionnez les éléments par nom (getElementsByName)

1) Utilisation : document.getElementsByName("domName")

Parmi eux, domName est la valeur de l'attribut name de l'élément à sélectionner

2) Description : a. La valeur de retour est une collection nodeList (différente de Array)

b . Contrairement à l'attribut ID, l'attribut name n'est valable que dans quelques éléments DOM (form form, form element, iframe, img). En effet, l'attribut name a été créé pour faciliter la soumission des données du formulaire.

c. Lors de la définition de l'attribut name pour les éléments form, img, iframe, applet, embed et object, un attribut nommé avec la valeur de l'attribut name sera automatiquement créé dans l'objet Document. Par conséquent, l'objet

dom correspondant peut être référencé via document.domName

3) Compatibilité : les éléments avec des valeurs d'attribut ID correspondantes dans IE renverront également

3. Sélectionnez les éléments par nom de balise (getElementsByTagName)

1) Méthode d'utilisation : element.getElementsByTagName("tagName" )

Parmi eux, element est un élément DOM valide (y compris le document)

tagName est le nom de balise de l'élément DOM

2) Description : a. est une collection nodeList (différence dans Array)

b. Cette méthode ne peut sélectionner que les éléments descendants de l'élément qui appelle cette méthode.
c. tagName n'est pas sensible à la casse
d. Lorsque tagName est *, cela signifie sélectionner tous les éléments (sous réserve de la règle b.)
e HTMLDocument définira certains attributs de raccourci pour accéder aux nœuds de balise. Par exemple : les attributs images, formulaires et liens du document pointent vers la collection d'éléments de balise ,

, , tandis que document.body et document.head pointent toujours vers le corps et la tête. balises (lorsque la déclaration head n'est pas affichée, le navigateur créera également l'attribut document.head)

4. Sélectionnez les éléments via les classes CSS (getElementsByClassName) .

1) Comment utiliser : element.getElementsByClassName("classNames")

Parmi eux, l'élément est un élément DOM valide (y compris le document)
classNames est une combinaison de noms de classes CSS (les espaces sont utilisés entre plusieurs noms de classe, qui peuvent être séparés par plusieurs espaces),
Par exemple, element.getElementsByClassName("class2 class1") sélectionnera les éléments dont les descendants d'éléments ont à la fois les styles class1 et class2 appliqués (le style les noms ne sont pas dans l'ordre)

2) Description : a. La valeur de retour est une collection nodeList (différente de Array)

b. éléments de l'élément qui appelle cette méthode.

3) Compatibilité : les navigateurs IE8 et inférieurs n'implémentent pas la méthode getElementsByClass

Name

Pass Sélecteur CSS. Sélectionner des éléments

1) Méthode d'utilisation : document.querySelectorAll("selector")

Parmi eux, le sélecteur est un sélecteur CSS légal

2) Description : a. La valeur de retour est une collection nodeList (différente de Array)

3) Compatibilité : les navigateurs IE8 et inférieurs ne prennent en charge que la syntaxe de sélection standard CSS2

Voici les différentes méthodes permettant à JS de faire fonctionner dom. Pour plus d'informations, veuillez vous rendre sur le

Site Web PHP chinois pour rechercher ~

Recommandations associées :

Explication détaillée du didacticiel de tableau d'opérations js

Explication détaillée de l'instance d'objet DOM d'opération js

Une brève analyse de quelques méthodes courantes d'exploitation du DOM par JS

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!