JavaScript プログラミング講座

 

セレクタについて

 


■セレクタについて

 
セレクタは、任意のエレメントを、DOM ツリーから選び出すための書式です。
 
主にスタイルシートなどで利用されています。
 
JavaScript から、セレクタ文字列を使って、エレメントを取得する事もできます。
 

■ Selectors API について

 
W3C により、仕様が勧告されています。
 
http://www.w3.org/TR/selectors-api/ (Selectors API Level 1)
 
http://www.w3.org/TR/selectors-api2/ (Selectors API Level 2)
 
http://www.w3.org/TR/css3-selectors/ (Selectors Level 3)
 
http://www.w3.org/TR/selectors4/ (Selectors Level 4) (Working Draft)
 
 


 

セレクタの書式について

 


■セレクタの書式一覧

 
■要素を指定する
 
書式説明Level
E1つのタグ名を指定する(タグ名を省略した場合 * と同等)1
*すべての要素を指定する2
 
■論理条件を指定する
 
書式説明Level
E,FE or F1
E:not(simple_selector)E and 簡易セレクタの否定3
 
■2つの要素の関係を指定する
 
書式説明Level
E>FF(自身)は、E の子である2
E FF(自身)は、E の子孫である1
E+FF(自身)は、E の直後である2
E~FF(自身)は、E よりも以後である3
 
■ID 名を指定する
 
書式説明Level
E#id1つの ID 名を指定する1
 
■クラス名を指定する
 
書式説明Level
E.class1つのクラス名を指定する1
 
■属性名を指定する
 
書式説明Level
E[name]1つの属性名を指定する2
 
■属性値を指定する
 
書式説明Level
E[name="value"]完全一致する属性値を指定する2
E[name^="value"]最先頭が一致する属性値を指定する3
E[name$="value"]最後尾が一致する属性値を指定する3
E[name*="value"]部分的に一致する(含まれる)属性値を指定する3
 
書式説明Level
E[name~="value"]属性値を空白記号で区切り、単語のうち1つと完全一致する値を指定する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 ノードリスト内で、自身のみ(1つ)が存在する状態か3
E:only-of-type E グループ内で、自身のみ(1つ)が存在する状態か3
E:empty 自身のノードリスト内に、子が存在しない状態か3
 
■擬似要素一覧
 
書式 説明 Level
E:first-line E 内で1行目となる部分(検出は不可) 1
E:first-letter E 内で1文字目となる部分(検出は不可) 1
E:before E の直前に要素を追加する(検出は不可) 2
E:after E の直後に要素を追加する(検出は不可) 2
 


 

エレメントを取得する

 
 


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

 
document.querySelector() メソッドを使用します。
 
引数に、取得したいエレメントの条件を、セレクタで指定します。
 
任意のエレメントから、querySelector() メソッドを使用する事もできます。
 
この場合、検索範囲が、任意のエレメントの子孫のみに限定されます。
 
(Document or Element).querySelector( "セレクタ" ) :HTMLElement
第01引数 String取得したいエレメントの条件を、セレクタで指定。
戻り値 HTMLElement見つかった場合、エレメントが得られる。見つからなかった場合は、null が得られる。
 
■戻り値 (HTMLElement)
 
マッチしたエレメントが1つ得られます。
 
見つからなかった場合は null が得られます。
 
複数のエレメントがマッチする場合、得られるのは先頭の1つのみです。
 
■使用例
 
セレクタにマッチするエレメントを取得

<html>
  <body>

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


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

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

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

  </body>
</html>
 
ID 属性が、"test" であるエレメントを1つ取得する

// id 属性が、"test" であるエレメントを1つ取得する
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>