塩焼きブログ

塩焼きに関しての研究内容を公開しています

JavaScriptのquerySelector()とquerySelectorAll()でCSSセレクタでelementを抜き出す

JavaScriptdocument.querySelector()を知ってるか。jQueryみたいにCSSセレクタを書いてelementを取得できる。単一のelementを取得するならdocument.querySelector()で、複数のelementを取得するならdocument.querySelectorAll()だそうだ。さっそく検証してみる。

<div class="container">
  <div id="test">
  </div>
</div>

<span class="test"></span>
<span class="test"></span>
<span class="test"></span>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

document.querySelector()を使った例

console.log(document.querySelector('.container #test'));
console.log(document.querySelector('.test'));
console.log(document.querySelector('ul li'));

一つでも複数でも結果はひとつ

div#taiwa-area
<span class="test"></span>
<li>test</li>

document.querySelectorAll()を使った例

console.log(document.querySelectorAll('.container #test'));
console.log(document.querySelectorAll('.test'));
console.log(document.querySelectorAll('ul li'));

一つでも複数でも結果は配列

[div#taiwa-area, item: function]
[span.test, span.test, span.test, item: function]
[li, li, li, item: function]

jQueryのfindでもいいんだけど、findだけ利用したいならこれを使うのがいいねえ