JavaScriptの勉強メモ

DOM を理解する

ドキュメント オブジェクト モデル DOM (ドキュメント オブジェクト モデル) は、HTML ドキュメントにアクセスして処理するための標準メソッドを定義します。 DOM は、HTML ドキュメントを要素、属性、テキストを含むツリー構造 (ノード ツリー) として表現します。

まず次のコードを見てみましょう:

HTML コードを DOM に分解します。ノード階層図:

HTML ドキュメントはノードのコレクションであると言えます: の 3 つの一般的な DOM ノードがあります。

1. 要素ノード : 上の図では、100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d、e388a4556c0f65e1904146cc1a846bee などはすべて要素ノード、つまりラベルです。

2. テキスト ノード : JavaScript、DOM、CSS、および 25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb 内のその他のテキストなど、ユーザーに表示されるコンテンツ。

3. 属性ノード : タグのリンク属性 href="http://www.imooc.com" などの要素属性。

次のコードを見てください:

<a href="http://www.imooc.com">JavaScript DOM</a>

ID による要素の取得

学習済みHTML /CSS スタイルでは、ご存知のように、Web ページはタグによって情報を整理しており、各人が ID 番号を持っているのと同じように、タグの id 属性値は一意です。ID 番号を使用するだけで、該当する人を見つけることができます。次に、Web ページで、まず ID を通じてタグを見つけて、操作を実行します。

構文:

 document.getElementById(“id”)

次のコードを見てください:

結果: null または [object HTMLParagraphElement]

注: 取得した要素はオブジェクトです。要素を操作するには、そのプロパティまたはメソッドを使用する必要があります。

innerHTML 属性

innerHTML 属性は、HTML 要素のコンテンツを取得または置換するために使用されます。

構文:

Object.innerHTML

注:

1.Object は、document.getElementById("ID") を通じて取得される要素など、取得される要素オブジェクトです。

2. innerHTML では大文字と小文字が区別されるので、記述に注意してください。

id="con" を通じて e388a4556c0f65e1904146cc1a846bee 要素を取得し、要素の内容を出力および変更します。コードは次のとおりです。 🎜>

結果:

変更HTML スタイル

HTML DOM を使用すると、JavaScript で HTML 要素のスタイルを変更できます。 HTML要素のスタイルを変更するにはどうすればよいですか?

構文:

注: オブジェクトは、document.getElementById("id") を通じて取得される要素など、取得される要素オブジェクトです。

Object.style.property=new style;

基本プロパティ テーブル (プロパティ):

注: このテーブルは単なるsmall 一部の CSS スタイル プロパティやその他のスタイルも、このメソッドを通じて設定および変更できます。

次のコードを見てください:

e388a4556c0f65e1904146cc1a846bee 要素のスタイルを変更し、色を赤に、フォント サイズを 20 に変更します。色を青に変更:

結果:

<p id="pcon">Hello World!</p><script>   var mychar = document.getElementById("pcon");   mychar.style.color="red";   mychar.style.fontSize="20";   mychar.style.backgroundColor ="blue";</script>

表示と非表示 (表示)属性)

表示効果と非表示効果は Web ページでよく見られ、display 属性を通じて設定できます。

構文:

注

: オブジェクトは、 document.getElementById("id") を通じて取得されるなど、取得された要素オブジェクトです。要素。

Object.style.display = value

値:

次のコードを見てください:

クラス名を制御します (className 属性)

className 属性は、要素のクラス属性を設定または返します。

構文:

関数:

object.className = classname

1. 要素 要素の外観を変更するには、Web ページ内の要素の CSS スタイルを指定します。

結果:

公式アカウントQRコード

---