SQL見るだけクエリ#279 JavaScript DOM操作 querySelectorに関して

JavaScript DOM操作 querySelectorに関して解説をしてみようと思います。

この記事を読むと（約5分）
JavaScript DOM操作 querySelectorに関してイメージできます。

JavaScript DOM操作 querySelector

JavaScriptのquerySelectorは、特定のCSSセレクタに基づいてドキュメント内の要素を検索するための強力なメソッドです。以下では、いくつかの具体的な事例を交えながら、querySelectorの使い方を解説します。

事例 1: 単一要素の取得

<!DOCTYPE html>
<html>
<head>
  <title>querySelectorの使い方</title>
</head>
<body>
  <div id="myDiv">これは<div>要素です。</div></div>
  <p class="myClass">これは<p>要素です。</p></p>

  <script>
    // IDが"myDiv"である要素を取得
    var myDiv = document.querySelector("#myDiv");
    console.log(myDiv); // <div id="myDiv">...</div>

    // クラスが"myClass"である要素を取得
    var myClass = document.querySelector(".myClass");
    console.log(myClass); // <p class="myClass">...</p>
  </script>
</body>

この例では、querySelectorを使用してIDが"myDiv"の要素とクラスが"myClass"の要素を取得しています。取得した要素は変数に格納され、それ以降の操作が可能になります。

事例 2: 子孫要素の取得

<!DOCTYPE html>
<html>
<head>
  <title>querySelectorの使い方</title>
</head>
<body>
  <div id="parent">
    <div class="child">子要素1</div>
    <div class="child">子要素2</div>
  </div>

  <script>
    // IDが"parent"内の最初の子要素を取得
    var firstChild = document.querySelector("#parent .child");
    console.log(firstChild); // <div class="child">子要素1</div>

    // IDが"parent"内のすべての子要素を取得
    var allChildren = document.querySelectorAll("#parent .child");
    console.log(allChildren); // NodeList(2) [ <div class="child">子要素1</div>, <div class="child">子要素2</div> ]
  </script>
</body>

この例では、IDが"parent"内の子要素を取得しています。querySelectorは最初にマッチする要素を返しますが、querySelectorAllはすべてのマッチする要素を返します。

事例 3: 要素の属性を利用した取得

<!DOCTYPE html>
<html>
<head>
  <title>querySelectorの使い方</title>
</head>
<body>
  <div data-role="content">コンテンツ</div>
  <button disabled>無効化されたボタン</button>

  <script>
    // data-role属性が"content"である要素を取得
    var contentDiv = document.querySelector('[data-role="content"]');
    console.log(contentDiv); // <div data-role="content">コンテンツ</div>

    // disabled属性を持つボタンを取得
    var disabledButton = document.querySelector('button[disabled]');
    console.log(disabledButton); // <button disabled>無効化されたボタン</button>
  </script>
</body>

この例では、querySelectorを使用して特定の属性を持つ要素を取得しています。[data-role="content"]はdata-role属性が"content"である要素を選択し、button[disabled]はdisabled属性を持つボタン要素を選択します。

これらの例を通じて、querySelectorを使って特定の要素を取得する方法が分かりました。このメソッドは、CSSセレクタを使って柔軟に要素を選択できるため、DOM操作を効率的に行う際に非常に便利です。