Documentドキュメント.querySelectorAllクエリーセレクターオール メソッド

本ページには広告が含まれています。

与えられたCSSセレクタに一致する文書中の要素のリストを示す静的なNodeList オブジェクト (DOM)を返します。

構文
  1. NodeList = Document.querySelectorAll( selectors )
引数
selectors必須
セレクタを含むDOMString
戻り値
指定されたCSSセレクタに一致するHTML要素を表すNodeList オブジェクト (DOM)。文書内に一致する要素がなければNULLを返します。

CSSセレクタ

基本セレクタ

全称セレクタ(ユニバーサルセレクタ)

すべての種類の要素に一致します。

プレーンテキスト
*
要素型セレクタ(タイプセレクタ)

HTMLのタグ名で要素に一致します。指定したタグ名の要素すべてが対象となります。

プレーンテキスト
element

以下はタグ名がdivの要素を選択します。

プレーンテキスト
div
HTML
<div></div>
IDセレクタ

ID名をつけた要素に一致します。ID名の前に#(シャープ)を付けます。

プレーンテキスト
#idname

以下はID名がcontentの要素を選択します。

プレーンテキスト
#content
HTML
<div id="content"></div>
クラスセレクタ

クラス名をつけた要素に一致します。クラス名の前に.(ピリオド)を付けます。

プレーンテキスト
.classname

以下はクラス名がheaderの要素を選択します。

プレーンテキスト
.header
HTML
<div class="header"></div>
属性セレクタ
属性を持つ要素

attrという名前の属性を持つ要素を選択します。属性名を[ ]で囲みます。

プレーンテキスト
[attr]

以下は属性にhrefを持つ要素を選択します。

プレーンテキスト
[href]
HTML
<a href="http://example.com">Example Domain</a>
属性と値が一致する要素

attrという名前の属性を持ち、属性値がvalueに完全一致する要素を選択します。値は"(ダブルクォーテーション)もしくは'(シングルクォーテーション)で囲みます。

プレーンテキスト
[attr=value]

以下は属性名にhref、その値がhttp://example.comに一致する要素を選択します。

プレーンテキスト
[href="http://example.com"]
HTML
<a href="http://example.com">Example Domain</a>
指定文字列が複数の属性値のいずれかに一致する要素

スペースで区切られた項目リストで、うち一つがvalueと完全一致する属性値を持つ要素と一致します。

プレーンテキスト
[attr~=value]
属性の値が一致もしくはハイフンが続く要素

attrという名前の属性値がvalueと完全一致するか、valueで始まり直後にハイフンが続く要素を選択します。言語のサブコードの一致に使われます。

プレーンテキスト
[attr|=value]

以下はlang属性の属性値がenもしくはen-***に一致する要素を取得します。

プレーンテキスト
[lang|="en"]
HTML
<html lang="en"></html>
HTML
<html lang="en-US"></html>
値が指定文字列で始まる要素

attrの属性値がvalueで始まる要素を選択します。

プレーンテキスト
[attr^=value]

以下はclassという属性で属性値がtestで始まる要素を選択します。

プレーンテキスト
[class^="test"]
HTML
<div class="test001"></div>
<div class="test002"></div>
<div class="test003"></div>
値が指定文字列で終わる要素

attrの属性値がvalueで終わる要素を選択します。

プレーンテキスト
[attr$=value]

以下はsrcという属性で属性値が.jpgで終わる要素を選択します。

UWSC
[src$=".jpg"]
HTML
<img src="http://example.com/photo.jpg" />
値に指定文字列を含む要素
プレーンテキスト
[attr*=value]

グルーピングセレクタ

複数セレクタ

複数の要素を,(カンマ)で区切って指定します。element1またはelement2という意味です。

プレーンテキスト
element1, element2
子孫結合子

親とその子孫という形式で指定するセレクタで要素を (半角スペース)で区切ります。要素セレクタ・クラスセレクタ・IDセレクタなどを組み合わせて使用します。

