Maison > Article > interface Web > Un examen approfondi des types et des utilisations des sélecteurs JavaScript

Un examen approfondi des types et des utilisations des sélecteurs JavaScript

王林original: 2023-12-26 12:38:511358parcourir

Explorez en profondeur les différents types et utilisations des sélecteurs JavaScript

Introduction :
JavaScript est un langage de script puissant largement utilisé dans le développement Web. Au cours du processus de développement, nous devons souvent obtenir ou manipuler des éléments HTML via des sélecteurs. JavaScript fournit différents types de sélecteurs pour répondre à différents besoins. Cet article explorera en profondeur les différents types et utilisations des sélecteurs JavaScript et fournira des exemples de code concrets.

1. Le sélecteur getElementById
getElementById obtient l'élément HTML correspondant via l'attribut ID de l'élément. C'est le sélecteur le plus basique.

Exemple de code : récupérez l'élément via getElementById et modifiez son contenu.

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeContent() {
      var element = document.getElementById("myElement");
      element.innerHTML = "Hello, World!";
    }
  </script>
</head>
<body>
  <div id="myElement">原内容</div>
  <button onclick="changeContent()">点击修改内容</button>
</body>
</html>

2. Le sélecteur getElementsByClassName
getElementsByClassName obtient un ensemble d'éléments HTML via le nom de classe de l'élément. Lorsqu'il y a des éléments avec le même nom de classe dans la page, ces éléments peuvent être exploités par lots.

Exemple de code : obtenez un ensemble d'éléments via getElementsByClassName et modifiez leur style.

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
  <script>
    function addHighlight() {
      var elements = document.getElementsByClassName("myElement");
      for (var i = 0; i < elements.length; i++) {
        elements[i].classList.add("highlight");
      }
    }
  </script>
</head>
<body>
  <div class="myElement">元素1</div>
  <div class="myElement">元素2</div>
  <div class="myElement">元素3</div>
  <button onclick="addHighlight()">点击添加样式</button>
</body>
</html>

3. Le sélecteur getElementsByTagName
getElementsByTagName obtient un ensemble d'éléments HTML via le nom de balise de l'élément. Vous pouvez spécifier des noms de balises spécifiques pour sélectionner des éléments.

Exemple de code : récupérez la balise p via getElementsByTagName et modifiez son contenu.

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeContent() {
      var elements = document.getElementsByTagName("p");
      for (var i = 0; i < elements.length; i++) {
        elements[i].innerHTML = "这是第" + (i+1) + "个段落";
      }
    }
  </script>
</head>
<body>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <button onclick="changeContent()">点击修改内容</button>
</body>
</html>

4. querySelector
querySelector sélectionne les éléments HTML via la syntaxe du sélecteur CSS. Les éléments peuvent être obtenus en fonction de l'ID de l'élément, du nom de classe, du nom de balise et d'autres méthodes de sélection.

Exemple de code : obtenez le premier élément correspondant via querySelector et modifiez son style.

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
  <script>
    function addHighlight() {
      var element = document.querySelector(".myElement");
      element.classList.add("highlight");
    }
  </script>
</head>
<body>
  <div class="myElement">元素1</div>
  <div class="myElement">元素2</div>
  <div class="myElement">元素3</div>
  <button onclick="addHighlight()">点击添加样式</button>
</body>
</html>

Résumé :
Cet article explore en profondeur les différents types et utilisations des sélecteurs JavaScript et fournit des exemples de code concrets. Grâce à des sélecteurs tels que getElementById, getElementsByClassName, getElementsByTagName et querySelector, nous pouvons facilement obtenir et utiliser des éléments HTML. L'utilisation flexible des sélecteurs peut nous aider à développer des applications JavaScript plus efficacement.

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!

JavaScript css html 选择器

Déclaration：

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

Article précédent：Une introduction aux concepts de base et à l'utilisation des sélecteurs JavaScriptArticle suivant：Une introduction aux concepts de base et à l'utilisation des sélecteurs JavaScript

Articles Liés

Voir plus