ピックアップ記事
JavaScriptのquerySelectorが便利

JavaScriptでDOM操作を行う際には、

document.getElementById や

document.getElementByClassNameなどをよく使うと思います。

しかし、document.querySelectorがとても便利だったため、紹介したいと思います。

IDを取得する

<div id="test">Sample</div>

<script>
console.log(document.getElementById('querySelectortest'));
console.log(document.querySelector('[id="test"]'));
console.log(document.querySelector('#test'));
</script>

quierySelectorを使用すれば上記のような方法でも記述することが可能です。

また、以下のように記述することで、部分一致による取得も可能です。

console.log([].slice.call(document.querySelectorAll('[id^="tes"]')));

Classを取得する

<div class="test">Sample</div>

<script>
console.log([].slice.call(document.getElementsByClassName('test')));
console.log([].slice.call(document.querySelectorAll('[class="test"]')));
console.log([].slice.call(document.querySelectorAll('.test')));
</script>

Classの場合には、querySelectorAllを使用します。

こちらを使用することで、複数の要素が取得できます。

(idの場合は、一意のため、複数取得する必要がなかった。)

また、取得した要素は、「 HTMLCollection 」や「Nodelist」のため、配列に変換する処理も加えています。

IDと同様に以下のように記述することで、部分一致による取得が可能です。

console.log([].slice.call(document.querySelectorAll('[class^="tes"]')));
おすすめの記事