公開日:
【JavaScript】 getElementByIdメソッドについて徹底解説！
getElementById()メソッドはWebページから特定のidを持つ要素を取得するメソッドです。
getElementById()メソッドとは
getElementById()メソッドはWebページから特定のidを持つ要素を取得するメソッドです。
基本的な書き方
getElementById()メソッドは、Webページの中から特定の要素を取得するために使用されます。そのため、Webページのソースコードの情報が必要です。JavaScriptにはdocumentという特別なオブジェクトが用意されています。このdocumentオブジェクトは、ブラウザが読み込んだWebページのすべてのソースコードの情報を持っています。したがって、documentオブジェクトに対してgetElementById()メソッドを使うことで、特定の要素を取得することができます。
以下が基本的な使い方です。
1
const element = document.getElementById('idの値')
このように引数に取得する要素のidを指定します。取得した要素は定数や変数に代入して使用します。id属性はHTML要素の中の一意の値なので、特定の一つの要素を確実に取得したいときに便利なメソッドです。
getElementsByClassName()との違い
getElementById()メソッドがidの値を使用して要素を取得するのに対し、要素のクラス名を利用して要素を取得するのがgetElementsByClassName()メソッドです。
getElementById()メソッドでは、idがHTMLの中で一意の値であるため、取得する要素は1つだけです。
一方、クラス名は汎用的に使えるため、HTMLの中には複数の要素が同じクラス名を持つことがあります。そのため、getElementsByClassName()メソッドの返り値は複数の要素を含むHTMLコレクションとして取得されます。
複数の要素に対して何らかの処理をしたい場合は、getElementsByClassName()メソッドを使うと便利です。
活用例
実際にgetElementById()はどのように使われるのか、具体例を挙げて解説します。
イベントを追加
getElementById()を使ってHTML要素を取得し、その要素に対して何かイベントが発生した時の処理を実行させることができます。その際に使うメソッドがaddEventListener()メソッドです。
以下はボタンをクリックするとアラートを表示させる例です。
1
2
<button id="example">クリック</button>
1
2
3
4
5
6
7
// idがexampleの要素を取得し、定数buttonに代入
const button = document.getElementById('example');
// 取得した要素がクリックされるとアラートを表示
button.addEventListener('click',() => {
alert(クリックされました);
});
以下のように取得した要素であるボタンをクリックすると何らかの処理を実行させることができます。
実際にボタンをクリックしてアラートが出るか確認してみましょう。
See the Pen getElementById_01 by miyajima yuya (@pikawaka) on CodePen.
この処理の順番を以下に記述します。
exampleというidを持つ要素を取得- 取得した要素を
buttonという定数に代入 buttonに対し、クリックされた場合のイベントリスナーを設定- ユーザーがボタンをクリック
- クリックイベントの中身が実行
1. exampleというidを持つ要素を取得
1
2
3
4
5
6
7
// idがexampleの要素を取得し、定数buttonに代入
const button = document.getElementById('example');
// 取得した要素がクリックされるとアラートを表示
button.addEventListener('click',() => {
alert(クリックされました);
});
この例ではHTMLの要素の中からexampleというidが付与された要素を取得しています。
まずはHTMLのソースコードの情報を持っているdocumebtオブジェクトに対しgetElementById()メソッドを使用します。今回はexampleというidを持つ要素を取得するので引数は'example'とidの値を入れます。
2. 取得した要素をbuttonという定数に代入
1
2
3
4
5
6
7
// idがexampleの要素を取得し、定数buttonに代入
const button = document.getElementById('example');
// 取得した要素がクリックされるとアラートを表示
button.addEventListener('click',() => {
alert(クリックされました);
});
取得した要素が返り値となるので、今回はbuttonという定数に代入しました。
3. buttonに対し、クリックされた場合のイベントリスナーを設定
1
2
3
4
5
6
7
// idがexampleの要素を取得し、定数buttonに代入
const button = document.getElementById('example');
// 取得した要素がクリックされるとアラートを表示
button.addEventListener('click',() => {
alert(クリックされました);
});
次に取得した要素がクリックされた際の処理を実行するためaddEventListener()メソッドを使います。第一引数にどのイベントが行われたかを指定し、第二引数に関数を設定します。今回はクリックされた時なのでイベント名はclickとなります。
4. ユーザーがボタンをクリック
ユーザーがブラウザに表示されている「クリック」と書かれたボタンをクリックします。
5. クリックイベントの中身が実行
1
2
3
4
5
6
7
// idがexampleの要素を取得し、定数buttonに代入
const button = document.getElementById('example');
// 取得した要素がクリックされるとアラートを表示
button.addEventListener('click',() => {
alert(クリックされました);
});
クリックされると関数が実行され、「クリックされました」というアラートが表示されます。
このように、documentに対してgetElementById()メソッドを使い特定の要素を取得し、addEventListener()を使ってイベントを追加するというのが基本的な流れになります。
要素の取得と操作
getElementById()を使ってHTML要素を取得し、その属性や内容を操作することができます。この例では、イベントリスナーと併用して、商品の購入数に変化があった際に、その購入数に応じて合計金額が自動で計算され、表示されるようにします。
1
2
3
4
5
6
7
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total">120</span>円</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
const updateTotal = () => {
const price = parseFloat(priceInput.textContent);
const quantity = parseInt(quantityInput.value);
const total = price * quantity;
totalSpan.textContent = total;
};
quantityInput.addEventListener('input', updateTotal);
// 初期計算
updateTotal();
実際に数量を変更し、合計金額が変わるか確認してみましょう。
See the Pen getElementById_02 by miyajima yuya (@pikawaka) on CodePen.
この処理の流れを以下に記述します。
- 価格の情報を取得するため、
priceというidを持つ要素を取得 - 数量の情報を取得するため、
quantityというidを持つ要素を取得 - 合計金額を挿入するため、
totalというidを持つ要素を取得 - 合計金額を取得する関数を定義
- 関数内で商品金額を
textContentで取得し、parseIntメソッドで文字列から数値に変換 - 関数内で購入数を
valueで取得し、parseInt`メソッドで文字列から数値に変換 - 商品金額と購入数を掛け合わせ、合計金額を取得
- 合計金額が表示される要素に
textContentを使い、数値を設定 - 数量の入力枠に入力されたら作成した関数を実行させる
- 最初にページを開いた時にも関数を実行させ、デフォルトの数値を表示させる
それでは順番に解説していきます。
1. 価格の情報を取得するため、priceというidを持つ要素を取得
この例では合計金額を計算する必要があるため、商品の金額と購入数の情報が必要になります。そのため、まずは商品の金額が含まれている要素を取得します。
1
2
3
4
5
6
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total"></span>円</p>
HTMLを確認すると商品の金額はpriceというidが付与されている要素になるため、getElementById()メソッドを使い、idがpriceの要素を取得し、priceInptという定数に代入します。
1
2
// 商品金額の要素を取得
const priceInput = document.getElementById('price');
2. 数量の情報を取得するため、quantityというidを持つ要素を取得
1
2
3
4
5
6
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total"></span>円</p>
次に購入する数量を取得するため、数量を入力するinputタグに付与されているidのquantityをgetElementById()メソッドの引数に指定し、返り値をquantityInputに代入します。
1
2
3
const priceInput = document.getElementById('price');
// 数量の要素を取得
const quantityInput = document.getElementById('quantity');
3. 合計金額を挿入するため、totalというidを持つ要素を取得
1
2
3
4
5
6
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total"></span>円</p>
商品金額と数量を掛け合わせた数値が合計金額になるため、値が表示される要素を取得します。確認するとtotalというidが付与された要素に合計金額の値が入るため、getElementById()メソッドを使い、この要素を取得し、totalSpanという定数に代入します。
1
2
3
4
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
// 合計金額の要素を取得
const totalSpan = document.getElementById('total');
4. 合計金額を取得する関数を定義
次に、合計金額を取得して要素に設定する関数を定義します。
関数内では、商品の金額と購入数をそれぞれ整数として取得し、それらを掛け合わせた合計金額を計算します。その後、計算した合計金額をHTMLの合計金額を表示する要素に設定します。
1
2
3
4
5
6
7
8
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
// 合計金額を取得し、要素に設定する関数を定義
const updateTotal = () => {
// 処理
};
5. 関数内で商品金額をtextContentで取得し、parseIntメソッドで文字列から数値に変換
1
2
3
4
5
6
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total"></span>円</p>
次に、関数内で取得した要素priceInputからtextContentプロパティを使ってテキストの値を取得します。このテキストが商品の価格になります。
このテキストの値は後ほど数量と掛け算を行うため、数値である必要があります。そのため、文字列を数値に変換するためにparseInt()メソッドを使用します。引数にはpriceInput.textContentを入れて商品の金額を指定します。最後に、数値化した値をpriceという定数に代入します。
HTMLを確認すると、id属性がpriceである要素のテキストは120なので、priceという定数には120という数値が代入されます。
1
2
3
4
5
6
7
8
9
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
// 合計金額を取得し、要素に設定する関数を定義
const updateTotal = () => {
// 商品金額の値を正数で取得
const price = parseInt(priceInput.textContent); // 120の数値が代入
};
6. 関数内で購入数をvalueで取得し、parseIntメソッドで文字列から数値に変換
1
2
3
4
5
6
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total"></span>円</p>
次に関数内で取得した要素のquantityInputから入力された値を取得します。入力欄に入れられた値を取得するにはvalueを使用します。この値も先ほどと同様に計算をするので、parseInt()メソッドを使用して文字列から数値にし、quantityという定数に代入します。
1
2
3
4
5
6
7
8
9
10
11
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
// 合計金額を取得し、要素に設定する関数を定義
const updateTotal = () => {
// 商品金額の値を正数で取得
const price = parseInt(priceInput.textContent);
// 購入数を正数で取得
const quantity = parseInt(quantityInput.value);
};
7. 商品金額と購入数を掛け合わせ、合計金額を取得
次に取得した商品金額と購入数を掛け合わせます。それぞれprice、quantityという定数に代入されているため、それらを掛け合わせ、totalに代入します。
1
2
3
4
5
6
7
8
9
10
11
12
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
const updateTotal = () => {
// 商品金額の値を正数で取得
const price = parseInt(priceInput.textContent);
// 購入数を正数で取得
const quantity = parseInt(quantityInput.value);
// 合計金額の計算
const total = price * quantity;
};
8. 合計金額が表示される要素にtextContentを使い、数値を設定
1
2
3
4
5
6
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total"></span>円</p>
次に計算した合計金額をtextContentを使い表示させる要素にセットします。
これで合計金額を計算し、ページ内に値をセットする関数が完成です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
const updateTotal = () => {
// 商品金額の値を正数で取得
const price = parseInt(priceInput.textContent);
// 購入数を正数で取得
const quantity = parseInt(quantityInput.value);
// 合計金額の計算
const total = price * quantity;
// 合計金額をHTMLの要素に設定};
totalSpan.textContent = total;
};
9. 数量の入力枠に入力されたら作成した関数を実行させる
次に、数量の入力フィールドの値が変更されたら、先ほど作成した関数を実行させるようにします。今回はaddEventListener()メソッドを使い、数値の入力フィールドを監視します。そして、「フォーム要素の中身が変更された」というイベントが行われたときに作成した関数を実行させます。
1
2
3
4
5
6
<p>商品A: <span id="price">120</span>円</p>
<div class="input_feild">
<label for="quantity">数量:</label>
<input id="quantity" type="number" value="1" min="0">
</div>
<p>合計金額: <span id="total"></span>円</p>
数値の変更を行う要素はquantityInputとして取得しているので、この要素にaddEventListener()メソッドを使います。addEventListener()メソッドの第一引数には「フォーム要素の中身が変更された」というイベントなのでinputが、第二引数には合計金額を計算し、要素に表示させるための関数であるupdateTotalメソッドを指定します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
const updateTotal = () => {
// 商品金額の値を正数で取得
const price = parseInt(priceInput.textContent);
// 購入数を正数で取得
const quantity = parseInt(quantityInput.value);
// 合計金額の計算
const total = price * quantity;
// 合計金額をHTMLの要素に設定};
totalSpan.textContent = total;
};
// イベントリスナーの追加
quantityInput.addEventListener('input', updateTotal);
addEventListener()メソッドの第二引数に関数を指定する場合は関数名のみとし、()をつけないよう注意しましょう。()をつけてしまうとイベントが発生していないときにでも関数が実行されてしまいます。今回の例であればupdateTotal関数に引数は不要ですが、もし引数が必要な関数の場合は、無名関数やアロー関数を使いましょう。
1
2
3
4
5
6
7
function greeting(name) {
alert(`${name}さん、こんにちは`};
}
要素.addEventListener('input', () => {
greeting('山田');
});
10. 最初にページを開いた時にも関数を実行させ、デフォルトの数値を表示させる
これで数値を入力すると自動で合計金額が計算され、ページを更新しなくても金額がリアルタイムで表示されるようになりました。ですが、値が変わらなければイベントが実行されず合計金額の箇所に値が入らないため、最初にページを開いたときは合計金額の欄は空欄になってしまいます。ですので、このJavaScriptファイルが読み込まれた時のみ関数が実行されるよう、ファイルの末尾に関数を呼び出して完成です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const priceInput = document.getElementById('price');
const quantityInput = document.getElementById('quantity');
const totalSpan = document.getElementById('total');
const updateTotal = () => {
const price = parseFloat(priceInput.textContent);
const quantity = parseInt(quantityInput.value);
const total = price * quantity;
totalSpan.textContent = total;
};
quantityInput.addEventListener('input', updateTotal);
// 初期計算
updateTotal();
では、実際に以下のCodePenを使って数量を変更し、合計金額が変更されるか確認してみましょう！
See the Pen getElementById_02 by miyajima yuya (@pikawaka) on CodePen.
注意点
idが重複している場合
getElementById()メソッドを使用する際には、HTMLの中でidの値が重複していないことを確認する必要があります。もともとHTML仕様では、idは文書内で一意である必要があります。もしidが重複していてもエラーとはならず、getElementById()メソッドは最初に見つかった要素のみを返します。そのため、万が一重複したidが存在すると意図しない要素を取得してしまうため、注意しましょう。
1
2
3
<div id="example">最初の要素</div>
<div id="example">二番目の要素</div>
1
2
3
4
5
const element = document.getElementById("example");
console.log(element)
// 出力：最初の要素のみ取得
// <div id="example">最初の要素</div>
idが存在しない場合
getElementById()メソッドの引数にHTML文書内に存在しないidを渡してしまうと要素を探し出せず、結果としてnullが返ります。そのため、取得した要素に対して何かしらの操作を行おうとした際にエラーが発生してしまう可能性があるので、注意しましょう。
1
2
3
<div id="example1">最初の要素</div>
<div id="example2">二番目の要素</div>
1
2
3
4
5
const element = document.getElementById("example");
console.log(element)
// 出力：idが存在しないためnullが返る
// null
この記事のまとめ
getElementById()メソッドはWebページから特定のidを持つ要素を取得するメソッドです。- idはHTML文書の中で一意なため、特定の要素を取得するのに便利です。
- 存在しないidを指定すると要素が取得できないので注意しましょう。
