HTML DOMを編集HTMLコンテンツ
HTML DOMを通じ、JavaScriptは、各要素のためのHTML文書にアクセスすることができます。
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 DOMは、イベントが発生したときにコードを実行することができます。
HTML要素は、「何かが起こっている」と、ブラウザがイベントを生成します。
- 要素をクリックします。
- 読み込み中ページ
- 入力フィールドを変更します
あなたは次の章でイベントの詳細を確認することができます。
：背景色ボタンの<body>要素がクリックされたを変更するには、次の2つの例
例
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
»をお試しください
この場合、関数は、同じコードを実行します。
例
<html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
»をお試しください
次の例では、ボタンのテキスト<p>要素がクリックされた変更されます。
例
<html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
»をお試しください
