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

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

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

 

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

 

 

HTMLの要素とは

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

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

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

 

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

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

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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では、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

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