In 'n' Out

要素を取得できなければ、DOM操作は始まらない

DOM操作は、まずHTML内の要素を取得することから始まります。
文字を変更する、スタイルを切り替える、要素を追加するといった処理も、対象となる要素を正しく取得できなければ実行できません。
このページでは、JavaScriptから要素を取得するための代表的な方法と、それぞれの違いや使い分けについて解説します。

どこから取得するのかを指定する

HTMLの要素を取得するときは、どこから取得するかを指定する必要があります。
JavaScriptでは、表示されているHTML全体をdocumentという名前で扱います。
そのため、HTMLから要素を取得するときは、document.を付けて操作を行います。

idの取得

id属性を指定して、1つの要素を取得します。

構文

document.getElementById('id名');

idはHTML内で一意であることが前提のため、常に1つの要素だけが取得できます。
getElementByIdはdocumentに対して使用し、取得結果は必ず1つの要素になります。

コード例

<p id="getId">株式会社サンプル食品</p>

//domGet1.js
const str = document.getElementById('getId');

alert(str.textContent);

動作例

最もシンプルで処理も高速な取得方法です。
getIdのidが付与された要素を取得し、alertで株式会社サンプル食品と表示されます。
同じidが複数存在するHTMLでは正しい取得が保証されません。

クラスの取得

class名を指定して、複数の要素をまとめて取得します。

構文

対象.getElementsByClassName('クラス名');

指定したclassを持つ要素が、すべて取得できます。
取得結果は複数要素の集合となるため、個々の要素を操作するには繰り返し処理が必要です。
対象はdocumentや何かしらの要素に対して指定します。

コード例

<ul>
    <li class="getClass">1番目の要素</li>
    <li class="getClass">2番目の要素</li>
    <li class="getClass">3番目の要素</li>
    <li class="getClass">4番目の要素</li>
    <li class="getClass">5番目の要素</li>
</ul>

//domGet2.js
const str = document.getElementsByClassName('getClass');

alert(str.length);

動作例

getClassのクラスが付与された要素を取得し、取得できた要素の数をalertで表示しています。
idは1つに対して、classはあるだけ複数取得できるのが特徴です。

タグの取得

タグ名を指定して、該当するすべての要素を取得します。

構文

対象.getElementsByTagName('タグ名');

指定したタグ名を持つ要素が、すべて取得できます。
取得結果は複数要素の集合となるため、個々の要素を操作するには繰り返し処理が必要です。
対象はdocumentや何かしらの要素に対して指定します。

コード例

<p><b>1番目の要素</b></p>
<p>2番目の要素</p>
<p><b>3番目の要素</b></p>
<p>4番目の要素</p>
<p><b>5番目の要素</b></p>

//domGet3.js
const str = document.getElementsByTagName('b');

alert(str.length);

動作例

bタグの要素をすべて取得し、要素の数をalertで表示しています。
class同様、タグもあるだけ複数取得できるのが特徴です。

単一セレクタの取得

指定した条件に一致する最初の1要素を取得します。

構文

対象.querySelector('セレクタ');

CSSセレクタを指定し、その条件に一致した要素のうち、最初に見つかった1つだけが取得できます。
条件に一致する要素が複数存在していても、最初に見つかった1要素しか返らない点が特徴です。
対象はdocumentと何かしらの要素に対して指定します。

コード例

<p>1番目の要素</p>
<p>2番目の要素</p>
<p><i>3番目の要素</i></p>
<p>4番目の要素</p>
<p><i>5番目の要素</i></p>

//domGet4.js
const firstStr = document.querySelector('i');

alert(firstStr.textContent);

動作例

iタグの要素の一番最初の要素を取得し、alertに3番目の要素と表示されます。
また、idやクラスを指定すること、タグとidやクラスを指定することもできます。

コード例

const firstStr = document.querySelector('p#id');
const firstStr = document.querySelector('p.class');

ただし、idは一意なためgetElementByIdを使う方がいいでしょう。

複数セレクタの取得

指定した条件に一致するすべての要素を取得します。

構文

対象.querySelectorAll('セレクタ');

CSSセレクタに一致する要素が、すべて取得できます。
取得結果は複数要素の集合となるため、繰り返し処理で個々の要素を操作します。
対象はdocumentと何かしらの要素に対して指定します。

コード例

<p><s>1番目の要素</s></p>
<p>2番目の要素</p>
<p><s>3番目の要素</s></p>
<p>4番目の要素</p>
<p><s>5番目の要素</s></p>

//domGet5.js
const firstStr = document.querySelectorAll('s');

alert(firstStr.length);

動作例

sタグの要素をすべて取得し、alertにsの要素数が表示されます。
querySelectorと同様、idやクラスの指定、タグとidやクラスを指定することもできます。

getElementとquerySelectorの違い

getElement系は、idやclass、タグ名といったHTMLの属性を直接指定します。
一方、querySelector系は、CSSセレクタという「条件」を使って要素を取得します。
そのため、複雑な条件指定や、特定の構造を持つ要素の取得では、querySelector系のほうが柔軟に対応できます。

単数取得と複数取得の考え方

DOM操作では、取得方法よりも1つ取得するのか、複数取得するのかを意識することが重要です。
getElementByIdやquerySelectorは1要素取得、getElementsByClassNameやquerySelectorAllは複数要素取得になります。
どちらを使うかは、操作したい対象が1つなのか、複数なのかによって決めるのが基本です。