Maison interface Web js tutoriel Analyse complète des sélecteurs js

Analyse complète des sélecteurs js

Apr 01, 2017 am 09:13 AM

Les sélecteurs JS natifs incluent getElementById, getElementsByName, getElementsByTagName et getElementsByClassName Ci-dessous, je présenterai l'utilisation de ces quatre sélecteurs un par un.

1.getElementById (obtenir l'élément par ID)

Utilisation : document.getElementById("Id");

2.getElementsByName (obtenir des éléments via l'attribut name)

Utilisation : document.getElementsByName("Name"); Cette méthode est généralement la valeur de l'attribut name de l'élément à obtenir. adapté à la soumission de données de formulaires, lorsque l'attribut name est défini lorsque l'élément est form, img, iframe, applet, embed ou object, un attribut nommé d'après la valeur de l'attribut name sera automatiquement créé dans l'objet Document. Vous pouvez donc référencer l'objet dom correspondant via document.domName

3.getElementsByTagName (obtenir les éléments par nom d'élément)

Utilisation : document.getElementsByTagName(TagName est le nom de la balise); élément à obtenir, lorsque TagName est *, cela signifie obtenir tous les éléments. Le document peut également être remplacé par un élément DOM, mais de cette façon, seul le sous-ensemble d'éléments derrière l'élément DOM peut être obtenu.

4.getElementsByClassName (obtenir des éléments via des classes CSS)

Utilisation : document.getElementsByClassName(ClassName) est le nom de classe CSS de l'élément à obtenir, si vous le souhaitez Si vous souhaitez en obtenir plusieurs en même temps, séparez-les par des espaces après chaque classe CSS. Par exemple, document.getElementsByClassName("class2 class1") obtiendra des éléments de styles class1 et class2. Le document peut également être remplacé par un élément DOM, de sorte que seul un sous-ensemble d'éléments derrière l'élément DOM puisse être obtenu.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>demo</title>

</head>

<body>

<p>我是通过标签获取</p>

<p id="box">我是通过id获取</p>

<p class="box1">我是通过class获取</p>

<form action="" name="box2">

  我是通过name获取

</form>

</body>

<script type="text/javascript">

  var p = document.getElementsByTagName("p");

  var box = document.getElementById("box");

  var box1 = document.getElementsByClassName("box1");

  var box2 = document.getElementsByName("box2");

</script>

</html

Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières

Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS Dec 17, 2023 am 08:08 AM

Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS

La relation entre js et vue La relation entre js et vue Mar 11, 2024 pm 05:21 PM

La relation entre js et vue

Comment utiliser JS et Baidu Maps pour implémenter la fonction de géocodage cartographique Comment utiliser JS et Baidu Maps pour implémenter la fonction de géocodage cartographique Nov 21, 2023 pm 06:30 PM

Comment utiliser JS et Baidu Maps pour implémenter la fonction de géocodage cartographique

Comment utiliser JS et Baidu Maps pour implémenter la fonction d'affichage des informations de localisation sur la carte Comment utiliser JS et Baidu Maps pour implémenter la fonction d'affichage des informations de localisation sur la carte Nov 21, 2023 pm 03:08 PM

Comment utiliser JS et Baidu Maps pour implémenter la fonction d'affichage des informations de localisation sur la carte

L'ère de l'IA de JS est arrivée ! L'ère de l'IA de JS est arrivée ! Apr 08, 2024 am 09:10 AM

L'ère de l'IA de JS est arrivée !

See all articles