セレクタについて（Selectors API）

書式	説明	Level
E>F	F（自身）は、E の子である	2
E F	F（自身）は、E の子孫である	1
E+F	F（自身）は、E の直後である	2
E~F	F（自身）は、E よりも以後である	3

■ID 名を指定する

書式	説明	Level
E#id	１つの ID 名を指定する	1

■クラス名を指定する

書式	説明	Level
E.class	１つのクラス名を指定する	1

■属性名を指定する

書式	説明	Level
E[name]	１つの属性名を指定する	2

■属性値を指定する

書式	説明	Level
E[name="value"]	完全一致する属性値を指定する	2
E[name^="value"]	最先頭が一致する属性値を指定する	3
E[name$="value"]	最後尾が一致する属性値を指定する	3
E[name*="value"]	部分的に一致する（含まれる）属性値を指定する	3

書式	説明	Level
E[name~="value"]	属性値を空白記号で区切り、単語のうち１つと完全一致する値を指定する	2
E[name\|="value"]	属性値を『-』記号で区切り、先頭から区切り単位で一致する値を指定する	2

■擬似クラス一覧

書式	説明	Level
E:link	E がリンクで、未訪問であるか	1
E:visited	E がリンクで、訪問済みであるか（検出は不可）	1
E:active	E がリンクで、マウスダウン中であるか	1
E:hover	E がリンクで、マウスホバー中であるか	1

書式	説明	Level
E:focus	E にフォーカスが与えられているか	1
E:lang(code)	E の lang 属性値と、指定した言語コードが一致しているか	2
E:target	E のターゲット値と、現在の URL のハッシュ部が一致するか (id 属性など)	3

書式	説明	Level
E:enabled	E が有効状態であるか（disabled 属性が偽である）	3
E:disabled	E が無効状態であるか（disabled 属性が真である）	3
E:checked	E がチェック済みか（checked 属性が真である）	3

書式	説明	Level
E:root	自身がルートであるか（通常 HTML タグが該当）	3
E:first-child	自身がノードリストの最先頭に登録されているか	2
E:last-child	自身がノードリストの最後尾に登録されているか	3
E:nth-child(n)	自身がノードリストの最先頭から n 番目に登録されているか (1～)	3
E:nth-last-child(n)	自身がノードリストの最後尾から n 番目に登録されているか (1～)	3
E:first-of-type	E グループ内で、自身が最先頭に位置するか	3
E:last-of-type	E グループ内で、自身が最後尾に位置するか	3
E:nth-of-type(n)	E グループ内で、自身が最先頭から n 番目に位置するか (1～)	3
E:nth-last-of-type(n)	E グループ内で、自身が最後尾から n 番目に位置するか (1～)	3
E:only-child	ノードリスト内で、自身のみ(１つ)が存在する状態か	3
E:only-of-type	E グループ内で、自身のみ(１つ)が存在する状態か	3
E:empty	自身のノードリスト内に、子が存在しない状態か	3

■擬似要素一覧

書式	説明	Level
E:first-line	E 内で１行目となる部分（検出は不可）	1
E:first-letter	E 内で１文字目となる部分（検出は不可）	1
E:before	E の直前に要素を追加する（検出は不可）	2
E:after	E の直後に要素を追加する（検出は不可）	2

上に戻る

エレメントを取得する

■セレクタにマッチするエレメントを１つ取得する

■セレクタにマッチするエレメントをすべて取得する

■セレクタにマッチするエレメントを１つ取得する

document.querySelector() メソッドを使用します。

引数に、取得したいエレメントの条件を、セレクタで指定します。

任意のエレメントから、querySelector() メソッドを使用する事もできます。

この場合、検索範囲が、任意のエレメントの子孫のみに限定されます。

(Document or Element).querySelector( "セレクタ" ) :HTMLElement

第01引数	String	取得したいエレメントの条件を、セレクタで指定。
戻り値	HTMLElement	見つかった場合、エレメントが得られる。見つからなかった場合は、null が得られる。

■戻り値 (HTMLElement)

マッチしたエレメントが１つ得られます。

見つからなかった場合は null が得られます。

複数のエレメントがマッチする場合、得られるのは先頭の１つのみです。

■使用例

セレクタにマッチするエレメントを取得


<html>
  <body>

    <div>あいうえお</div>
    <span>かきくけこ</span>
    <div>さしすせそ</div>


    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// セレクタにマッチするエレメントを１つ取得
	// ------------------------------------------------------------
	var element = document.querySelector("span");

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	if(element){
		console.log("tag:" + element.tagName + " html:" + element.innerHTML);
	}
    //-->
    </script>

  </body>
</html>

ID 属性が、"test" であるエレメントを１つ取得する


// id 属性が、"test" であるエレメントを１つ取得する
var element = document.querySelector( "#test" );

■セレクタにマッチするエレメントをすべて取得する

document.querySelectorAll() メソッドを使用します。

引数に、取得したいエレメントの条件を、セレクタで指定します。

任意のエレメントから、querySelectorAll() メソッドを使用する事もできます。

この場合、検索範囲が、任意のエレメントの子孫のみに限定されます。

(Document or Element).querySelectorAll( "セレクタ" ) :NodeList

