CSSセレクタ形式の条件に一致する要素ノードを取得

document.querySelector(selectors)

（Web API ＞ Document）
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

JavaScriptから任意のHTML要素を検出・取得することができるメソッド。id属性値・class属性値などを意識せずにjQuery感覚でHTML要素をセレクタ指定することができる。戻り値は Element オブジェクト。 querySelector メソッドは単一の要素ノードを返すため、複数の要素が条件に一致した場合は最初の要素ノードを返す。見つからなかった場合は null が返される。

const elem1 = document.querySelector('.sample');
const elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);

document.querySelectorAll(selectors)

（Web API ＞ Document）
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

querySelectorとは違い、合致するHTML要素をすべて取得することができる。

// querySelectorAllで.listが付いているHTML要素をすべて取り出し、forEachで1つずつ処理している
const elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
    console.log(value);
})
inserted by FC2 system