HTML DOM getElementById()メソッドの使い方を徹底解説
HTML DOMのgetElementById()メソッドは、idを引数として渡すことで、そのidに一致する要素を取得して返すためのメソッドです。要素を取得して後から操作・加工するための最も基本的かつ手軽な方法の一つであり、JavaScriptによるDOM操作の中でも特に頻繁に利用されています。なお、指定したidがドキュメント内に存在しない場合はNULLが返される点に注意してください。
構文
getElementById()メソッドの基本構文は以下のとおりです。
document.getElementById(elementID)
引数には、取得したい要素に設定されているid属性の値を文字列で指定します。
使用例
ここで、getElementById()メソッドの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}
</script>
</head>
<body>
<h1>getElementById() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html>
出力結果
上記のコードを実行すると、次のような画面が表示されます。
そして、「CHANGE」ボタンをクリックすると、リンクのスタイルが変化します。
コードの解説
上記の例では、以下のような処理が行われています。
まず、id「LINK1」を持ち、href属性に「https://www.google.com」が設定されたアンカー（<a>）要素を作成しています。
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
次に、ユーザーがクリックするとchangeLink()関数を実行する「CHANGE」ボタンを配置しています。
<button onclick="changeLink()">CHANGE</button>
changeLink()関数の内部では、documentオブジェクトのgetElementById()メソッドに対象となる<a>要素のidを引数として渡し、該当する要素を取得します。取得された要素は変数lに代入されます。その後、styleオブジェクトを通じて、アンカータグのcolorプロパティとfontSizeプロパティに新しい値を設定することで、リンクの文字色とフォントサイズが動的に変更されます。
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}
補足ポイント
getElementById()を使用する際は、以下の点に留意するとよいでしょう。
- HTMLドキュメント内でidは一意である必要があります。同じidが複数存在する場合、最初に見つかった要素のみが返されます。
- idの指定は大文字・小文字が区別されるため、「LINK1」と「link1」は別のidとして扱われます。
- スクリプト実行時点で対象の要素がまだ読み込まれていないとNULLが返されるため、bodyの末尾でスクリプトを読み込むか、DOMContentLoadedイベントなどを活用するのが安全です。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや