iPentec.com  /  Doc  /  JavaScript  /  HTML DOMオブジェクトの取得

目次

CSSセレクタの書式でID、タグ名、クラス名を指定してHTML要素 (DOMオブジェクト) を取得する - querySelector, querySelectorAll を利用したDOMオブジェクトの取得 - JavaScript

JavaScriptでCSSセレクタの書式でID名、タグ名、クラス名を指定してHTML要素 (DOMオブジェクト) を取得するコードを紹介します。

概要

以下のページでは、getElementById, getElementsByName, getElementsByTagNameを利用してHTML中の要素のオブジェクトを取得するコードを紹介しました。

getElementByIdなどのメソッドで指定した要素を取得できますが、実装内容によっては、さらに複雑な条件で要素を取得したい場合があります。 この記事では、querySelector, querySelectorAll を使用して、CSSのセレクタの書式でHTMLのDOM要素を取得するコードを紹介します。

書式

document.querySelector("[取得する要素のCSS セレクタ]");

document.querySelectorAll("[取得する要素のCSS セレクタ]");
querySelectorは与えたセレクタで一致する最初の要素を取得します。 querySelectorAllは与えたセレクタで一致するすべての要素を取得します。戻り値はDOM要素の配列型になります。
なお、一致する要素がない場合は null を返します。

セレクタの書式

タグ名指定
タグ名
ID指定
#ID
クラス名指定
.クラス名
属性指定
[属性名]
属性と値指定
[属性名="値"]

子要素
セレクタ1 > セレクタ2 > ... セレクタn
次要素
セレクタ1 + セレクタ2 + ... セレクタn
複数のクラス要素 or
.セレクタ1, .セレクタ2, ... .セレクタn
複数のクラス要素 and
.セレクタ1.セレクタ2.. .セレクタn
クラスの否定
:not(.セレクタ)
ワイルドカード
*
最初の要素
:first-child
n番目の要素
:nth-child(n)
後ろからn番目の要素
:nth-last-child(n)
子要素を持たない要素
:empty

プログラム例 (querySelector: id指定での取得)

コード

以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    <!--
    .divelem {
      border: 1px solid #ff6a00;
      width: 240px;
      margin: 0.5rem 0 0 0;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.querySelector("#elem3");
      elem.style.borderColor = "#007bba";

      var outelem = document.querySelector("#output");
      outelem.innerText = elem.innerText;
    }
  </script>

</head>
<body>
  <div class="divelem" id="elem1">これは要素1です</div>
  <div class="divelem" id="elem2">これは要素2です</div>
  <div class="divelem" id="elem3">これは要素3です</div>
  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec" />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

