HTML DOM - 変更
HTML を変更 = 要素、属性、スタイル、イベントを変更します。
HTML 要素の変更
HTML DOM の変更にはさまざまな意味があります:
HTML コンテンツの変更
CSS スタイルの変更
HTML 属性の変更
-
新しい HTML 要素の作成
既存の HTML 要素を削除する
イベント (ハンドラー) を変更する
次の章では、HTML DOM を変更する一般的な方法について詳しく学習します。
HTML コンテンツの作成
要素のコンテンツを変更する最も簡単な方法は、innerHTML プロパティを使用することです。
次の例は、<p> 要素の HTML コンテンツを変更します:
例
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>サンプルを実行する»
オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください
 | us この例の詳細については、次のセクションで説明します。 |
|---|
HTML スタイルの変更
HTML DOM を通じて、HTML 要素のスタイル オブジェクトにアクセスできます。
次の例では、段落の HTML スタイルを変更します:
例
<html><!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>例の実行»
オンライン例を表示するには、[例の実行] ボタンをクリックしてください
新しい HTML 要素を作成します
新しい要素を HTML DOM に追加する必要がある場合は、まず要素 (要素ノード) を作成し、それを既存の要素に追加する必要があります。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<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>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
