トップページ >  HTML5 >  Selectors API
初版2011/08/29: 最終更新日2011/08/29
Selectors API
目次
Selectors APIとは
Selectors APIの使い方
Selectors APIとは

Selectors APIは、CSSセレクタを指定して要素ノードを取得する仕組み(API)です。
jQueryなどのライブラリに似ています。

各ブラウザの対応

Selectors APIは、2011年8月現在以下のブラウザで対応しています。
FireFox 3.0~、Safari 3.1~、Opera 9.5~、Google Chrome 1~、IE 9~

Selectors APIの使い方

Selectors APIは、以下のdocumentオブジェクトのメソッドとして定義されています。

querySelector( CSSセレクタ )
文書順にCSSセレクタとマッチした要素のうち、最初のものを返します。
querySelectorAll( CSSセレクタ )
文書順にCSSセレクタとマッチした要素全てを静的なNodeListとして返します。
静的なNodeListなので、DOM操作を行っても取得したNodeListは変化しません。

リスト1. Selectors API

//奇数項目に色づけ
function myOdd(){
	// CSSセレクタで奇数のli要素のみを抽出
	var li = document.querySelectorAll("li:nth-child(odd)");
	for( var i=0; i<li.length; i++){
		li[i].style.color = "red";
	}
}

//全てをデフォルト色
function myClr(){
	// CSSセレクタでli要素を抽出
	var li = document.querySelectorAll("li");
	for( var i=0; i<li.length; i++){
		li[i].style.color = "";
	}
}

実装例

  • 1番目の項目
  • 2番目の項目
  • 3番目の項目
  • 4番目の項目
  • 5番目の項目