id属性が指定された文字列に一致する要素を表すElement オブジェクト (DOM)を返します。
- 構文
- 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を持つ要素のテキストを取得します。
- 結果
指定したid属性を持つタグのテキストを書き換える
id属性にcontentを持つ要素のテキストをおはよう!に書き換えます。
- 結果
指定したid属性を持つタグに属性を追加
id属性にcontentを持つ要素にname属性を追加し、その値としてgreetingを設定します。
- 結果
指定したid属性を持つ要素をクリック
指定したid属性を持つ要素をクリックします。
同じ名前のid属性を持つ要素が複数ある場合
同じ名前のid属性は一つのHTMLファイルに一つしか使用できませんが、名前が重複していてもエラーとはなりません。
例えば以下のように名前がcontentのid属性が複数存在する場合、Element.getElementById (DOM)で取得できる要素は1つ目の要素のみです。
- 結果
2つ目以降の要素を取得したい場合は、Document.querySelectorAll メソッドを使うことで取得することができます。
- 結果
入れ子要素の取得
Document.getElementById メソッド (DOM)は指定されたid属性を持つ要素を取得することはできますが、その要素の子要素に直接アクセスすることはできません。入れ子になっている要素を取得するには、まずDocument.getElementById メソッド (DOM)で親要素を取得し、取得した親要素に対してElement.UBound (DOM)やElement.getElementById (DOM)などのメソッドを使い取得したい要素を絞っていきます。
以下はまずHTML全体からid属性がcurryの要素を取得しElementに代入します。取得したElementのHTMLはPRINT Element.outerHTMLで確認することができます。その後さらにliのタグに一致する要素のみを取得しElementsに代入します。
- 結果
仮にDocument.getElementById メソッド (DOM)を使わずDocument.getElementById メソッドでのみ要素を取得するとHTML内にあるすべてのliタグを取得することになります。
- 結果
要素の有無をチェック
Document.getElementById メソッド (DOM)は要素が見つからない場合NULLを返すので、戻り値がNULLかどうかで要素が見つかったかどうかを判断できます。
以下はid属性がcontentの要素を探し、取得できた場合は要素が見つかりました、取得できなかった場合は要素が見つかりませんでしたと出力します。
プログラム実行例
Yahoo!ファイナンスから米ドル・ユーロ・豪ドルのレートを取得
Yahoo! JAPANトップページのメニューを取得
[syntaxHighlight language="HTML"]
- ショッピング
- PayPayモール
- ヤフオク!
- PayPayフリマ
- ZOZOTOWN
- LOHACO
- トラベル
- 一休.com
- 一休.comレストラン
- ニュース
- 天気・災害
- スポーツナビ
- ファイナンス
- テレビ
- 映画
- GYAO!
- ゲーム
- Yahoo!モバゲー
- ebookjapan
- 占い
- 地図
- 路線情報
- Retty
- クラシル
- 不動産
- 自動車
- TRILL
- パートナー
[/syntaxHighlight]
気象庁のホームページから一月分の気温を取得しExcelでグラフを作成

