JavaScript HTML DOM - HTMLの変更

❮ 前章へ次章へ ❯

HTML DOM は、JavaScriptによるHTML要素の変更を可能にします。

HTML出力ストリームの変更

JavaScriptは、動的HTMLコンテンツを作成できます：

日付：

JavaScriptでは、document.write()を使用してHTML出力ストリームに直接書き込むことができます：

例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Try it Yourself »

文書のロード後は、document.write()を使用しないでください。それは、文書を上書きします。

HTMLコンテンツの変更

HTML要素のコンテンツを変更する最も簡単な方法は、innerHTMLプロパティを使用することです。

HTML要素の内容を変更するには、次の構文を使用します：

document.getElementById(id).innerHTML = new HTML

次の例では、<p>要素のコンテンツを変更します：

例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

Try it Yourself »

この例では、<h1>要素のコンテンツを変更します：

例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>

</body>
</html>

Try it Yourself »

例の説明：

上のHTML文書には、id="header"の<h1>要素が含まれています
HTML DOM を使用して、id="header"の要素を取得します
JavaScriptは、その要素のコンテンツ（innerHTML）を変更します

属性値の変更

HTML属性の値を変更するには、次の構文を使用します：

document.getElementById(id).attribute = new value

次の例では、<img>要素のsrc属性の値を変更します：

例

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

Try it Yourself »

例の説明：

上のHTML文書には、id="myImage"の<img>要素が含まれています
HTML DOMを使用して、id="myImage"の要素を取得します
JavaScriptは、その要素のsrc属性を "smiley.gif"から "landscape.jpg"に変更します

練習問題による自己診断

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »

❮ 前章へ次章へ ❯