JavaScript 선택기의 유형과 용도에 대한 심층적인 살펴보기-JS 튜토리얼-php.cn

JavaScript 선택기의 유형과 용도에 대한 심층적인 살펴보기

王林

풀어 주다： 2023-12-26 12:38:51

원래의

1373명이 탐색했습니다.

JavaScript 선택기의 유형과 용도에 대한 심층적인 살펴보기

JavaScript 선택기의 다양한 유형과 용도를 자세히 살펴보세요

소개:
JavaScript는 웹 개발에 널리 사용되는 강력한 스크립트 언어입니다. 개발 과정에서 선택기를 통해 HTML 요소를 얻거나 조작해야 하는 경우가 많습니다. JavaScript는 다양한 요구 사항을 충족하기 위해 다양한 유형의 선택기를 제공합니다. 이 기사에서는 JavaScript 선택기의 다양한 유형과 용도를 심층적으로 살펴보고 구체적인 코드 예제를 제공합니다.

1. getElementById 선택기
getElementById는 요소의 ID 속성을 통해 해당 HTML 요소를 가져옵니다. 가장 기본적인 선택자입니다.

샘플 코드: getElementById를 통해 요소를 가져오고 해당 콘텐츠를 수정합니다.

<!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. getElementsByClassName 선택기
getElementsByClassName은 요소의 클래스 이름을 통해 HTML 요소 세트를 가져옵니다. 페이지에 동일한 클래스 이름을 가진 요소가 있는 경우 해당 요소를 일괄적으로 작동할 수 있습니다.

샘플 코드: getElementsByClassName을 통해 요소 세트를 가져오고 해당 스타일을 수정합니다.

<!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. getElementsByTagName 선택기
getElementsByTagName은 요소의 태그 이름을 통해 HTML 요소 세트를 가져옵니다. 특정 태그 이름을 지정하여 요소를 선택할 수 있습니다.

샘플 코드: getElementsByTagName을 통해 p 태그를 가져오고 해당 콘텐츠를 수정합니다.

<!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는 CSS 선택기의 구문을 통해 HTML 요소를 선택합니다. 요소의 ID, 클래스 이름, 태그 이름 및 기타 선택 방법을 기반으로 요소를 얻을 수 있습니다.

샘플 코드: querySelector를 통해 첫 번째로 일치하는 요소를 가져오고 스타일을 수정합니다.

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

로그인 후 복사

요약:
이 문서에서는 JavaScript 선택기의 다양한 유형과 용도를 심층적으로 살펴보고 구체적인 코드 예제를 제공합니다. getElementById, getElementsByClassName, getElementsByTagName, querySelector 등의 선택자를 통해 HTML 요소를 쉽게 얻고 조작할 수 있습니다. 선택기를 유연하게 사용하면 JavaScript 애플리케이션을 보다 효율적으로 개발하는 데 도움이 될 수 있습니다.

위 내용은 JavaScript 선택기의 유형과 용도에 대한 심층적인 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!