どうも、チャーさんです。
あなたはgetElementByIdの意味はなんだろう？
と思ってませんか？
この記事では、getElementByIdの意味や、
使い道、また使い方も説明しております。
なので、この記事を読めば、
あなたのgetElementByIdへの疑問は解消されるでしょう。
なので、あなたがgetElementByIdの意味を、
知りたいならばこのまま下にスクロールして読んでみてください。
スポンサードサーチ
目次
getElementByIdの意味は？
getElementByIdの意味ですが、
これは、指定したidがついてるHTML要素を、
取得するという意味です。
で上記をやる理由ですが、
なぜ取得する必要があるかというと、
DOMでは要素を取得したのちに、
色々操作を加えることができます。
（文字やデザインを動的に書き換えたり等)
ですが、DOMを使い動的に変化を加えるには、
まず、変化させたい対象物になる要素を取得する必要が、
あるのです。
とはいえ、要素の取得方法には、
いくつか種類がありまして、
getElementByIdというのは、取得方法の１つです。
特徴としては、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ページ上での表現力が増しますので、
あなたのプログラミングスキルアップに繋がりますよ。
それでは、読んでもらってありがとうございました。
チャーさん
