HTML DOM - 変更
HTML の変更 = 要素、属性、スタイル、イベントを変更すること。
HTML 要素の変更
HTML DOM の変更は、多くのさまざまな側面を意味します：
- HTML コンテンツの変更
- CSS スタイルの変更
- HTML 属性の変更
- 新しい HTML 要素の作成
- 既存の HTML 要素の削除
- イベント（ハンドラ）の変更
次の章では、HTML DOM を変更する一般的な方法について詳しく学びます。
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 要素の作成
HTML DOM に新しい要素を追加するには、まずその要素（要素ノード）を作成し、それを既存の要素に追加する必要があります。
例
<div id="div1">
<p id="p1">これは段落です。</p>
<p id="p2">これは別の段落です。</p>
</div>
<script>var para=document.createElement("p");
var node=document.createTextNode("これは新しい段落です。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);</script>
試してみる »