TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのgetElementsByNameメソッドの使い方を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptのgetElementsByNameメソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのgetElementsByNameメソッドの使い方について現役エンジニアが解説しています。getElementByNameメソッドは指定したname属性のNodeListを取得可能です。getElementByIdと違い、返り値はNodeListとなります。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptのgetElementsByNameメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptのgetElementsByNameメソッドの使い方について詳しく説明していくね！

大石ゆかり

お願いします！

 

getElementsByNameメソッドとは

getElementsByNameメソッドは、指定したname属性を持つ HTML要素(NodeList)を取得するメソッドです。

例えば以下のような HTML に対して、name属性がlinkの要素をまとめて取得することが可能です。

<a href="#" name="link">My Link</a>
<img src="/path/to/image" name="thumbnail">
<input type="text" name="link">
<!-- a, input をまとめて取得できる -->

 

getElementsByNameメソッドの使い方

getElementsByName(name)メソッドの使い方は、取得したいname属性の値を引数として指定することで使用可能です。

先ほどの例では、name=”link”を持つ要素を取得することになるため、引数として”link”を指定しましょう。

const elements = document.getElementsByName('link');
console.log(elements);
// => NodeList(2) [a, input]

 

[PR] コーディングで副業する方法とは

getElementByIdメソッドとの違い

類似メソッドとしてgetElementByIdメソッドがあります。

getElementByIdは取得したい要素をIDで指定するメソッドです。

戻り値もNodeListではなく、単一のElementとなります。

// <h1 id="title">My Title</h1>を取得する場合
const element = document.getElementById('title');
console.log(element);
// => <h1 id="title">My Title</h1>

 

getElementsByNameメソッドの注意点

IEやEdgeでは、動作が異なる点には注意が必要です。

  • IE10より以前では、id属性も対象になります
  • IEでは、name属性を許容しないspanなどの要素は対象外になります
  • IE, Edge では NodeListではなくHTMLCollection が返ってきます

getElementsByName メソッドを利用する場合は、影響を受けないために注意が必要でしょう。

執筆してくれたメンター

メンター稲員さん

フリーランスエンジニア。

大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。

おうち大好きマンです。

 

大石ゆかり

JavaScriptのgetElementsByNameメソッドの使い方の内容がよくわかったので良かったです！

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptの関数スコープについて現役エンジニアが解説【初心者向け】

JavaScriptの関数スコープについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。  ...
JavaScript

JavaScriptでselectオブジェクトの値（value）を取得する方法を現役エンジニアが解説【初心者向

JavaScriptでselectオブジェクトの値（value）を取得する方法についてテックアカデミーのメンター（現役エンジニア）が解説します。 実際のコ...
JavaScript

issetをJavaScriptで利用する方法について現役エンジニアが解説【初心者向け】

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

JavaScriptでsplitを使って文字列を分割する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでsplitを使う方法について解説します。 また、入...
JavaScript

JavaScriptの配列(array)に利用するpopメソッドについて現役エンジニアが解説【初心者向け】

JavaScriptの配列(array)に利用するpopメソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptでtimestampを日時に変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptでtimestampを日時に変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説し...
JavaScript

あわせてよく読まれている記事

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次getElementsByNameメソッドとはgetElementsByNameメソッドの使い方getElementByIdメソッドとの違いgetElementsByNameメソッドの注意点執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =
JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次getElementsByNameメソッドとはgetElementsByNameメソッドの使い方getElementByIdメソッドとの違いgetElementsByNameメソッドの注意点執筆してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] コーディングで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

