An in-depth look at the types and uses of JavaScript selectors-JS Tutorial-php.cn

An in-depth look at the types and uses of JavaScript selectors

王林

Release： 2023-12-26 12:38:51

Original

1371 people have browsed it

An in-depth look at the types and uses of JavaScript selectors

In-depth exploration of the different types and uses of JavaScript selectors

Introduction:
JavaScript is a powerful scripting language that is widely used in web development. During the development process, we often need to obtain or manipulate HTML elements through selectors. JavaScript provides different types of selectors to meet different needs. This article will explore in depth the different types and uses of JavaScript selectors, and provide concrete code examples.

1. getElementById selector
getElementById obtains the corresponding HTML element through the ID attribute of the element. This is the most basic selector.

Sample code: Get the element through getElementById and modify its content.

<!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>

Copy after login

2. getElementsByClassName selector
getElementsByClassName obtains a set of HTML elements through the class name of the element. When there are elements with the same class name in the page, these elements can be operated in batches.

Sample code: Get a set of elements through getElementsByClassName and modify their styles.

<!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>

Copy after login

3. getElementsByTagName selector
getElementsByTagName obtains a set of HTML elements through the tag name of the element. You can specify specific tag names to select elements.

Sample code: Get the p tag through getElementsByTagName and modify its content.

<!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>

Copy after login

4. querySelector selector
querySelector selects HTML elements through the syntax of CSS selector. Elements can be obtained based on the element's ID, class name, tag name and other selection methods.

Sample code: Get the first matching element through querySelector and modify its 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>

Copy after login

Summary:
This article explores the different types and uses of JavaScript selectors in depth, and provides specific code examples. Through selectors such as getElementById, getElementsByClassName, getElementsByTagName, and querySelector, we can easily obtain and operate HTML elements. The flexible use of selectors can help us develop JavaScript applications more efficiently.

The above is the detailed content of An in-depth look at the types and uses of JavaScript selectors. For more information, please follow other related articles on the PHP Chinese website!