JavaScriptでHTML要素を選択する方法

今回はJavaScriptからHTML要素を選択する方法について
簡単にまとめてみたいと思います。

JavaScriptからHTML要素を選択する方法は下記になります。

ではそれぞれもう少し詳しくみていきましょう。

1：document.querySelector()

document.querySelector('CSSのセレクタ')

document.querySelector()は、
CSSのセレクタ名で取得したいHTML要素を取得することができます。

パラメータを指定する際は、
ID(#)やクラス(.ドット)など通常のCSSを書くときと同じように指定します。

当てはまるHTML要素が複数ある場合は、最初の1つのみが取得されます。

複数要素を取得したい場合は、
次の項目の「document.querySelectorAll」を使う必要があります。

2：document.querySelectorAll()

document.querySelectorAll('CSSのセレクタ')

document.querySelectorAll()は、document.querySelector()と同様に
CSSのセレクタ名でHTML要素を取得することがきます。

querySelectorAllの「オール」とあるように、
querySelectorとちがって当てはまる要素全てを取得することができます。

形式はNodeListで返ってきます。

3：document.getElementById()

document.getElementById('id名')

document.getElementById()は、
ID名で取得したいHTML要素を取得することができます。

またパラメータを指定する際は、IDを表す#は不要でID名のみを指定します。

なおID名なので取得される要素は1つのみになります。

4：document.getElementsByClassName()

document.getElementsByClassName('クラス名')

document.getElementsByClassName()は、
クラス名で取得したいHTML要素を取得することができます。

またパラメータを指定する際は、
クラスを表す.(ドット)は不要でクラス名のみを指定します。

getElementsとあるように、当てはまる全ての要素を取得できます。

形式はHTMLCollectionで返ってきます。

5：document.getElementsByTagName()

document.getElementsByTagName('タグ名')

document.getElementsByClassName()は、
HTMLのタグ名で取得したいHTML要素を選択することができます。

getElementsとあるように、当てはまる全ての要素を取得できます。

形式はHTMLCollectionで返ってきます。

以上、JavaScriptでHTML要素を取得する方法でした。

JavaScriptでクラスを操作する方法今回はJavaScriptでクラスを操作する方法についてまとめたいと思います。...