【JavaScript】要素を取得するメソッド３つ+α

【JavaScript】要素を取得するメソッド３つ+α | ねたまめ.com

よく使うのに特性をつい忘れてしまうメソッドの備忘録です。【 getElementById 】指定IDと一致する要素指定されたID属性と一致する要素を一つ返します。存在しない場合は null を返します。const els = documen...

netamame.com

よく使うのに特性をつい忘れてしまうメソッドの備忘録です。

目次

• 【 getElementById 】指定IDと一致する要素
• 【 getElementsByClassName 】指定クラスと一致する要素
  • getElementById と getElementsByClassName の組み合わせ
• 【 querySelector・querySelectorAll 】指定した要素
  • querySelectorAll について

【 getElementById 】指定IDと一致する要素

指定されたID属性と一致する要素を一つ返します。
存在しない場合は null を返します。

const els = document.getElementById('id-txt');

【参考】Document.getElementById() | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

【 getElementsByClassName 】指定クラスと一致する要素

指定されたクラス名を持つすべての要素のリスト(HTMLCollection)を返しますが、for文で回して出力が必要です。
※このリストは動的で、DOMの変更をリアルタイムで反映します。

//.txtを持つ全ての要素を取得
const els = document.getElementsByClassName('cls-txt');
//.txtと.redを両方持つ全ての要素を取得
const els = document.getElementsByClassName('cls-txt cls-red');

//出力例
for ( let i = 0; i < els.length; i ++ ){
	console.log(els[i]);
}

【参考】Document.getElementsByClassName() | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

getElementById と getElementsByClassName の組み合わせ

下のメソッドチェーンでは、#id-txt要素の中にある.cls-txtを持つ全ての要素を取得します。

const els = document.getElementById("id-txt").getElementsByClassName("cls-txt");

【 querySelector・querySelectorAll 】指定した要素

マッチした要素の最初の一つを取得します。

// class
const els = document.querySelector('.txt');
// ID
const els = document.querySelector('#txt');
// データ属性
const els = document.querySelector('[type="text"]');
// 属性値
const els = document.querySelector('[data-attr]');
// 複合セレクタ
const els = document.querySelector('input[type="text"].cls-txt#id-txt');

【参考】document.querySelector() | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

querySelectorAll について

マッチした要素のリスト(NodeList)を返します。
※このリストは静的で、取得後のDOMの変更はリストに反映されません。

const els = document.querySelectorAll('.txt');

【参考】document.querySelectorAll() | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll