HTML DOM - HTMLコンテンツの変更
HTML DOM を通じて、JavaScript は HTML 文書内のすべての要素にアクセスできます。
HTMLコンテンツの変更
要素の内容を変更する最も簡単な方法は、innerHTML プロパティを使用することです。
次の例は、<p> 要素の HTML コンテンツを変更します：
例
<p id="p1">Hello World!</p>
<script>document.getElementById("p1").innerHTML="新文本!";</script>
<p>段落はスクリプトによって内容が変更されます。</p>
試してみる »
HTMLスタイルの変更
HTML DOM を通じて、HTML オブジェクトのスタイルオブジェクトにアクセスできます。
次の例は、段落の HTML スタイルを変更します：
例
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
試してみる »
イベントの使用
HTML DOM では、イベント発生時にコードを実行できます。
HTML 要素に「何かが発生した」とき、ブラウザはイベントを生成します：
- 要素のクリック
- ページの読み込み
- 入力フィールドの変更
イベントの詳細については、次の章で学ぶことができます。
次の2つの例は、ボタンがクリックされたときに <body> 要素の背景色を変更します：
例
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="背景色の変更">
試してみる »
この例では、関数によって同じコードが実行されます：
例
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="背景色の変更" />
試してみる »
次の例は、ボタンがクリックされたときに <p> 要素のテキストを変更します：
例
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="Hello サンプル!";
}
</script>
<input type="button" onclick="ChangeText()" value="テキストの変更" />
試してみる »