JavaScript HTML DOM - HTMLの変更
HTML DOMを使用すると、JavaScriptでHTML要素のコンテンツを変更できます。
HTMLコンテンツの変更
HTML要素のコンテンツを変更する最も簡単な方法は、innerHTMLプロパティを使用することです。
HTML要素のコンテンツを変更するには、次の構文を使用します。
<div>document.getElementById(<i>id</i>).innerHTML =<i> new HTML</i></div>
この例では、<p>要素の内容を変更します。
例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
例の説明:
- 上記のHTMLドキュメントには、
id="p1"の<p>要素が含まれています。 - HTML DOMを使用して
id="p1"の要素を取得します。 - JavaScript はその要素の内容(
innerHTML）を「新しいテキスト!」に変更します。
この例では、<h1>要素の内容を変更します。
例
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
例の説明:
- 上記のHTMLドキュメントには、
id="id01"の<h1>要素が含まれています。 - HTML DOMを使用して
id="id01"の要素を取得します。 - JavaScriptはその要素の内容(
innerHTML）を「新しい見出し」に変更します。
属性値の変更
HTML属性の値を変更するには、次の構文を使用します。
<div>document.getElementById(<i>id</i>).<i>attribute = new value</i></div>
この例では、<img>要素のsrc属性の値を変更します。
例
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
例の説明:
- 上記のHTMLドキュメントには、
id="myImage"の<img>要素が含まれています。 - HTML DOMを使用して、
id="myImage"の要素を取得します。 - JavaScriptは、その要素の
src属性を「smiley.gif」から「landscape.jpg」に変更します。
動的HTMLコンテンツ
JavaScriptは動的なHTMLコンテンツを作成できます。
例
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();</script>
</body>
</html>
document.write()
JavaScriptでは、document.write()を使ってHTML出力ストリームに直接書き込むために使用できます。
例
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
ドキュメントがロードされた後は、document.write()を決して使用しないでください。ドキュメントが上書きされます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。