【JavaScript】qerySelectorによるDOMの取得

document.querySelector / document.querySelectorAllで要素を取得する

• document.querySelectorとdocument.querySelectorAllの違い
  • document.querySelector
    • 一致する要素のうち、先頭の1件を取得する
    • idを指定する場合、document.getElementById() で取得するほうが高速である
  • document.querySelectorAll
    • 一致する要素のリストを取得する

セレクター

セレクター	説明	例
(*)	全ての要素を取得	document.querySelectorAll('*');
(#id)	指定したIDの要素を取得	document.querySelector('#sample-id');
(.class)	指定したクラス名の要素を取得	document.querySelectorAll('.sample-className');
（タグ名）	指定したタグ名の要素を取得	document.querySelectorAll('li');
(複数指定)	指定したいずれかのセレクターに合致する要素をすべて取得	document.querySelectorAll('#sample-id,.sample-className,li');
(parent > child)	parent要素の子要素のchildを取得	document.querySelector('ul > li');
(prev + next)	prev要素の直後に存在するnext要素を取得	document.querySelector('div + ul');
(prev + siblings)	prev要素以降のsiblings兄弟要素を取得	document.querySelector('div ~ span');
[attr]	指定した属性を持つ要素を取得	document.querySelector('[data-attr]');
[attr=value]	属性がvalue値に等しい要素を取得	document.querySelector('[data-attr="123"]');
[attr^=value]	属性がvalueから始まる値を持つ要素を取得	document.querySelector('[data-attr^="12"]');
[attr$=value]	属性がvalueで終わる値を持つ要素を取得	document.querySelector('[data-attr$="23"]');
[attr*=value]	属性がvalueを含む値を持つ要素を取得	document.querySelector('[data-attr*="2"]');
[selector1][selector2][selectorx]	複数の属性フィルタすべてにマッチする要素を取得	document.querySelector('div#main[data-attr*="2"]');
(:checked)	チェックボックス・ラジオボタンのチェック済み要素を取得	document.querySelectorAll('input[type="checkbox"]:checked')