JavaScriptによるHTML要素とスタイルの操作方法を詳しく解説

JavaScriptによるHTML要素とスタイルの操作方法を詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 15:35:47

オリジナル

1247 人が閲覧しました

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>

ログイン後にコピー

分析例:
このコードは、新しい

要素を作成します。

var para=document.createElement("p");

ログイン後にコピー

要素にテキストを追加するには、まずテキストノードを作成する必要があります。このコードはテキストノードを作成します:

var node=document.createTextNode("This is a new paragraph.");

ログイン後にコピー

次に、このテキストノードを

要素に追加する必要があります。

para.appendChild(node);

ログイン後にコピー

最後に、新しい要素を既存の要素に追加する必要があります。

このコードは既存の要素を検索します:

var element=document.getElementById("div1");

ログイン後にコピー

次のコードは、既存の要素の後に新しい要素を追加します:

element.appendChild(para);

ログイン後にコピー

既存の HTML 要素を削除します

このコードは、この既存の要素に新しい要素を追加します: 例

<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>

ログイン後にコピー

分析例

この HTML ドキュメントには、2 つの子ノード (2 つの

要素) を持つ

要素が含まれています。

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" の

要素を検索します:

var child=document.getElementById("p1");

ログイン後にコピー

親要素から子要素を削除します:

lamp 親要素を参照せずに要素を削除できれば便利です。

parent.removeChild(child);

ログイン後にコピー

しかし、残念です。 DOM は、削除する必要がある要素とその親要素を認識している必要があります。

これは一般的な解決策です。削除する子要素を見つけて、そのparentNodeプロパティを使用して親要素を見つけます:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

ログイン後にコピー

JavaScript HTML DOM - CSS の変更

HTML DOM を使用すると、JavaScript で HTML 要素のスタイルを変更できます。 HTML スタイルを変更する

HTML 要素のスタイルを変更するには、次の構文を使用します: document.getElementById(id).style.property=新しいスタイル 次の例では、

要素のスタイルを変更します。例

この例では、ユーザーがボタンをクリックしたときに、id="id1" の HTML 要素のスタイルを変更します。

例

<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>

ログイン後にコピー