ホームページ > 記事 > ウェブフロントエンド > JavaScriptによるHTML要素とスタイルの操作方法を詳しく解説_基礎知識
JavaScriptによるHTML要素とスタイルの操作方法を詳しく解説_基礎知識
- WBOYオリジナル
- 2016-05-16 15:35:471224ブラウズ
JavaScript HTML DOM 要素 (ノード)
新しい HTML 要素を作成します
新しい要素を HTML DOM に追加するには、まず要素 (要素ノード) を作成し、次にその要素を既存の要素に追加する必要があります。
例
<div id="div1">
<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("div1");
element.appendChild(para);
</script>
分析例:
このコードは、新しい e388a4556c0f65e1904146cc1a846bee 要素を作成します。
var para=document.createElement("p");
e388a4556c0f65e1904146cc1a846bee 要素にテキストを追加するには、まずテキスト ノードを作成する必要があります。このコードはテキスト ノードを作成します:
var node=document.createTextNode("This is a new paragraph.");
次に、このテキスト ノードを e388a4556c0f65e1904146cc1a846bee 要素に追加する必要があります。
para.appendChild(node);
このコードは既存の要素を検索します:
var element=document.getElementById("div1");
element.appendChild(para);
このコードは、この既存の要素に新しい要素を追加します:
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
分析例
id="div1" の要素を検索します:
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div>
var parent=document.getElementById("div1");
id="p1" の e388a4556c0f65e1904146cc1a846bee 要素を検索します:
var child=document.getElementById("p1");
親要素から子要素を削除します:
lamp 親要素を参照せずに要素を削除できれば便利です。
これは一般的な解決策です。削除する子要素を見つけて、そのparentNodeプロパティを使用して親要素を見つけます: parent.removeChild(child);しかし、残念です。 DOM は、削除する必要がある要素とその親要素を認識している必要があります。
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
HTML DOM を使用すると、JavaScript で HTML 要素のスタイルを変更できます。
HTML スタイルを変更する
HTML 要素のスタイルを変更するには、次の構文を使用します:
document.getElementById(id).style.property=新しいスタイル
次の例では、e388a4556c0f65e1904146cc1a846bee 要素のスタイルを変更します。
例
例
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。