第01引数	String	取得したいエレメントの条件を、セレクタで指定。
戻り値	NodeList	静的な NodeList オブジェクトが得られる。

■戻り値 (NodeList)

マッチするエレメントが NodeList オブジェクトに格納された状態で取得できます。

NodeList オブジェクトは、配列のように中身を取り出せます。

マッチするエレメントが見つからなかった場合は、空の NodeList オブジェクトが得られます。

■使用例

セレクタにマッチするエレメントをすべて取得する


<html>
  <body>

    <div>あいうえお</div>
    <span>かきくけこ</span>
    <div>さしすせそ</div>


    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// セレクタにマッチするエレメントをすべて取得する
	// ------------------------------------------------------------
	var elements = document.querySelectorAll("div");

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = elements.length;
	for(i=0;i < num;i++){
		var element = elements[i];

		// 出力テスト
		console.log("tag:" + element.tagName + " html:" + element.innerHTML);
	}

    //-->
    </script>

  </body>
</html>

セレクタの記述例


// ------------------------------------------------------------
// 要素を指定する
// ------------------------------------------------------------
// タグ名が、"div" であるエレメントをすべて取得する
var elements = document.querySelectorAll( "div" );

// エレメントをすべて取得する
var elements = document.querySelectorAll( "*" );


// ------------------------------------------------------------
// 論理条件を指定する
// ------------------------------------------------------------
// タグ名が "div" または "span" であるエレメントをすべて取得する
var elements = document.querySelectorAll( "div,span" );

// タグ名が "div" ではないエレメントをすべて取得する
var elements = document.querySelectorAll( ":not(div)" );

// 属性名に "name" を持たないエレメントをすべて取得する
var elements = document.querySelectorAll( ":not([name])" );



// ------------------------------------------------------------
// 要素の関係を指定する
// ------------------------------------------------------------
// 親のタグ名が "a" であり、自身のタグ名が "img" であるエレメントをすべて取得する
var elements = document.querySelectorAll( "a>img" );

// 祖先のタグ名が "div" であり、自身のタグ名が "span" であるエレメントをすべて取得する
var elements = document.querySelectorAll( "div span" );


// ------------------------------------------------------------
// id 名を指定する
// ------------------------------------------------------------
// id 属性が、"test" であるエレメントをすべて取得する
var elements = document.querySelectorAll( "#test" );


// ------------------------------------------------------------
// クラス名を指定する
// ------------------------------------------------------------
// class 属性が、"test" であるエレメントをすべて取得する
var elements = document.querySelectorAll( ".test" );


// ------------------------------------------------------------
// 属性を指定する
// ------------------------------------------------------------
// 属性名が、"name" であるエレメントをすべて取得する
var elements = document.querySelectorAll( "[name]" );

// 属性名が "name" であり、属性値が "value" と完全一致するエレメントをすべて取得する
var elements = document.querySelectorAll( '[name="value"]' );

// 属性名が "name" であり、属性値に "value" を含むエレメントをすべて取得する
var elements = document.querySelectorAll( '[name*="value"]' );

上に戻る

エレメントを評価する

■エレメントがセレクタにマッチするか調べる

matches() メソッドを使用します。

第01引数に、条件を、セレクタで指定します。

Element.matches( "セレクタ" , refNodes ) :Boolean

第01引数	String	条件を、セレクタ文字列で指定。
第02引数(略可)	Node	参照要素？
戻り値	Boolean	マッチした場合 true、マッチしない場合 false が得られる。

■エレメントがセレクタとマッチするか調べる関数

エレメントがセレクタとマッチするか調べる関数


// ------------------------------------------------------------
// エレメントがセレクタとマッチするか調べる関数
// ------------------------------------------------------------
function ElementMatchesSelector(element,selector){

	if(element.matches){
		return element.matches(selector);
	}
	if(element.webkitMatchesSelector){
		return element.webkitMatchesSelector(selector);
	}
	if(element.mozMatchesSelector){
		return element.mozMatchesSelector(selector);
	}
	if(element.oMatchesSelector){
		return element.oMatchesSelector(selector);
	}
	if(element.msMatchesSelector){
		return element.msMatchesSelector(selector);
	}

	return undefined;
}

■使用例

エレメントがセレクタとマッチするか調べる


<html>
  <body>

    <div>
      <span id="aaa"></span>
    </div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// エレメントがセレクタとマッチするか調べる関数
	// ------------------------------------------------------------
	function ElementMatchesSelector(element,selector){

		if(element.matches){
			return element.matches(selector);
		}
		if(element.webkitMatchesSelector){
			return element.webkitMatchesSelector(selector);
		}
		if(element.mozMatchesSelector){
			return element.mozMatchesSelector(selector);
		}
		if(element.oMatchesSelector){
			return element.oMatchesSelector(selector);
		}
		if(element.msMatchesSelector){
			return element.msMatchesSelector(selector);
		}

		return undefined;
	}

	// ------------------------------------------------------------
	// id 名が "aaa" である要素を取得
	// ------------------------------------------------------------
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// 要素がセレクタとマッチするか調べる
	// ------------------------------------------------------------
	var result = ElementMatchesSelector(element , "div>span#aaa");

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log(result); // true

    //-->
    </script>

  </body>
</html>

上に戻る

前のページに戻る