Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

javascript

getElementByIdの意味や使い方をわかりやすく紹介します。

投稿日:

Pocket

 

うも、チャーさんです。

 

あなたはgetElementByIdの意味はなんだろう?

と思ってませんか?

 

この記事では、getElementByIdの意味や、

使い道、また使い方も説明しております。

 

 

なので、この記事を読めば、

あなたのgetElementByIdへの疑問は解消されるでしょう。

 

なので、あなたがgetElementByIdの意味を、

知りたいならばこのまま下にスクロールして読んでみてください。

 

 

スポンサードサーチ

getElementByIdの意味は?

 

getElementByIdの意味ですが、

これは、指定したidがついてるHTML要素を、

取得するという意味です。

 

 

で上記をやる理由ですが、

なぜ取得する必要があるかというと、

 

DOMでは要素を取得したのちに、

色々操作を加えることができます。

(文字やデザインを動的に書き換えたり等)

 

ですが、DOMを使い動的に変化を加えるには、

まず、変化させたい対象物になる要素を取得する必要が、

あるのです。

 

 

とはいえ、要素の取得方法には、

いくつか種類がありまして、

getElementByIdというのは、取得方法の1つです。

 

特徴としては、idを指定して取得できるので、

要素の取得が簡単です。

 

 

ということで、具体例を見せましょう。

まず以下の画像では、

要素を取得しようとしてます。

 

ですがまだ何も取得できてません。

 

 

 

 

しかし上記の、getElementByIdを実行すると、

 

 

 

はい、右のコンソール画面に、

div id “here”ってのが出てきて、

html要素を取得できましたね。

 

こんな風に、getElementByIdを使えば、

要素を取得できるわけです。

 

 

スポンサードサーチ

getElementByIdの使い道は?

 

で、じゃあ要素を取得したからなんなの?

って疑問に思うと思いますが、

先ほどお話ししたように、DOMで動的に変化させれます。

 

例えば、

これはデベロッパーツールのコンソールから、

アクセスしてる画像です。

 

 

 

 

そして、以下の画像ではdiv要素に書いてある、

ここを取得しますという文字を、

javascriptを使って書き換えています。

 

 

 

なのでこんな風にgetElementByIdを使えば、

こんな風に要素にアクセスして、変化を起こすことが、

できるわけですね。

 

また、これは直接書き換えてますが、

javascriptにあるeventListenerなどを使えば、

ボタンをクリックした時に文字を変えるなど動的な変化ができます。

 

 

そして上記のようなことが、

getElementByIdで要素を取得すれば、

できるようになるので、覚えておくとあなたの役に立ちます。

 

 

スポンサードサーチ

getElementByIdの使い方は?

 

で、これのやり方ですが、

構文があるのでそれをそのまま書きましょう。

 

 

どの要素を取得するかクリアにしましょう

 

まずは取得したい要素を確認しましょう。

 

でないと、何を取得したらいいかわからなくなります。

なのでまずはそこをハッキリさせましょう。

 

 

要素のidを確認しましょう

 

次にその要素にidが振ってあるかを確認しましょう。

理由は、getElementByIdでは、idが合致する要素しか、

取得できないからです。

 

なのでidが振ってあるかはちゃんと確認しましょう。

 

 

getElementByIdの構文を書きましょう

 

で次に、getElementByIdの構文をファイルに書きましょう。

構文は以下になります。

 

document.getElementByID(‘ここにid名を書く’);

 

で、このここにid名を書くのとこに、

要素に振ってあるid名を書きましょう。

 

 

getElementByIdで取得する際の例

 

例を出すと、以下の感じです。

 

<div id=”kore”></div>

 

<script>

document.getElementById(‘kore’);

</script>

 

このようにid名を合致させると、

getElementByIdで要素を取得できます。

 

 

取得後は行いたい操作を行いましょう

 

要素を取得したあとは、

あなたの行いたい操作に合わせて、

構文を書きましょう。

 

例えば、取得した要素内の文章を変えたい場合は、

textContentというのを使えば書き換えれます。

 

 

<div id=”kore”>この文章変わりますよあとで</div>

 

<script>

document.getElementById(‘kore’).textContent =”文章をこれに変更”;

</script>

 

のようなソースコードを書いた場合、

この文章変わりますよあとでの部分が、

文章をこれに変更、という文章に変わりそのように表示されます。

 

 

上記は一例でしたが、

取得したあとは、あなたが操作したい内容に合わせて、

コードを書いていきましょう。

 

 

スポンサードサーチ

まとめ

 

getElementByIdの意味ですが、

これは指定したidがついた要素を取得する、

という意味になります。

 

そして取得した要素は、DOMの機能で、

色々動的に変化させることができます。

 

 

なので上記を使いこなせるようになれば、

あなたはよりwebページ上での表現力が増しますので、

あなたのプログラミングスキルアップに繋がりますよ。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-javascript

スポンサードサーチ

関連記事

no image

javascriptでcssを操作する手順と方法

どうも、チャーさんです。   あなたはjavascriptでcssを操作したい。 そう思っていませんか?   この記事では、javascriptを使って、 cssを操作する方法を書 …

no image

htmlの中にjavascriptを書いて使う方法

どうも、チャーさんです。   あなたはhtmlの中にjavascriptを書いて、 使いたいと思っていませんか?   この記事では、htmlの中にjavascriptを 書いて、j …

no image

javascriptでボタンをクリックしたらアラートが表示されるコード

どうも、チャーさんです。   あなたはjavascriptでボタンをクリックしたら、 アラートが表示される方法とコードを、 探していますか?     この記事では、ボタン …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

javascriptでボタンを押したら色が変更できる方法「コード例つき」

どうも、チャーさんです。   あなたはjavascriptで、ボタンを押したら、 色が変更できる方法を探していませんか?   この記事では、ボタンクリックで、 色を変更する方法、コ …

no image

javascriptでalert(アラート)を表示させる方法

どうも、チャーさんです。   あなたは、javascriptでalert(アラート)を、 表示させたいと思っていませんか?   この記事では、javascriptを使って、 ale …

no image

javascriptのエラーの確認方法「3秒で確認できます」

どうも、チャーさんです。   あなたはjavascriptのエラーの確認方法を、 知りたいと思っていませんか?     この記事では、javascriptのエラーを、 確 …

no image

javascriptでランダムに画像を表示する方法「コードコピペOKです」

どうも、チャーさんです。   あなたはjavascriptでランダムに画像を、 表示させたいですか?     この記事ではjavascriptでランダムに画像を、 表示さ …

no image

javascriptをコンソールで実行する方法

どうも、チャーさんです。   あなたはjavascriptを今すぐに実行できる、 そんな方法を探していますか?   コンソールという機能を使えばそれは、 可能でして、この記事ではコ …

no image

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

どうも、チャーさんです。   あなたはjavascriptでランダムな整数を、 表示したいですか?   この記事では、javascriptでランダムな整数を、 表示するコードと、そ …

no image

二重ループをjavascriptでする方法

  どうも、チャーさん(@chaa___san)です。   あなたはjavascriptで二重ループを するにはどう書けばいいのか、 と思っていませんか?   この記事で …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。