概要: このチュートリアルでは、JavaScriptのgetElementById()を使用して、IDで要素を選択する方法を学びます。
JavaScript getElementById() メソッドの紹介
getElementById()は、documentオブジェクトのメソッドであり、指定された文字列と一致するIDを持つHTML要素を表すElementオブジェクトを返します。
getElementById()メソッドの構文は次のとおりです。
const element = document.getElementById(id);Code language: JavaScript (javascript)この構文では、
idは、選択する要素のIDを表す文字列です。
このメソッドは、IDの大文字と小文字を区別することに注意してください。たとえば、'root'と'Root'は異なります。
ドキュメントに指定されたIDを持つ要素がない場合、getElementById()メソッドはnullを返します。
querySelector()メソッドとは異なり、getElementById()は他のDOM要素ではなく、documentオブジェクトでのみ使用できます。
通常、idはHTMLドキュメント内で一意です。ただし、HTMLは寛容な言語です。整形式ではないHTMLには、同じIDを持つ複数の要素が存在する場合があります。この場合、getElementById()メソッドは最初に見つかった要素を返します。
JavaScript getElementById() メソッドの例
2つのp要素を持つドキュメントがあるとします。
<p id="first">Hi, There!</p>
<p>JavaScript is fun.</p>Code language: HTML, XML (xml)次のコードは、IDがfirstの要素を取得する方法を示しています。
const elem = document.getElementById("first");Code language: JavaScript (javascript)次のデモをご覧ください。
要素を選択した後、スタイルを適用したり、属性を操作したり、親や子要素に移動したりできます。
まとめ
document.getElementById()は、idで指定されたDOM要素を返します。一致する要素が見つからない場合は、nullを返します。- 複数の要素が同じ
idを持っている場合（無効ですが）、getElementById()は最初に見つかった要素を返します。
クイズ
このチュートリアルは役に立ちましたか？
