要素を取得できなければ、DOM操作は始まらない
DOM操作は、まずHTML内の要素を取得することから始まります。
文字を変更する、スタイルを切り替える、要素を追加するといった処理も、対象となる要素を正しく取得できなければ実行できません。
このページでは、JavaScriptから要素を取得するための代表的な方法と、それぞれの違いや使い分けについて解説します。
どこから取得するのかを指定する
HTMLの要素を取得するときは、どこから取得するかを指定する必要があります。
JavaScriptでは、表示されているHTML全体をdocumentという名前で扱います。
そのため、HTMLから要素を取得するときは、document.を付けて操作を行います。
idの取得
id属性を指定して、1つの要素を取得します。
構文
getElementById('id名');
idはHTML内で一意であることが前提のため、常に1つの要素だけが取得できます。
そのため、取得結果をそのまま操作対象として扱えるのが特徴です。
コード例
//domGet1.js
const str = document.getElementById('companyName');
alert(str.textContent);動作例
ここをクリックして動作を確かめてください。
最もシンプルで処理も高速な取得方法です。
companyNameのidが付与された要素を取得し、alertで株式会社サンプル食品と表示されます。
同じidが複数存在するHTMLでは正しい取得が保証されません。
クラスの取得
class名を指定して、複数の要素をまとめて取得します。
構文
getElementsByClassName('クラス名');
指定したclassを持つ要素が、すべて取得できます。
取得結果は複数要素の集合となるため、個々の要素を操作するには繰り返し処理が必要です。
コード例
//domGet2.js
const str = document.getElementsByClassName('product');
alert(str.length);動作例
ここをクリックして動作を確かめてください。
productのクラスが付与された要素を取得し、取得できた要素の数をalertで表示しています。
idは1つに対して、classはあるだけ複数取得できるのが特徴です。
タグの取得
タグ名を指定して、該当するすべての要素を取得します。
構文
getElementsByTagName('タグ名');
指定したタグ名を持つ要素が、すべて取得できます。
取得結果は複数要素の集合となるため、個々の要素を操作するには繰り返し処理が必要です。
コード例
//domGet3.js
const str = document.getElementsByTagName('p');
alert(str.length);動作例
ここをクリックして動作を確かめてください。
pタグの要素をすべて取得し、要素の数をalertで表示しています。
class同様、タグもあるだけ複数取得できるのが特徴です。
単一セレクタの取得
指定した条件に一致する最初の1要素を取得します。
構文
querySelector('セレクタ');
CSSセレクタを指定し、その条件に一致した要素のうち、最初に見つかった1つだけが取得できます。
条件に一致する要素が複数存在していても、常に1要素しか返らない点が特徴です。
コード例
//domGet4.js
const firstStr = document.querySelector('h3');
alert(firstStr.textontent);動作例
ここをクリックして動作を確かめてください。
h3タグの要素の一番最初の要素を取得し、alertにバナナが表示されます。
また、idやクラスを指定すること、タグとidやクラス（例：div#headerInner、article.productなど）を指定することもできます。
複数セレクタの取得
指定した条件に一致するすべての要素を取得します。
構文
querySelectorAll('セレクタ');
CSSセレクタに一致する要素が、すべて取得できます。
取得結果は複数要素の集合となり、まとめて操作することが可能です。
コード例
//domGet5.js
const firstStr = document.querySelectorAll('h3');
alert(firstStr.length);動作例
ここをクリックして動作を確かめてください。
h3タグの要素をすべて取得し、alertにh3の要素数が表示されます。
querySelectorと同様、idやクラスの指定、タグとidやクラス（例：div#headerInner、article.productなど）を指定することもできます。
getElementとquerySelectorの違い
getElement系は、idやclass、タグ名といったHTMLの属性を直接指定します。
一方、querySelector系は、CSSセレクタという「条件」を使って要素を取得します。
そのため、複雑な条件指定や、特定の構造を持つ要素の取得では、querySelector系のほうが柔軟に対応できます。
単数取得と複数取得の考え方
DOM操作では、取得方法よりも1つ取得するのか、複数取得するのかを意識することが重要です。
getElementByIdやquerySelectorは1要素取得、getElementsByClassNameやquerySelectorAllは複数要素取得になります。
どちらを使うかは、操作したい対象が1つなのか、複数なのかによって決めるのが基本です。