1つの記事でJavaScript DOM操作の基本を学ぶ

DOM の概念

DOM: ドキュメントオブジェクトモデル: ドキュメントオブジェクトモデルは、js を使用して HTML コードを操作し、要素を追加したり、要素を削除したりします。。。

要素を取得

(1) getElementByIdはIDで要素を取得します (2) getElementsByTagNameはタグ名(配列)で要素を取得します
（3）getElementsByClassNameはクラス別に要素セット（配列）を取得します。
(4) getElementsByNameはname属性を通じて要素コレクション（配列）を取得します。

概要: タグ名、ID、クラス、名前属性に基づいて要素を取得できます。 Id の結果は要素ですが、その他の結果はコレクションです。
ドキュメントオブジェクトは上記の4つをサポートしていますが、要素オブジェクトは
getElementsByTagNameとgetElementsByClassName

要素の変更

(1) コンテンツを変更します。タグ内のテキストは、innerText プロパティを通じて読み取ったり設定したりできます。タグ内のテキストは、innerHTML プロパティを通じて読み取ったり設定したりできます。2 つの違いがあります。innerHTML は HTML のルールに従ってテキストを解析しますが、innerText は通常のテキストコンテンツとして扱われます。

ここに画像の説明を挿入

（２）スタイルを変更する
a：xxx.style.yyy
b: xxx.classname = "..." (クラス属性の変更と同等)

ここに画像の説明を挿入

要素の追加と削除

（1）createElementは要素ノードを作成する
createElement("p")は段落を作成します(2) createTextNodeはテキストノードを作成します
createTextNode("text content") は、値 "text content" を持つテキストノードを作成します (3) appendChild は子ノードを追加します (4) removeChild は子ノードを削除します

ここに画像の説明を挿入

JavaScript DOM操作の基本に関するこの記事はこれで終わりです。JavaScript DOMの基本に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: