【JS】querySelector()の使い方

querySelector()とは

querySelector()とは、Jquery(CSSセレクタ)のように要素を簡単に取得できるものになります。

JavaScriptにはほかにも要素を取得するgetElementById()や、getElementsByName()など要素を取得できる方法はいろいろとありましたが、querySelector()を利用することで、CSSのセレクタと同じように要素を取得することができます。

使い方

基本的な構文はこちらです。

document.querySelector( CSSセレクタ );

CSSセレクタの場所に要素を指定すると最初に合致した要素で止まります。

合致する要素を取得するにはAllを追加する必要があります。

document.querySelectorAll( CSSセレクタ );

この場合、結果が配列で返されるので繰り返し等で適用させる必要があります。(詳しくは後述)

例

簡単な例を挙げます。

まず、querySelectorのの例です。

<div class="test">未変更</div>
<div class="test">未変更</div>
<script>
const elem = document.querySelector('.test');
elem.innerHTML="変更済み";
</script>

この処理の場合、前にもありますが最初に合致した要素のみを取得します。

すべての要素に実行させるにはこのように記述する必要があります。

<div class="test">未変更</div>
<div class="test">未変更</div>
<script>
const elem = document.querySelectorAll('.test');
elem.forEach(function(elems) {
 elems.innerHTML="変更済み";
});
</script>

こうすることで、すべての要素に適用することができます。

最後に

querySelectorは、JavaScriptを扱いやするくするものの一つではないでしょうか。

また、1つの要素のみを取得するものとすべての要素を取得するものと分けることができるので用途により使い分けることができます。

また、querySelectorをさらに扱いやすくするライブラリもあるのでこちらもぜひ見ていただくといいのではないでしょうか。

超軽量DOM操作ライブラリdom_sen.js