今回は、JavaScriptでHTMLの要素を取得する基本的な方法である「getElementById」についてまとめました。
getElementByIdとは
～Crebitテキストより引用～
getElementByIdは「ページ全体の中から id が message の部分を探して、それに該当する要素を取得してね」という命令です。
getElementByIdはHTMLの中でidを指定して要素を取得するもので、以下のような書き方をします。
「document」という単語は「いま目の前にあるページ全体を指す」という意味です。
document.getElementById(‘要素のid名’);
<body>
<p id=”message”>くれび、今日も勉強やります！</p>
<script>
let msg = document.getElementById(“message”);
console.log(msg.textContent);
</script>
</body>
id属性とは
id属性は、HTMLの中にある1つの要素だけに付ける名前札のようなものです。
ページ内で同じidは1つしか使えないというHTMLのルールがあります。
<p id = “message”>くれび、今日も勉強やります！</p>
そのため、getElementById でidを指定すれば、該当する要素を1つだけ取得することとなります。
textContentとは
textContent は、要素の中のテキストを取得したり変更したりするものです。以下のように書きます。
<body>
<p id =”crebi”>くれびは今日もプログラミングを勉強する</p>
<script>
let crebi = document.getElementById(“crebi”);
console.log(crebi.textContent);
</script>
</body>
なお、getElementsByClassNameなど、複数の要素を取得する場合には、直接textContentを使うことができません。
要素を1つ取り出すことで使うことが可能となります。
<body>
<p class =”crebi”>くれびは今日もプログラミングを勉強する</p>
<p class =”crebi”>しかし、くれびはプログラミングの勉強をしなかった</p>
<p class =”crebi”>くれびは明日はプログラミングの勉強する予定だ</p>
<script>
let crebiList = document.getElementsByClassName(“crebi”);
console.log(crebiList.textContent);
//consoleではundefined（未定義）になります。
let crebiList = document.getElementsByClassName(“crebi”);
console.log(crebiList[2].textContent);
//こうすると、consoleに表示される！
インデックス番号2番目の要素を取り出しているので、くれびは明日はプログラミングの勉強する予定だとconsoleに表示されます。
</script>
</body>
まとめ
・getElementById は、idを指定して要素を1つだけ取得するもの
・id属性 はページ内で1つだけでなければならない
・textContent は要素の中のテキストを取得できる
・getElementsByClassName のような要素の集合では、インデックスで1つを取り出してからtextContentを使う
これらのポイントを押さえて、getElementByIdを使いこなしましょう!
Crebitでは、基礎からしっかり学べるをコンセプトに未経験者や初心者にわかりやすく、プログラミングを教えます。
現役プログラマーが講師でテキスト作成を行っているので、実践でよく使うものを重点的に学べる構成になっています。
また、セクションごとにミニゲームやミニシステムを制作するので、学習のモチベーションが続く工夫をしています。
もし興味がありましたら、ぜひ無料相談会にお申込みくださいね。