与えられたCSSセレクタに一致する文書中の要素のリストを示す静的なNodeList オブジェクト (DOM)を返します。
- 構文
- NodeList = Document.querySelectorAll( selectors )
- 引数
- selectors必須
- セレクタを含むDOMString
- 戻り値
- 指定されたCSSセレクタに一致するHTML要素を表すNodeList オブジェクト (DOM)。文書内に一致する要素がなければNULLを返します。
CSSセレクタ
基本セレクタ
全称セレクタ（ユニバーサルセレクタ）
すべての種類の要素に一致します。
*要素型セレクタ（タイプセレクタ）
HTMLのタグ名で要素に一致します。指定したタグ名の要素すべてが対象となります。
element以下はタグ名がdivの要素を選択します。
div<div></div>IDセレクタ
ID名をつけた要素に一致します。ID名の前に#（シャープ）を付けます。
#idname以下はID名がcontentの要素を選択します。
#content<div id="content"></div>クラスセレクタ
クラス名をつけた要素に一致します。クラス名の前に.（ピリオド）を付けます。
.classname以下はクラス名がheaderの要素を選択します。
.header<div class="header"></div>属性セレクタ
属性を持つ要素
attrという名前の属性を持つ要素を選択します。属性名を[ ]で囲みます。
[attr]以下は属性にhrefを持つ要素を選択します。
[href]<a href="http://example.com">Example Domain</a>属性と値が一致する要素
attrという名前の属性を持ち、属性値がvalueに完全一致する要素を選択します。値は"（ダブルクォーテーション）もしくは'（シングルクォーテーション）で囲みます。
[attr=value]以下は属性名にhref、その値がhttp://example.comに一致する要素を選択します。
[href="http://example.com"]<a href="http://example.com">Example Domain</a>指定文字列が複数の属性値のいずれかに一致する要素
スペースで区切られた項目リストで、うち一つがvalueと完全一致する属性値を持つ要素と一致します。
[attr~=value]属性の値が一致もしくはハイフンが続く要素
attrという名前の属性値がvalueと完全一致するか、valueで始まり直後にハイフンが続く要素を選択します。言語のサブコードの一致に使われます。
[attr|=value]以下はlang属性の属性値がenもしくはen-***に一致する要素を取得します。
[lang|="en"]<html lang="en"></html><html lang="en-US"></html>値が指定文字列で始まる要素
attrの属性値がvalueで始まる要素を選択します。
[attr^=value]以下はclassという属性で属性値がtestで始まる要素を選択します。
[class^="test"]<div class="test001"></div>
<div class="test002"></div>
<div class="test003"></div>値が指定文字列で終わる要素
attrの属性値がvalueで終わる要素を選択します。
[attr$=value]以下はsrcという属性で属性値が.jpgで終わる要素を選択します。
[src$=".jpg"]<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 || element2CSSセレクタの取得方法
Chromeブラウザを使用している場合、以下の手順でCSSセレクタを取得することができます。
- Chromeブラウザを起動し、CSSセレクタを取得するWebページにアクセスします。
- ページ内でCSSセレクタを取得したい要素の上で右クリックし、表示されたメニューから検証を選択します。
- デベロッパーツール（要素タブ）が起動し、カーソルを合わせていた要素のHTMLがハイライトされている状態になります。
- そのハイライトされているHTMLを右クリックし、開いたメニューのコピー\selector をコピーを選択することでその要素のCSSセレクタを取得することができます。
CSSセレクタの検証方法
Chromeブラウザを使用している場合、以下の手順でCSSセレクタの検証を行うことができます。
- Chromeブラウザを起動し、CSSセレクタの検証を行うWebページにアクセスします。
- ページ内を右クリックで検証を選択、もしくはF12キーでデベロッパーツールを起動し、左から2番目にあるコンソールタブを選択します。Ctrl+Shift+Jで直接コンソールを開くこともできます。
このコンソールタブでJavaScriptのコードを入力し検証することができます。
コンソール画面の使い方
- JavaScriptのコードを入力したあとEnterキーを押すと結果が表示されます。
- Shift+Enterで改行することができます。
- Ctrl+L、のアイコン、またはclear();を実行することでログを削除することができます。
使い方
以下の例でDocumentにはDocument オブジェクトが代入されているものとします。Document オブジェクトは以下で取得できます。
DIM IE = CREATEOLEOBJ("InternetExplorer.Application")
DIM Document = IE.Documentタグ名で一致するリストの取得
文書内すべてのp要素を取得します。
<p></p>DIM NodeList = Document.querySelectorAll("p")タグ名はDocument.querySelectorAll メソッドで書き換えられ、以下のように記述します。
Document.getElementsByTagName("p")idで一致するリストの取得
idがcontentの要素を取得します。セレクタで指定するときはid名の前に#を付けます。
<div id="content"></div>DIM NodeList = Document.querySelectorAll("#content")idはDocument.getElementById メソッドで書き換えられ、以下のように記述します。
Document.getElementById("content")クラス名で一致するリストの取得
クラス名がlistの要素を取得します。セレクタで指定するときはクラス名の前に.（ピリオド）を付けます。
<div class="list"></div>DIM NodeList = Document.querySelectorAll(".list")クラス名はDocument.getElementsByClassName メソッドで書き換えられ、以下のように記述します。
Document.getElementsByClassName("list")複数条件
以下は文書内すべてのdiv要素のうち、クラス名にlistもしくはtestを持つ要素を取得します。
DIM NodeList = Document.querySelectorAll("div.list, div.test")