Javascript DOM、ノード、要素取得の紹介

DOM

ドキュメント: DOM の「D」。Web ページが作成され、Web ブラウザーに読み込まれると、記述された Web ドキュメントがドキュメント オブジェクトに変換されます。

オブジェクト: DOM の「O」であるオブジェクトは、自己完結的なデータの集合です。特定のオブジェクトに関連付けられた変数はそのオブジェクトの属性と呼ばれ、特定のオブジェクトを通じてのみ呼び出すことができる関数はそのオブジェクトのメソッドと呼ばれます。

モデル: DOM の「M」は、何かの表現です。 DOM はドキュメントを家系図として表現します。

ノード

ノード: ドキュメントは、ドキュメント ツリー上の枝と葉であるノードで構成されます。

DOM には、要素ノード、テキストノード、属性ノードなど、さまざまな種類のノードが存在します。

要素ノード:

タグの名前は要素の名前です。テキスト段落要素の名前は「p」、順序なしリスト要素の名前は「u1」、リスト項目要素の名前は「1i」です。

要素には他の要素を含めることができます。 「ショッピング リスト」ドキュメントでは、すべてのリスト アイテム要素が順序なしリスト要素内に含まれています。実際、別の要素内に含まれていない唯一の要素は、ノード ツリーのルート要素である 要素です。

テキストノード:

要素ノードは単なるノードの一種です。ドキュメントが完全に空の要素で構成されている場合、構造は存在しますが、ドキュメント自体にはコンテンツが存在しません。コンテンツが王様であるインターネットでは、コンテンツの大部分はテキストで提供されます。たとえば、<p> 要素に含まれるテキストはテキスト ノードです。
XHTML ドキュメントでは、テキスト ノードは常に要素ノード内に含まれます。ただし、すべての要素ノードにテキスト ノードが含まれているわけではありません。

プロパティ ノード:

属性ノードは、要素のより具体的な説明を提供するために使用されます。たとえば、ほとんどすべての要素には title 属性があり、これを使用して要素に含まれる内容を正確に説明できます。属性ノードは常に要素ノードに含まれます。

要素を取得

要素ノードを取得する DOM メソッドは 3 つあり、1 つは要素 ID、1 つはタグ名、もう 1 つはクラス名によるものです。

getElementById()

DOM には getElementById というメソッドがあり、これは指定された id 属性値を持つ要素ノードに対応するオブジェクトを返します。これはドキュメント オブジェクトに固有の関数です。関数名の後には、関数パラメータを含む括弧のペアを続ける必要があります。 getElementById メソッドにはパラメータが 1 つだけあります。取得する要素の id 属性の値は、一重引用符または二重引用符で囲む必要がありますdocument. getElementById（id） 。ドキュメント内のすべての要素はオブジェクトです。 DOM によって提供されるメソッドは、任意のオブジェクトを取得できます。例えば：

document.getElementById("購入")`

タグ名による要素の取得()

getElementsByTagName メソッドは、指定されたタグを持つドキュメント内の各要素ごとに 1 つのオブジェクトの配列を返します。このメソッドにも、タグの名前であるパラメータが 1 つだけあります: element.getElementsByTagName(tag) 。
ただし、これは getElementById メソッドと多くの類似点を持つ配列を返します。たとえば、次のようになります。

タグ名によって要素を取得します("li");

クラス名による要素の取得()

このメソッドは、Class 属性のクラス名で要素にアクセスできます。 getElementsByClassName はクラス名という 1 つのパラメータのみを受け入れます。

クラス名による要素の取得(クラス)

このメソッドの戻り値は getElementsByTagName() に似ており、同じクラス名を持つ要素の配列になります。のように：

document.getElementsByClassName("セール");

このメソッドは、文字列パラメータ内でクラス名をスペースで区切ることで、複数のクラス名を持つ要素を検索するためにも使用できます。

要約:

1. ドキュメントはノードです。

2. ノードは、要素ノード、属性ノード、テキストノードという異なるタイプに分けられます。

3. getElementById は、ドキュメント内の特定の要素に対応するオブジェクトを返します。

4. getElementsByTagName と getElementsByClassName は、ドキュメント内の特定の要素ノード セットに対応するオブジェクトの配列を返します。

5. 各ノードはオブジェクトです。

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。