ページの[Exec]ボタンをクリックすると、以下のJavaScriptを実行します。 querySelectorメソッドで"#elem3"を指定しており、id="elem3" の要素を取得します。 取得した要素はoutelem変数に代入します。 取得した要素のborderColorプロパティを"#007bba"に変更し、枠線の色を青色に変更します。
また、取得した要素の内部のテキストをページ下部のid="output"の要素に出力します。
    function onButtonClick() {
      var elem = document.querySelector("#elem3");
      elem.style.borderColor = "#007bba";

      var outelem = document.querySelector("#output");
      outelem.innerText = elem.innerText;
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


ページの[Exec]ボタンをクリックします。id="elem3" の要素である「これは要素3です」の枠が青色に変わります。 また、ページ下部に「これは要素3です」の文字列が表示されます。

プログラム例 (querySelector: クラス名指定での取得)

以下のHTMLファイルを用意します。

コード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    <!--
    .divelem1 {
      border: 1px solid #ff6a00;
      width: 240px;
      margin: 0.5rem 0 0 0;
    }
    .divelem2 {
      border: 1px solid #ff6a00;
      width: 240px;
      margin: 0.5rem 0 0 0;
      background-color:#fff5bd;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.querySelector(".divelem1");
      elem.style.backgroundColor = "#c5f3ec";

      var outelem = document.querySelector("#output");
      outelem.innerText = elem.innerText;
    }
  </script>

</head>
<body>
  <div class="divelem1" id="elem1">これは要素1です</div>
  <div class="divelem1" id="elem2">これは要素2です</div>
  <div class="divelem1" id="elem3">これは要素3です</div>
  <div class="divelem2" id="elem4">これは要素4です</div>
  <div class="divelem2" id="elem5">これは要素5です</div>
  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec" />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

ボタンをクリックすると onButtonClick()関数を実行します。
document.querySelector メソッドを呼び出し ".divelem1" を指定して要素を取得します。該当する最初の要素を取得します。
取得した要素の背景色を "#c5f3ec" に変更します。また要素のinnerHTMLを出力枠のinnerHTMLに設定します。
    function onButtonClick() {
      var elem = document.querySelector(".divelem1");
      elem.style.backgroundColor = "#c5f3ec";

      var outelem = document.querySelector("#output");
      outelem.innerText = elem.innerText;
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


"divelem1" クラスの要素で一番最初にある要素「これは要素1です」の枠が取得され、背景色が変更され、下図の結果となります。


なお、JavaScriptのonButtonClick関数のコードを下記のコードに変更し、querySelectorメソッドに ".divelem2" を与えた場合は、 「これは要素4です」の枠の背景色が変化します。これは、"divelem2" クラスの要素で一番最初にある要素が選択されたためです。
    function onButtonClick() {
      var elem = document.querySelector(".divelem2");
      elem.style.backgroundColor = "#c5f3ec";

      var outelem = document.querySelector("#output");
      outelem.innerText = elem.innerText;
    }

プログラム例 (querySelectorAll: クラス名指定での取得)

クラス名を指定してクラスの要素すべてを選択する例を紹介します。 指定したクラス名の要素をすべて選択する場合は、querySelectorAll メソッドを利用します。

コード

以下のHTMLファイルを用意します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    <!--
    .divelem1 {
      border: 1px solid #ff6a00;
      width: 240px;
      margin: 0.5rem 0 0 0;
    }
    .divelem2 {
      border: 1px solid #ff6a00;
      width: 240px;
      margin: 0.5rem 0 0 0;
      background-color:#fff5bd;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elems = document.querySelectorAll(".divelem1");

      var outText = "";
      elems.forEach(function (value, index, data) {
        value.style.backgroundColor = "#c8f1ac";
        outText = outText + "</br>" + value.innerHTML;
      });

      var outelem = document.querySelector("#output");
      outelem.innerHTML = outText;
    }
  </script>

</head>
<body>
  <div class="divelem1" id="elem1">これは要素1です</div>
  <div class="divelem1" id="elem2">これは要素2です</div>
  <div class="divelem1" id="elem3">これは要素3です</div>
  <div class="divelem2" id="elem4">これは要素4です</div>
  <div class="divelem2" id="elem5">これは要素5です</div>
  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec" />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

[Exec]ボタンをクリックすると、以下のJavaScriptが実行されます。
querySelectorAllメソッドで、".divelem1" を与えることで、class="divelem1"の要素をすべて取得できます。
取得した要素の配列をforEachループで個々の要素にアクセスし、backgroundColorプロパティの値を変更し背景色を変更します。
    function onButtonClick() {
      var elems = document.querySelectorAll(".divelem1");

      var outText = "";
      elems.forEach(function (value, index, data) {
        value.style.backgroundColor = "#c8f1ac";
        outText = outText + "</br>" + value.innerHTML;
      });

      var outelem = document.querySelector("#output");
      outelem.innerHTML = outText;
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。"divelem1" のクラス要素の項目の背景色が緑色に変わります。


なお、JavaScriptのコードを下記に変更し、querySelectorAllメソッドに "divelem2" を与えた場合は、 "divelem1" のクラス要素の項目の背景色が緑色に変わります。
    function onButtonClick() {
      var elems = document.querySelectorAll(".divelem2");

      var outText = "";
      elems.forEach(function (value, index, data) {
        value.style.backgroundColor = "#c8f1ac";
        outText = outText + "</br>" + value.innerHTML;
      });

      var outelem = document.querySelector("#output");
      outelem.innerHTML = outText;
    }

プログラム例 (querySelector: タグ+クラス名指定での取得)

以下のHTMLファイルを用意します。

コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    .StdPara {
      margin: 0.5rem 0 0 0;
    }
    .StdDiv {
      border:1px solid #8d0000;
      margin: 0.5rem 0 0 0;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.querySelector("div.StdPara")
      var outelem = document.getElementById("output");

      elem.style.backgroundColor = "#fffd7c";
      outelem.innerHTML = elem.innerHTML;
    }
  </script>
</head>
<body>
  <p class="StdPara">これは段落1です。</p>
  <div class="StdDiv">これはDiv1です</div>
  <div class="StdPara">これはDivの段落です。(1つめ)</div>
  <p class="StdPara">これは段落2です。</p>
  <div class="StdDiv">これはDiv2です</div>
  <p class="StdPara">これは段落3です。</p>
  <div class="StdPara">これはDivの段落です。(2つめ)</div>
  <p class="StdPara">これは段落4です。</p>

  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec" />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

ボタンをクリックすると onButtonClick()関数を実行します。
document.querySelector メソッドを呼び出し "div.StdPara" CSSセレクタで検索します。該当する最初の要素を取得します。
取得した要素の背景色を "#fffd7c" に変更します。また要素のinnerHTMLを出力枠のinnerHTMLに設定します。
    function onButtonClick() {
      var elem = document.querySelector("div.StdPara")
      var outelem = document.getElementById("output");

      elem.style.backgroundColor = "#fffd7c";
      outelem.innerHTML = elem.innerHTML;
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。最初のdivタグで StdPara クラスの要素「これはDivの段落です。(1つめ)」の背景色が黄色(#fffd7c)に変わります。また、 出力枠に「これはDivの段落です。(1つめ)」の文字列が設定され表示されます。

プログラム例 (querySelectorAll: タグ+クラス名指定での取得)

以下のHTMLファイルを用意します。

コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    .StdPara {
      margin: 0.5rem 0 0 0;
    }
    .StdDiv {
      border:1px solid #8d0000;
      margin: 0.5rem 0 0 0;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elems = document.querySelectorAll("div.StdPara")
      var outelem = document.getElementById("output");

      elems.forEach(function (value, index, data) {
        value.style.backgroundColor = "#ffafcb";
        outelem.innerHTML = outelem.innerHTML + "</br>" + value.innerHTML;

      });
    }
  </script>
</head>
<body>
  <p class="StdPara">これは段落1です。</p>
  <div class="StdDiv">これはDiv1です</div>
  <div class="StdPara">これはDivの段落です。(1つめ)</div>
  <p class="StdPara">これは段落2です。</p>
  <div class="StdDiv">これはDiv2です</div>
  <p class="StdPara">これは段落3です。</p>
  <div class="StdPara">これはDivの段落です。(2つめ)</div>
  <p class="StdPara">これは段落4です。</p>

  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec" />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

ボタンをクリックすると onButtonClick()関数を実行します。

onButtonClick関数では、"div.StdPara" のCSSセレクタで要素を取得します。divタグで StdPara クラスが設定されている要素が取得されるため、「これはDivの段落です。(1つめ)」「これはDivの段落です。(2つめ)」のdivタグの要素がelemsに代入されます。
取得した個々の要素の背景色を "#ffafcb" に変更し、内部のHTMLを output の内部HTMLに設定します。複数要素がありますので output要素のHTMLには該当した要素のHTMLを追記します。
    function onButtonClick() {
      var elems = document.querySelectorAll("div.StdPara")
      var outelem = document.getElementById("output");

      elems.forEach(function (value, index, data) {
        value.style.backgroundColor = "#ffafcb";
        outelem.innerHTML = outelem.innerHTML + "</br>" + value.innerHTML;

      });
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。divタグでStdPara クラスが設定されている、「これはDivの段落です。(1つめ)」「これはDivの段落です。(2つめ)」のdivタグの要素の 背景色が"#ffafcb"に設定され、ピンク色に変わります。また、内部のテキストが画面下部の output 要素のテキストに設定されます。


CSSセレクター形式で要素を取得して操作ができました。

プログラム例 (querySelectorAll: 属性値指定での取得)

以下のHTMLファイルを用意します。

コード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    <!--
    .divelem {
      border: 1px solid #ff6a00;
      width: 240px;
      margin: 0.5rem 0 0 0;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elems = document.querySelectorAll("div[check=true]");

      var outText = "";
      elems.forEach(function (value, index, data) {
        value.style.backgroundColor = "#ffabb3";
        outText = outText + "</br>" + value.innerHTML;
      });

      var outelem = document.querySelector("#output");
      outelem.innerHTML = outText;
    }
  </script>

</head>
<body>
  <div class="divelem" id="elem1">これは要素1です</div>
  <div class="divelem" id="elem2" check="true">これは要素2です</div>
  <div class="divelem" id="elem3">これは要素3です</div>
  <div class="divelem" id="elem4" check="true">これは要素4です</div>
  <div class="divelem" id="elem5">これは要素5です</div>
  <p class="divelem" id="elem6" check="true">これは要素6です(pタグ)</p>
  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec" />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

ボタンをクリックすると onButtonClick()関数を実行します。
document.querySelectorAll メソッドを呼び出し "div[check=true]" CSSセレクタで検索します。divタグで check属性の値が "true" の要素を取得します。
取得した要素の背景色を "#ffabb3" に変更しピンク色に変更します。また要素のinnerHTMLを出力枠のinnerHTMLに設定します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。divタグで check="true"の属性が記述されている要素の背景色がピンク色に変わります。 pタグでchekc="true" の属性が記述されている要素は条件にマッチしないため、背景色は変化しません。

著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2023-04-30
改訂日: 2023-04-30
作成日: 2021-02-01
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.