JavaScriptの便利なSelectorを2つ

こんにちは、@yoheiMuneです。
今日は、javaScriptのセレクターについてブログに書きたいと思います。
JavaScriptでdocument.getElementById()などを要素選択の為に使うかと思いますが、実は猛ちょい便利な2つのセレクターがあるようです。今日はそれを調べた内容と使ってみたサンプルと感想を記載したいと思います。

便利な2つのセレクター

それは、以下2つのセレクターです。

戻り値	関数名	引数
Element	querySelector	DOMString
NodeList	querySelectorAll	DOMString

参考先：http://www.w3.org/TR/selectors-api/

それぞれ引数にCSSで指定するセレクターを指定することで、要素を取得出来ます。
querySelectorは引数に指定したセレクターに合うElementを1つ返却します。
querySelectorAllは引数に指定したセレクターに合うElementが複数ある場合には、配列形式で返却します。

使い方の例

使い方の例を示します。今回は、以下のような画面において、li要素をクリックされたら、ダイアログを出すという実装です。

<h1>Web File Management</h1>
<div id="fileList">
  <li>
    <img src="image/icon_folder.jpg" alt="folder_icon" height='20px' width='20px'/>
    <span>.</span>
  </li>
  <li>
    <img src="image/icon_folder.jpg" alt="folder_icon" height='20px' width='20px'/>
    <span>..</span>
  </li>
  <li>
    <img src="image/icon_file.jpg" alt="file_icon" height='20px' width='20px'/>
    <span>aaa.txt</span>
  </li>
  <li>
    <img src="image/icon_file.jpg" alt="file_icon" height='20px' width='20px'/>
    <span>bbb.txt</span>
  </li>
</div>

<script type="text/javascript">
	var liArray = document.querySelectorAll('#fileList li');
	for (var i = 0; i < liArray.length; i++) {
		liArray[i].onclick = function() {
			var fileName = this.querySelector('span').innerHTML;
			alert(fileName);
		}
	}
</script>

querySelectorAll("#fileList li")にて、fileListというIDのついた要素のli子要素をリストで取得します。取得したliに一つずつonclickイベントを設定します。li要素でももちろんquerySelectorやquerySelectorAllが使えます。

最後に

この関数は最近まで知りませんでしたが、使うと便利で重宝しています。最近の新しいブラウザではおおよそ使えるようです。古いブラウザを切り落とせるような見切りが出来るなら、使っても良いかもです♪(´ε｀ )もちろん、jQueryといった便利なフレームワークを使っても良いと思いますが、JavaScriptそのままでも使える事が、開発者としては重要なのではないかと、最近は思います。はい、私見です。

運営しているサイトです。どうぞよろしくお願いします(*´∇｀*)
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト

cooking_bot：料理情報をつぶやくTwitterアカウント