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(''));
console.log(document.querySelector('#test'));
</script>

quierySelectorを使用すれば上記のような方法でも記述することが可能です。 また、以下のように記述することで、部分一致による取得も可能です。

console.log([].slice.call(document.querySelectorAll('')));

Classを取得する

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

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

Classの場合には、querySelectorAllを使用します。 こちらを使用することで、複数の要素が取得できます。 （idの場合は、一意のため、複数取得する必要がなかった。） また、取得した要素は、「 HTMLCollection 」や「Nodelist」のため、配列に変換する処理も加えています。 IDと同様に以下のように記述することで、部分一致による取得が可能です。

console.log([].slice.call(document.querySelectorAll('')));