[JavaScript] JavaScriptの便利なSelectorを2つ

今日は、javaScriptのセレクターについてブログに書きたいと思います。

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

便利な2つのセレクター

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

参考先：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そのままでも使える事が、嬉しい事だなぁ思います。