Un examen approfondi des types et des utilisations des sélecteurs JavaScript-js tutoriel-php.cn

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

王林

Libérer： 2023-12-26 12:38:51

original

1392 Les gens l'ont consulté

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

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!