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

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 のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • 1つの記事でJavaScript DOM操作の基本を学ぶ
  • 一般的な JavaScript DOM 操作コードの概要
  • JavaScript 変数 Dom オブジェクトのすべてのプロパティ
  • js DOMイベントの一般的な操作例を詳しく解説
  • JavaScript での Dom 操作を理解する

<<:  CSS ウェイト値(カスケード)の例の詳細な説明

>>:  dockerでpdflatex環境を設定する方法

推薦する

大きな MySQL テーブルに列を追加する方法

質問は https://www.zhihu.com/question/440231149 から参照さ...

VueはTeleportをベースにModalコンポーネントを実装します

目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

Google の新しい UI から学べること (画像とテキスト)

2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...

nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法

nginx を使用して 1 つのサーバーに複数のフロントエンド プロジェクトをデプロイする 3 つの...

HTMLタグIDは変数にできる

<table id=" <%=var1%>">、var1...

Vue+webrtc (Tencent Cloud) ライブブロードキャスト機能の実装実践

目次1. 生放送効果2. ライブストリーミングを開始する手順2.1 Tencent Web(高速ライ...

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...

MySQL 5.7を完全にアンインストールするための詳細な手順

この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...

nginx の http リクエスト処理の各段階の詳細な分析

nginx の HTTP モジュールを作成する場合、リクエスト開始時のアクセス許可の有無、コンテンツ...

HTML フォームタグチュートリアル (5): テキストフィールドタグ

<br />このタグは、さらにテキストを入力できる複数行のテキスト フィールドを作成する...

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

ウェブページをデザインする際に注意すべきいくつかの問題

Web デザインは、個人の好みや Web ページの内容に応じて、デザインのレイアウトが常に変化します...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

MySQL ALTERコマンドの知識ポイントのまとめ

テーブル名を変更したり、テーブル フィールドを変更したりする必要がある場合は、 MySQL ALTE...