JavaScript:簡単!便利なセレクタ querySelector と querySelectorAll の使い方

DOM要素の取得には getElement系(getElementById、getElementsByTagName等)を使用することが多いと思いますが、今回はさらに簡単に要素を取得できる querySelector/querySelectorAll の使い方をメモ。

querySelector と querySelectorAll の使い方

概要

関数名・引数・戻り値は以下となります。

関数名 引数 戻り値
querySelector DOM String Element
querySelectorAll DOM String Node List

querySelector

DOMで指定した要素を1つ取得します。
サンプルコードを実行すると、div要素内をクリックでクラス名をアラート表示します。

サンプルコード
<!DOCTYPE html>
<html>
<body>
<div class="sample-div" style="width:94%; padding:3%; background:#CCC;">
クリックでこのdivのクラス名をアラート表示
</div>
</body>
<script>
var cl = document.querySelector('.sample-div');
cl.onclick = function() {
    alert(cl.className);
}
</script>
</html>
結果
クリックでこのdivのクラス名をアラート表示

querySelectorAll

querySelector は一つの要素しか取得できませんが、Allがつくと全ての要素を配列で取得してくれます。
サンプルコードを実行すると、リスト要素内をクリックで内部要素をアラート表示します。

サンプルコード
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.sample-list li { margin:5px; padding:5px 10px; background:#CCC; }
</style>
</head>
<body>
<ul class="sample-list">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</body>
<script>
var listArray = document.querySelectorAll('.sample-list li');
for (i=0; i< listArray.length; i++) {
    listArray[i].onclick = function() {
        alert(this.innerHTML);
    }
}
</script>
</html>
結果
  • menu1
  • menu2
  • menu3

まとめ

querySelectorAll は一発で内部要素が配列化されるので、様々な場面で活躍しそうですね。どんどん使っていきましょう。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents