JavaScriptでできることの一つに「表示しているHTMLの構造をプログラムのコードで変化させることができる」というものがある。
たとえば、
index.html
こんにちは
<div id = "innerTest"></div>
<script src = ".main.js"></script>
と
main.js
console.log("ファイル読み込みのテストです");
let element = document.getElementById("innerTest");①
element.innerHTML = "<strong>JavaScript</strong>で書きました";②
①ではinnerTestというidがついている画面上の要素を取り出す。そのための関数がブラウザから提供されていて、
document.getElementById([idの名前])
という形で呼び出すことができる。
結果 elementという変数は、画面上の
<div id = "innerTest"></div>
という要素のことを指し示している。
②では、elementで取り出した要素に備わっているinnerHTMLプロパティに変更を加えている。これによりelementの中にHTMLを流し込むことができる。
innerHTMLについて
innerHTMLプロパティを使用すると、HTML要素の取得や操作を行うことができる。
例
html
<div class="contents" id="apple">りんご</div>
に対して、
javascript
const apple = document.getElementById("apple")
console.log(apple.innerHTML)
// => りんご
apple.innerHTML = "青リンゴ"
console.log(apple.innerHTML)
// => 青リンゴ
今回は「JavaScriptで書きました」という文字列を表示、さらに一部をstrongタグで強調した内容を流し込んでいる。
以上の操作により画面のHTMLは次のように変化する。
html
<div class = "innerTest"><strong>JavaScript</strong>で書きました</div>
ブラウザ上では
と表示される。
document.getElementByIdやinnerHTMLのような 「ブラウザが提供している機能」 を利用してコードを書くことができることがわかった。言語だけでなくブラウザのような実行環境から提供されている機能も利用してコードが書けることを覚えておく。