HTML DOMの変更
HTML =変更要素、属性、スタイルやイベントを変更します。
編集HTML要素
HTML DOMは、多くの異なる側面を意味し変更します。
- HTMLコンテンツを変更します
- 変更CSSスタイル
- HTML属性を変更します
- 新しいHTML要素を作成します。
- 既存のHTML要素を削除します
- 変更イベント（ハンドラ）
次のセクションでは、従来の方法を変更するために深さでHTML DOMを検討します。
HTMLコンテンツを作成します。
要素の内容を変更する最も簡単な方法は、innerHTMLプロパティを使用することです。
次の例では、HTMLの<p>要素の内容を変更します。
例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
»をお試しください
 | 私たちは、次のセクションであなたに例の詳細を説明します。 |
|---|
変更HTMLスタイル
HTML DOMを通じて、あなたがオブジェクトスタイルのHTML要素にアクセスすることができます。
HTMLの段落スタイルを変更するには、次の例：
例
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
»をお試しください
新しいHTML要素を作成します。
HTML DOMに新しい要素を追加するには、最初の要素（エレメントノード）を作成し、既存の要素に追加しなければなりません。
例
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
»をお試しください