JavaScriptでDOMを操作する方法【初心者向け】

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次getElementsByNameメソッドとはgetElementsByNameメソッドの使い方getElementByIdメソッドとの違いgetElementsByNameメソッドの注意点執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 （動画は2つに分かれています） テキストと動画で、解説に少し違う部分があります。 テキストは、JavaScriptの「ES6(ES2015)」というバージョンに基づいて解説しています。 動画は、その1つ前の「ES5」というバージョンに基づいて解説しています。   DOMとは JavaScriptでは、表示されたWebサイトを動的に書き換えることができるというのが大きな特徴です。 そして、その特徴を支えているのがDOM（Document Object Model）です。   大石ゆかり 田島メンター！DOMというのは何でしょうか？ 田島悠介 簡単に言うと、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりする仕組みのことなんだ。 大石ゆかり HTMLをJavaScriptで操作できるってことですか？ 田島悠介 その通り！実際にDOMがどんなものなのか詳しく解説していくね。   Windowオブジェクト DOMを理解するには、まずWindowオブジェクトを知る必要があります。 Windowオブジェクトは、ブラウザが持っている情報をそのまま持っています。 ブラウザのコンソールに以下のように記述すると、Windowオブジェクトの中身が見られます。 console.log(window); Windowオブジェクトが持っている、プロパティやメソッドがずらりと出てきます。 開発でよく使われるWindowオブジェクトのプロパティ / メソッドには、以下のようなものがあります。 location : 現在開いているページのURLに関する情報が格納されるプロパティです。 innerWidth / innerHeight : ブラウザ画面の幅や高さの情報が格納されるプロパティです。 alert : アラートを表示するためのメソッドです。 setTimeout / setInterval : 一定時間後や一定時間おきに処理を行うためのメソッドです。 また、Windowオブジェクトのプロパティ / メソッドのアクセスの際には、windowの記述を省略できるという特性があります。 console.log(window.location); console.log(location); //どちらも現在のURLの情報が入ったオブジェクトが表示される！ まとめると、今開いているタブが持っている情報をすべて格納しているのがWindowオブジェクトということです。   Documentオブジェクト DocumentオブジェクトはWindowオブジェクトのプロパティの1つで、こちらも現在のサイトに関する情報を保持しています。 Windowオブジェクトがブラウザそのものに関する情報だったのに対し、Documentオブジェクトはブラウザで表示しているHTMLに関する情報と言えるでしょう。 中身をみていくと、いろいろプロパティがありますね。 たとえば、bodyはHTMLのbodyタグの中身をあらわしています。   本題のDOMに戻ります。 名前の通り、DOM（Document Object Model）ではDocumentオブジェクトを通して、個々の要素を取得・操作できるのです。 次の章からは、DOMの仕組みやDOMの操作方法を具体的に見ていきましょう。   DOMのツリー構造 それでは、DOMの操作の仕方について見ていきましょう。 個別の操作方法の前に、「ツリー構造」と言われるDOMの構造について見ていきます。 ツリー構造は簡単に言えば、1つの親要素の下に子要素があって、さらにその子要素がそれぞれ親になり、またその下に子要素を持つ……というぶら下がり構造を意味します。   実際のHTMLのコードも、ツリー構造として捉えられます。 <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <h1>見出し</h1> <div> <p>テキスト1</p>
JavaScript

JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 目次getElementsByNameメソッドとはgetElementsByNameメソッドの使い方getElementByIdメソッドとの違いgetElementsByNameメソッドの注意点執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   確認ダイアログとは Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあります。 これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertやpromptなどと合わせ是非作り方を覚えましょう。   大石ゆかり 田島メンター！前にalertメソッドを使ってダイアログを表示させましたが、確認ダイアログを表示させる関数もあるんですか？ 田島悠介 alertメソッドとほぼ同じなんだけど、確認ダイアログの場合、ユーザーが選択したボタンの情報を受け取れるんだよね。OKとかキャンセルとかのボタンの結果なんだけど。 大石ゆかり じゃあ、結果によって表示や処理を変えるといったことができそうですね。 田島悠介 そうそう。それが違いかな。さっそく確認ダイアログを表示させてみよう！   confirmを使って確認ダイアログを表示させる JavaScriptで確認ダイアログを表示させるときは、confirmメソッドを使います。 構文 OKボタンが押されたかの真偽値 = window.confirm('メッセージの文字列'); 引数に確認ダイアログに表示するメッセージを文字列で指定します。 戻り値は「OK」ボタンが押されたらtrue、「キャンセル」ボタンが押されたらfalseの値が真偽値で返されます。 ※confirmメソッドはWindowオブジェクトのメソッドです。本当なら「window.confirm」と呼び出す必要がありますが、「window」は省略できるので「confirm」だけで呼び出せます。 ※オブジェクトとは関連のある値を記憶する変数（プロパティ）や関数のように呼び出す処理（メソッド）をグループにしたものです。 真偽値とは？ JavaScriptの値の型のひとつに真偽値があります。 真偽値は真（true、トゥルー）と偽（false、フォールス）の2つの値をとります。 trueは条件が成立している、または有効なものを表しています。 falseは条件が成立していない、または無効なものを表しています。 if文の条件には真偽値が使われるので、「if(条件式)」だと条件式がtrueの場合に実行される処理を指定します。 ※真偽値はシングルクォーテーションなどで囲みません。’true’だと文字列になります。 ソースコード では、ためしに「入力に間違いはないですか？」という文字列を表示させてみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> </head> <body> <script> const answer = confirm('入力に間違いはないですか？'); document.write(answer); </script> </body> </html> ※「const」は再代入できない固定された値として使える変数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。 表示結果 PC画面上でほかのウィンドウよりも手前にダイアログボックスがポップアップ表示されます。   さらに、[OK]を押すとダイアログボックスが消え、ブラウザに「true」と表示されました。   ちなみに、[キャンセル]を押すと「false」と表示されます。 まとめ JavaScriptで確認ダイアログを表示するにはconfirmメソッドを使います。   [PR] コーディングで副業する方法とは確認ダイアログ内のテキストを改行する 確認ダイアログに表示するテキストを改行するにはエスケープシーケンス「n」を使います。 たとえば 「confirm(‘こんにちは、n山田さん’);」とすると、「こんにちは、」で改行されて、その下の行に「山田さん」が続きます。 エスケープシーケンスでの改行は確認ダイアログを表示するconfirmメソッドはもちろん、アラートを表示するalertでも使えます。 エスケープシーケンスとは？ エスケープシーケンス（エスケープ文字）とは、改行のような特殊な文字を表現する方法です。 エスケープシーケンスは「」（バックスラッシュ。機種によっては¥記号で表示）と特定の文字を組み合わせて特殊な意味を持たせます。 以下の表はエスケープシーケンスの例です。 エスケープシーケンス 意味 n 改行 ‘ シングルクォーテーション “ ダブルクォーテーション t タブ バックスラッシュ（または¥）を表示 ※Windowsなど機種によってはエスケープシーケンスを「」ではなく「¥」記号で表現します。バックスラッシュの入力方法について詳しくは解説記事にある「バックスラッシュの入力方法について」の見出しをご覧ください。 ソースコード [件名]ボックスが未入力の状態で[確認]ボタンを押すと「以下の項目が未入力です。」で改行されて「件名：」がアラートで表示されます。 [件名]ボックスに文字が入力されている状態で[確認]ボタンを押すと「以下の件名にしますか？」で改行されて入力された内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>confirmを使った改行 |
JavaScript

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。   目次 linkタグとscriptタグ linkタグの使い方 scriptタグ   【動画での解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。 また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。   一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。 しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。 つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。   さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。 多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。 例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。   その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。   linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。   [PR] コーディングで副業する方法とはlinkタグの使い方 ここからは具体的な使い方について例をみていきます。 まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。 h1  { font-size: 60px;  color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。   そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！   続いて、ファビコンの例も見てみましょう。 ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。   実際のWebサイトでは下のように設定されています。   スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。   大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？ 田島悠介 たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。 大石ゆかり タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？ 田島悠介 タグに直接適用したCSSの方が優先されるよ。 大石ゆかり OK！linkタグ覚えました！   scriptタグ 続いてscriptタグです。 Webページには2種類のページがあります。 １つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。 動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。 このJavaScriptを記述する際に利用するタグが、scriptタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。 このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。   今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。 「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。 外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？ 田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。 大石ゆかり プログラミング言語って何だか難しそう。 田島悠介 コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

JavaScriptでHTMLの要素を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでHTMLの要素を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   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サービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのgetElementsByNameメソッドの使い方を現役エンジニアが解説【初心者向け】