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"]')));
