id属性の値を指定して要素ノードを取得(getElementById)

Document オブジェクトの getElementById メソッドは、要素の id 属性の値を指定して一致する Element オブジェクトを取得します。ここでは getElementById メソッドの使い方について解説します。

(2022 年 04 月 10 日公開 / 2022 年 04 月 10 日更新)

getElementByIdの書式と使い方

Document オブジェクトの getElementById メソッドは id 属性の値を指定して要素ノードを取得します。書式は次の通りです。

document.getElementById(id)

引数には id 属性の値を DOMString オブジェクトで指定します(例えば 'example' など)。戻り値は Element オブジェクトです。見つからなかった場合は null が返されます。

例えば id 属性の値として'example' が設定された要素ノードを取得するには次のように記述します。

let element = document.getElementById('example');

id 属性の値は HTML ページ内で複数の要素に同じ値を付けることができないので、指定した id 属性の値が一致する要素ノードは 通常一つだけです。もし同じ id 属性の値が複数の要素ノードに付けられていた場合は最初の要素ノードを取得します。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementByIdのサンプル</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<p id="place">港区南青山</p>
<p id="shopname">リストランテ南青山</p>

<p>美味しかったです。</p>

<button onClick="getElement();">要素を取得</button>

<script>
function getElement(){
    let element = document.getElementById('place');
    console.log('場所: ' + element.textContent);

    element = document.getElementById('shopname');
    console.log('店名: ' + element.textContent);
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 HTML ページに含まれる id 属性が指定した値の要素ノードを取得し、要素ノードに含まれるテキストを取得してコンソールに表示します。

getElementByIdの書式と使い方(1)

-- --

getElementById メソッドの使い方について解説しました。

( Written by Tatsuo Ikura )

Twitterでシェアする
広告
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。