JavaScriptでHTMLの要素を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでHTMLの要素を取得する方法について解説しています。document.getElementById、document.getElementsByName、document.getElementsByClassNameとquerySelectorそれぞれの機能と使い方の例を見ていきましょう。

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

JavaScriptでHTMLの要素を取得する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでHTMLの要素を取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの要素とは

HTMLの要素とは、タグで囲まれた1単位を指し示します。例えば、以下のコードはHTMLの1要素です。

<input type="text" name="tbox1" id="sampleTbox" class="font-tbox">

このinput要素により、テキストボックスを表示することができます。

 

JavaScriptでHTMLの要素を取得する方法

JavaScriptからHTMLの部品を操作するためには、まずHTMLから要素を探し出して部品情報を取得する必要があります。その際のキーとなるのが、HTMLの各要素が持つidやname属性の値、要素に付与されたclass名です。

これからご紹介するJavaScriptの特定メソッドの実行により、HTML上からキー値を検索して、HTMLの要素情報を取得することができます。

 

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

document.getElementByIdとは

HTML要素が持つid値をキーとして、HTML要素を取得することができます。

書式

document.getElementById("id値");

テキストボックス内のテキストを取得する例

document.getElementById("sampleTbox").value;

 

document.getElementsByNameとは

HTML要素が持つname属性の値をキーとして、HTML要素を複数取得します。「Elements」と複数形でメソッド名を記載する点に気を付けてください。

書式

document.getElementsByName("name属性の値");

テキストボックス内のテキストを取得する例

document.getElementsByName("tbox1")[0].value;

複数取得した要素は配列に格納された状態で取得されるため、最初の1つを指定するために [0] を付与しています。

 

document.getElementsByClassNameとは

HTML要素が持つclass属性の値をキーとして、HTML要素を複数取得します。「Elements」と複数形でメソッド名を記載する点に気を付けてください。

書式

document.getElementsByClassName("class名");

テキストボックス内のテキストを取得する例

document.getElementsByClassName("font-tbox")[0].value;

複数取得した要素は配列に格納された状態で取得されるため、最初の1つを指定するために [0] を付与しています。

 

querySelectorとは

こちらはCSSのクラス定義時に指定するセレクタ記法を用いてHTML要素を一つだけ取得するためのメソッドです。jQueryをご存知の方は、jQueryと同じキー値の指定方式と考えてください。

書式

document.querySelector("CSSセレクタ記法による要素指定");

テキストボックス内のテキストを取得する例

// idをキーにして取得する場合
document.querySelector("#sampleTbox").value;
// class名をキーにして取得する場合
document.querySelector(".font-tbox").value;

このメソッドは複数候補が見つかった場合、最初の1つだけ取得します。

 

まとめ

javascriptから、いろいろな手段でHTML要素を取得できることがわかりました。HTMLコードが持つキー文字列に応じて使うメソッドも異なりますので、それぞれの特性を理解して使いこなしましょう。

 

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。