JavaScript セレクターの種類と使用法の詳細な説明-jsチュートリアル-php.cn

JavaScript セレクターの種類と使用法の詳細な説明

王林

リリース： 2023-12-26 12:38:51

オリジナル

1371 人が閲覧しました

JavaScript セレクターの種類と使用法の詳細な説明

JavaScript セレクターのさまざまなタイプと使用法についての詳細な調査

はじめに:
JavaScript は、Web 開発で広く使用されている強力なスクリプト言語です。開発プロセス中、多くの場合、セレクターを介して 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 中国語 Web サイトの他の関連記事を参照してください。