JavaScriptでgetElementByIdを使う方法!HTML要素を取得する

初心者向けにJavaScriptでgetElementByIdの使い方について解説しています。JavaScriptの一番基本になるメソッドでいくつかサンプルプログラムを書いています。基本的な使い方を理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

この記事では、getElementByIdを使う方法について解説しています。HTML要素を取得する上で必要な知識なので、使い方を知っておくと良いでしょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

getElementByIdとは

getElementByIdとは、指定したid値を持つ要素をElementオブジェクトとして返すメソッドです。

HTMLタグの中から指定したidを取得して何らかの処理をしたい場合などに使用されます。

 

getElementByIdの書き方

getElementByIdで要素を取得するには以下のように記述します。

document.getElementById(id)

idにはHTMLに記述した取得したいid要素を記述します。同一idはHTML内において複数使用することは出来ないので、一意なid値である必要があります。

HTMLに複数idが存在する場合は、最初にマッチしたid要素のみを返します。指定したidが存在しなかった場合はnullを返します。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

id textに文字を表示する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id textに文字を表示する</title>
  </head>
  <body>
    <p id="text"></p>
    <script>
      document.getElementById("text").innerHTML = "こんにちは!";
    </script>
  </body>
</html>

 

id text2に連結した文字を表示する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id text2に連結した文字を表示する</title>
  </head>
  <body>
    <p id="text2"></p>
    <script>
      document.getElementById("text2").innerHTML = "a" + "b";
    </script>
  </body>
</html>

 

id text3に計算結果を表示する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id text3に計算結果を表示する</title>
  </head>
  <body>
    <p id="text3"></p>
    <script>
      document.getElementById("text3").innerHTML = 3 + 5;
    </script>
  </body>
</html>

 

まとめ

DOM(Document Object Model)においてgetElementByIdを利用するケースは多いので、ぜひマスターしましょう。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。