プレーンテキスト
element1 element2
子結合子

親とその直下の要素に一致するセレクタで (半角スペース)で区切ります。親と子は>で区切ります。子孫セレクタはある要素の子孫要素すべてに一致するのに対し、子セレクタはある要素の直下の要素にのみ一致します。

プレーンテキスト
element1 > element2
兄弟結合子
後続兄弟結合子(一般兄弟結合子)

1つ目の要素の後ろに2つ目の要素があり、同じ親の子要素である場合に一致します。2つ目の要素は1つ目の直後である必要はありません。

プレーンテキスト
element1 ~ element2
隣接兄弟結合子(次兄弟結合子)

2つ目の要素が1つ目の要素の直後にあって、同じ親の子要素である場合に一致します。

プレーンテキスト
element1 + element2
列結合子(カラム結合子)

表の特定の列の要素を選択します。

プレーンテキスト
element1 || element2

CSSセレクタの取得方法

Chromeブラウザを使用している場合、以下の手順でCSSセレクタを取得することができます。

  1. Chromeブラウザを起動し、CSSセレクタを取得するWebページにアクセスします。
  2. ページ内でCSSセレクタを取得したい要素の上で右クリックし、表示されたメニューから検証を選択します。
  3. デベロッパーツール(要素タブ)が起動し、カーソルを合わせていた要素のHTMLがハイライトされている状態になります。
  4. そのハイライトされているHTMLを右クリックし、開いたメニューのコピー\selector をコピーを選択することでその要素のCSSセレクタを取得することができます。

CSSセレクタの検証方法

Chromeブラウザを使用している場合、以下の手順でCSSセレクタの検証を行うことができます。

  1. Chromeブラウザを起動し、CSSセレクタの検証を行うWebページにアクセスします。
  2. ページ内を右クリックで検証を選択、もしくはF12キーでデベロッパーツールを起動し、左から2番目にあるコンソールタブを選択します。Ctrl+Shift+Jで直接コンソールを開くこともできます。

このコンソールタブでJavaScriptのコードを入力し検証することができます。

コンソール画面の使い方

  • JavaScriptのコードを入力したあとEnterキーを押すと結果が表示されます。
  • Shift+Enterで改行することができます。
  • Ctrl+Lのアイコン、またはclear();を実行することでログを削除することができます。

使い方

以下の例でDocumentにはDocument オブジェクトが代入されているものとします。Document オブジェクトは以下で取得できます。

UWSC
DIM IE = CREATEOLEOBJ("InternetExplorer.Application")
DIM Document = IE.Document

タグ名で一致するリストの取得

文書内すべてのp要素を取得します。

HTML
<p></p>
UWSC
DIM NodeList = Document.querySelectorAll("p")

タグ名はDocument.querySelectorAll メソッドで書き換えられ、以下のように記述します。

UWSC
Document.getElementsByTagName("p")

idで一致するリストの取得

idがcontentの要素を取得します。セレクタで指定するときはid名の前に#を付けます。

HTML
<div id="content"></div>
UWSC
DIM NodeList = Document.querySelectorAll("#content")

idはDocument.getElementById メソッドで書き換えられ、以下のように記述します。

UWSC
Document.getElementById("content")

クラス名で一致するリストの取得

クラス名がlistの要素を取得します。セレクタで指定するときはクラス名の前に.(ピリオド)を付けます。

HTML
<div class="list"></div>
UWSC
DIM NodeList = Document.querySelectorAll(".list")

クラス名はDocument.getElementsByClassName メソッドで書き換えられ、以下のように記述します。

UWSC
Document.getElementsByClassName("list")

複数条件

以下は文書内すべてのdiv要素のうち、クラス名にlistもしくはtestを持つ要素を取得します。

UWSC
DIM NodeList = Document.querySelectorAll("div.list, div.test")