JavaScript　getElementByIdでHTML要素を取得する

JavaScriptのgetElementByIdとは、指定したid名を持つ要素をElementオブジェクトとして取得します。

ここでは getElementById メソッドを使って、HTMLファイルの要素を取得する方法を説明します。

getElementByIdを使う

getElementById メソッドの書式は次の通りです。

document.getElementById(id)

引数には id 属性の値を String オブジェクトで指定します。

戻り値は「Element 」オブジェクトです。

見つからなかった場合は null が返されます。

「document」はJavaScriptに用意されているオブジェクトの一つで、「getElementById」はdocumentオブジェクトのメソッドということになります。

例えば ‘test’ という名前のidを持った要素を取得するには次のように記述します。

var el = document.getElementById(‘test’);

「getElementById」の実行結果として、JavaScriptからDOMを操作するための「Element」オブジェクトが返り、それを変数「el」に代入しています。

id名は HTMLファイル内で重複してはいけないため、getElementByIdによって取得される要素は一つです。

もし同じ id 名が複数あった場合は、最初の値を取得します。

getElementByIdのサンプルコード

getElementById を使ったサンプルコードです。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>getElementByIdのサンプル</p>
<p id=”text1″>サンプル1</p>
<p id=”text2″>サンプル2</p>
<button onClick=”getElement();”>要素をGet</button>
<script>
function getElement(){
var el = document.getElementById(‘text1’);
console.log(‘text1の値: ‘ + el.textContent);

el = document.getElementById(‘text2’);
console.log(‘text2の値: ‘ + el.textContent);
}
</script>
</body>
</html>

■実行結果