【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

JavaScript

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで指定したidの要素を取得するgetElementByIdメソッドgetElementByIdメソッドについて

  • getElementByIdメソッドとは
  • getElementByIdメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

getElementByIdメソッドとは

getElementByIdメソッドとは、引数に指定されたidと一致する要素のElementオブジェクトを返すメソッドです。
もし指定したidの要素が存在しなかった場合、nullを返します。

使い方サンプルは下記になります。

では、次の章で実際に使ってみます。

getElementByIdメソッドを解説するプログラムの概要

getElementByIdメソッドを解説するプログラムでは、

  • HTML
  • JavaScript

の2ファイルを使います。

HTMLの1要素をgetElementByIdメソッドを使って取得して、文字列を設定します。

フォルダ構成は以下のようになっています。
getElementByIdメソッドを解説するフォルダ構成

HTMLサンプルプログラム

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

JavaScriptサンプルプログラム

innerHTMLプロパティとは、HTML要素の取得や書き換えができるプロパティです。
詳しくはこちらの記事をご参考ください。

実行結果

作成したHTMLをブラウザで開きます。

getElementByIdメソッドの実行結果をブラウザで表示
指定したidを取得して文字列が設定できていることが確認できました。

まとめ:getElementByIdメソッドを使ってみよう!

以上がJavaScriptのgetElementByIdメソッドについての解説でした。

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました