HTML DOM (学習ノート 2)_html/css_WEB-ITnose

さて、HTML DOM とは何かについては HTML DOM (Study Note 1) で簡単に説明します。この記事では HTML DOM についての内容を記録します。

1: DOM ノード

まず、以下の図に示すように、HTML DOM のツリー構造を見てみましょう:

これは、私たちが扱いたい HTML DOM であり、別の表現形式です。 HTML ドキュメントの表現に近いスタイルは、次の図に示すように次のようになります。

HTML DOM では、すべてがノードです。 HTML DOM は、ノードのツリーとして表示される HTML です。 W3C の HTML DOM 標準によれば、HTML ドキュメント内のすべてのコンテンツはノードです。ドキュメント全体がドキュメント ノードであり、HTML 要素のテキストがテキストです。ノード; 各 HTML 要素のテキストはテキスト ノードです。コメントはコメント ノードです。 HTML DOM を介して、JAVASCRIPT を通じてツリー内のすべてのノードにアクセスできます。すべての HTML ノードは変更、作成、削除できます。

データ構造のツリーを学習したことがある場合は、ツリー データ構造の特徴を理解するのは非常に簡単ですが、学習したことがない場合でも、下の図を見ると非常に簡単に理解できます。

ツリー データ構造の特性を理解することは、HTML ノードの属性を通じて他の HTML ノードを見つける方法を理解するのに非常に役立ちます。

2: DOM メソッド

HTML ノードを操作したい場合は、まず対応するノードを取得する必要があります。 1 つは、HTML ノード メソッドを使用する方法 (主に HTML ノードを使用する方法) です。実行できるアクションを制御します); 2 つ目は、HTML ノードの属性を通じて (主に、取得または設定できる値を制御し、その特性に従ってそれらに関連付けられた他の HTML ノードを取得するために使用されます)。ツリー構造)

実際の開発作業でよく使用するメソッドをいくつか示します:

1) getElementById() メソッドは、同じ ID 属性を持つ複数の HTML ノードがある場合、指定された ID を持つ最初のオブジェクトへの参照を返すことができます。 、最初のものが返されます。このメソッドは非常に一般的に使用されます。

2) getElementsByName() メソッドは、指定された名前を持つオブジェクトのコレクションを返すことができます。これはコレクションであることに注意してください。

3) getElementsByTagName() メソッドは、指定されたタグ名を持つすべての要素を返すことができます。これはコレクションであることに注意してください。

3) write() メソッドは、HTML 式または JavaScript コードをドキュメントに書き込むことができます。

4) appendChild() メソッドは、最後の子ノードをノードに追加します。

5）removeChild() メソッドは、要素の指定された子ノードを指定します。

6) setAttribute() メソッドは、指定された属性を追加し、指定された値を割り当てます。

7) getAttribute() メソッドは、指定された属性名の属性値を返します。

もちろん、多くの方法がありますが、これらは最も一般的に使用される方法であり、W3C はこの作業で良い仕事をしました。インターネットに接続していれば、どの方法でも簡単に使用できます。もちろん、深く理解して上手になりたい場合は、自分でさらに練習するのが最善です。

3: DOM 属性

属性は通常、HTML ノードのステータス特性を HTML ノードの属性を通じて取得または設定できます。

実際の開発作業で一般的に使用される属性は次のとおりです:

1) innerHTML 属性、HTML ノードのコンテンツを取得するために使用されます。この属性は、HTML ノードのコンテンツを取得または置換する場合に非常に役立ちます。

2)parentNode 属性は、HTML ノードの親ノードを取得するために使用されます。これは単一であることに注意してください。

3) childNodes 属性は、HTML ノードの子ノードを取得するために使用されます。複数存在する可能性があることに注意してください。

4)attributes 属性。HTML ノードの属性セットを取得するために使用されます。

注: HTML ノードの種類が異なると、対応する nodeName 属性、nodeValue 属性、nodeType 属性の値も異なり、次のように分類されます:

nodeName 属性は、HTML ノードの名前を指定するために使用されます:

1)ノード名は読み取り専用です。

2) 要素ノードのnodeNameは、対応するHTMLタグ名と同じです。

3) 属性ノードのnodeNameは、対応するHTML属性名と同じです。

4) テキスト ノードのノード名は常に #text です。

5) ドキュメント ノードのノード名は常に #document です。

nodeValue 属性は、HTML ノードの値を指定するために使用されます:

1) 要素ノードの nodeValue は未定義または null です。

2) テキストノードのnodeValueはテキストそのものです。

3) 属性ノードのnodeValueは属性値です。

nodeType 属性は HTML ノードのタイプを指定するために使用され、読み取り専用でもあります:

以下は HTML ノードのより重要なタイプです

1) 要素ノード??1

2) 属性ノード?? 2

3) テキスト ノード??3

4) コメント ノード??8

5) ドキュメント ノード??9

さて、上記の内容は HTML DOM の中核となる知識ポイントだと思います:

1) HTML ドキュメントを別の視点から見て、HTML ドキュメントを DOM ツリーとして考えると、ドキュメントのすべてのコンテンツを DOM ツリーのノードにマッピングできます

2) DOM メソッドを使用して動作を制御しますまたは HTML DOM のプレゼンテーション もちろん、その動作に関して最も重要なことは、対応する HTML ノードを見つける方法です。

3) DOM 属性を使用して、HTML DOM のステータスを制御し、ステータス値を取得またはリセットします。

ただし、これは状況の一般的な理解にすぎません。この点に到達したい場合は、複雑で柔軟で実用的でカラフルな HTML ページを構築することはできません。包括的かつ体系的に学習した後は、さらに深く掘り下げて、知識を DOM ツリーのように増やしてください。ツリー内のすべてのノードに精通しており、各ノードの属性を理解しているので、必要に応じて必要な調整を行うことができます。

次のドキュメントを参照して試してみることをお勧めします:

HTML DOM の例。

HTML DOM リファレンス。

W3C、ありがとう！ありがとうインターネット！