JavaScriptの記述について
JavaScriptはHTML上では
html
<script>
//ここに記述します
</script>
外部ファイルから出力する場合は
html
<script src="example.js"></script>
そして外部ファイルにexample.jsを用意してそこに記述。
JavaScriptサンプルコードを用いての動作確認
html
document.write(`Hello`);
document.write(`<h1>Hello</h1>`);
実行結果:Hello
実行結果:h1としてHelloを表示してくれる
ページ上に文字を出力。
html
<p id="example">Hello</p>
<script>
console.log(document.getElementById("example"));
</script>
実行結果:<p id="example">Hello</p>
exampleをIDとして取得し、exampleが含まれているpタグ全体をコンソールに表示。
classの場合はgetElementByClassNameを使う
html
<p id="example">Hello</p>
<script>
console.log(document.getElementById("example")textContent);
</script>
実行結果:Hello
一つ前の例のテキストだけを取得し、コンソールに表示。
html
<p id="example">Hello</p>
<script>
console.log(document.getElementById(`example`).innerHTML);
</script>
実行結果:Hello
HTMLで動作するのと一緒の内容でidを取得してくれる
html
<div id="example"></div>
<script>
const box = document.getElementById('example');
box.innerHTML = '<p>Hello</p>';
</script>
実行結果:Hello
空要素のdivの中に新たにp要素を出力している。
補足事項
- documentとはWebページを構成しているHTMLソースそのもの
- innerHTMLとtextContentの違いはinnerHTMLはタグをHTMLとして解釈してくれる。 一方でtextContentはテキストの内容を表示するだけ。 テキストの内容だとわかっていればtextContentを使ったほうがいい。