1. はじめに
JavaScriptはWebと組み合わせることが多い言語です。
そのためにdocument.getElementを利用したHTML要素の取得と操作はWebアプリケーションを作るためには必須となってくるでしょう。
今回は、document.getElementを利用したHTML要素の取得方法を4つ紹介します。
2. idからタグを取得する「getElementById」
getElementByIdメソッドは、HTML要素に付けられた一意のIDを元にタグを取得できます。
これにより、想定外のHTML要素を取得することがなく非常によく使われるメソッドです。
const list = document.getElementById("copyList");
3. クラスからタグを取得する「getElementsByClassName」
getElementsByClassNameメソッドは複数の要素で同じクラスを共有することでスタイルなどを一括変更することに適したメソッドです。
これにより、リスト処理などを非常に便利に操作することができます。
const element = document.getElementsByClassName('myClass');
4. タグ名からタグを取得する「getElementsByTagName」
特定のHTMLタグを持つ複数の要素を一括して取得するには、getElementsByTagNameメソッドを利用します。
特定の要素を取得するのが難しく、getElementsByTagNameでHTML操作をするには一工夫が必要です。
const pTag= document.getElementsByTagName('p');
5. nameからタグを取得する「getElementsByName」
getElementsByNameメソッドはフォーム要素などで使用されるname属性を元に要素を取得します。
例えば、特定のフォームフィールドに対する入力操作を行う際に利用されます。
const element = document.getElementsByName('myName');
