Document.getElementById メソッド

本ページには広告が含まれています。

id属性が指定された文字列に一致する要素を表すElement オブジェクト (DOM)を返します。

構文
  1. Element = Document.getElementById( id )
引数
id (String)必須
探す要素のid
戻り値
指定されたid属性を持つHTML要素を表すElement オブジェクト (DOM)、文書内に一致する要素がなければNULLを返します。

getElementByIdとは

getElementById メソッドは、英語の意味を直訳するとget(取得する)Element(要素)ById(id属性によって)となり、これはid属性によって要素を取得するという意味になります。このメソッドは、引数に指定されたidに一致するDOM要素を取得します。

同じ名前のid属性はHTML内に基本的に一つしかないので、getElementsByIdと複数形にはならず単数形のgetElementByIdとなります。

id属性からDOM要素を取得するメソッドはquerySelector メソッドgetElementById メソッドがありますが、要素の取得は汎用性の高いquerySelector メソッドよりもid属性に特化しているgetElementById メソッドの方が速いとされています。しかし最近のブラウザの処理速度は向上していてquerySelector メソッドもあまり変わらない速度で取得することができるため、どちらを使うかはケースバイケースです。

また、getElementById メソッドは大文字・小文字を含め完全に一致する要素を取得するため、部分一致などの曖昧検索を行いたい場合はDocument.prepend メソッド (DOM)もしくはDocument.querySelectorAll メソッドを使います。

使い方

指定したid属性を持つタグのテキストを取得

id属性にcontentを持つ要素のテキストを取得します。

HTML
UWSC
結果
プレーンテキスト

指定したid属性を持つタグのテキストを書き換える

id属性にcontentを持つ要素のテキストをおはよう!に書き換えます。

HTML
UWSC
結果
HTML

指定したid属性を持つタグに属性を追加

id属性にcontentを持つ要素にname属性を追加し、その値としてgreetingを設定します。

HTML
UWSC
結果
HTML

指定したid属性を持つ要素をクリック

指定したid属性を持つ要素をクリックします。

HTML
UWSC

同じ名前のid属性を持つ要素が複数ある場合

同じ名前のid属性は一つのHTMLファイルに一つしか使用できませんが、名前が重複していてもエラーとはなりません。

例えば以下のように名前がcontentのid属性が複数存在する場合、Element.getElementById (DOM)で取得できる要素は1つ目の要素のみです。

HTML
UWSC
結果
プレーンテキスト

2つ目以降の要素を取得したい場合は、Document.querySelectorAll メソッドを使うことで取得することができます。

HTML
UWSC
結果
プレーンテキスト

入れ子要素の取得

Document.getElementById メソッド (DOM)は指定されたid属性を持つ要素を取得することはできますが、その要素の子要素に直接アクセスすることはできません。入れ子になっている要素を取得するには、まずDocument.getElementById メソッド (DOM)で親要素を取得し、取得した親要素に対してElement.UBound (DOM)Element.getElementById (DOM)などのメソッドを使い取得したい要素を絞っていきます。

HTML

以下はまずHTML全体からid属性がcurryの要素を取得しElementに代入します。取得したElementのHTMLはPRINT Element.outerHTMLで確認することができます。その後さらにliのタグに一致する要素のみを取得しElementsに代入します。

UWSC
結果
プレーンテキスト

仮にDocument.getElementById メソッド (DOM)を使わずDocument.getElementById メソッドでのみ要素を取得するとHTML内にあるすべてのliタグを取得することになります。

UWSC
結果
プレーンテキスト

要素の有無をチェック

Document.getElementById メソッド (DOM)は要素が見つからない場合NULLを返すので、戻り値がNULLかどうかで要素が見つかったかどうかを判断できます。

以下はid属性がcontentの要素を探し、取得できた場合は要素が見つかりました、取得できなかった場合は要素が見つかりませんでしたと出力します。

UWSC

プログラム実行例

Yahoo!ファイナンスから米ドル・ユーロ・豪ドルのレートを取得

UWSC
使用関数

Yahoo! JAPANトップページのメニューを取得

UWSC

[syntaxHighlight language="HTML"]

  • ショッピング
  • PayPayモール
  • ヤフオク!
  • PayPayフリマ
  • ZOZOTOWN
  • LOHACO
  • トラベル
  • 一休.com
  • 一休.comレストラン
  • ニュース
  • 天気・災害
  • スポーツナビ
  • ファイナンス
  • テレビ
  • 映画
  • GYAO!
  • ゲーム
  • Yahoo!モバゲー
  • ebookjapan
  • 占い
  • 地図
  • 路線情報
  • Retty
  • クラシル
  • 不動産
  • 自動車
  • TRILL
  • パートナー

[/syntaxHighlight]

結果
プレーンテキスト
使用関数

気象庁のホームページから一月分の気温を取得しExcelでグラフを作成

UWSC
結果
使用関数

歌ネットから歌詞を取得してテキストファイルに保存

UWSC
使用関数