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環境を設定する方法

推薦する

XHTML と CSS の Web ページ作成の問題に対する解決策

XHTML CSS ページ制作中に遭遇する問題の解決策は、解決策と呼ぶには少々大げさです。せいぜい、...

ReactのuseEffectクロージャの落とし穴についての簡単な説明

問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...

js オブザーバーモードの紹介と使用

目次定義2. 使用シナリオ3. 例を挙げる4. コーディング定義オブザーバー パターンは 1 対多の...

VMware仮想マシンでのLinuxのコピー&ペーストの詳細な説明

1. VMware Workstation 上の Linux: 1. ソースの更新(オプション) v...

Docker を使用した ElasticSearch:7.8.0 クラスターのインストールに関する詳細なチュートリアル

ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...

Angular CLI リリース パスの構成項目の簡単な分析

序文プロジェクトのリリースでは、常に特定の状況に応じたパッケージ化が必要です。Angular CLI...

Linux での scp および sftp コマンドの詳細な説明

目次序文1. SCPの使用法2. sftpを使用する3. scp と sftp の違いは何ですか?ど...

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

ゲームの Node.JS バージョンを作成する方法

目次概要ビルドプロセス関連APIリードライン基本的な使い方チョーククリア手順に関する追加情報完全なコ...

MySQLデータベースの共通操作スキルのまとめ

この記事では、MySQL データベースの一般的な操作テクニックをまとめます。ご参考までに、詳細は以下...

TypeScript で時間を費やした場所の概要

TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...

MySQL テーブルと列のコメントの概要

コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...

ブラウザの互換モードでボタン内のテキストが垂直方向に中央揃えにならない問題について簡単に説明します。

XML/HTML コードコンテンツをクリップボードにコピー<ボタンスタイル= "カ...

Vue 2.0 の基礎を詳しく解説

目次1. 特徴2. 例3. オプション4. 基本的な文法5. ライフサイクル6. ルーティング管理 ...