ドキュメント オブジェクト モデルが簡素化されました。

こんにちは?仲間の皆さん、私のブログへようこそ。今日は DOM の概念を単純化します。

導入

私が Web 開発者として働き始めたとき、業界では「DOM」という用語が頻繁に飛び交っていました。すべての JavaScript チュートリアルで言及されていましたが、それが何を意味するのかわかりませんでした。 DOM の簡単な説明を探していますが、高度なプログラミング用語と混同して調べた結果です。長い検索の結果、理解が得られたので、以前の状況で他の人を助けるために、より簡単な説明をすることが賢明であると考えました。

説明

DOM という用語を初めて聞いたとき、最初に何が思い浮かびましたか?

1. ドキュメント

2. オブジェクト

3. モデル
   
   それらはどういう意味ですか?

---

文書とは:

Web ドキュメントは通常、単純な HTML ファイルとして定義されます。このページのような Web ドキュメントは通常、複数のファイルで構成されており、URL (Uniform Resource Locator) を介してアクセスされます。 HTML ファイル自体には、ほとんどの場合、スタイル シート、背景画像、その他のグラフィックス、Java プログラム、その他のファイルが含まれています。

ドキュメントは HTML ファイルです。

ドキュメントはオブジェクトの形式で読み込まれるとブラウザに送信されます。"Object ??"

オブジェクトとは:

オブジェクトとはプログラミングでよく聞く用語であり、オブジェクトをよく理解することが JavaScript の素晴らしいスタートとなります。

JavaScript のオブジェクト は、「key: value」 ペアの形式で、プリミティブ型または参照型の関連データの順序付けされていないコレクションとして定義できます。これらのキーは変数または関数にすることができ、オブジェクトのコンテキストではそれぞれプロパティおよびメソッドと呼ばれます。オブジェクトは、図括弧 {…} とオプションのプロパティのリストを使用して作成できます。プロパティは「キー:値」のペアであり、キーは文字列 (「プロパティ名」とも呼ばれます) であり、値は任意の値にすることができます。

let object = {
Key: Value
}

オブジェクトは、すべての要素がノードと呼ばれるツリー状の形式でグラフィカルに表現され、ノードは親子関係を持つ HTML 構文配置に基づいてグループ化されます。

<div> <!-- parent element-->
<p><!-- child element to div element-->
<!-- text is also referred to as a node -->
Paragraph text <!-- child element top element-->
</p> 
</div>

注: DOM を使用するコードの大部分は HTML ドキュメントの操作を中心に展開するため、厳密にはすべてのノードが要素であるわけではありませんが、DOM 内のノードを要素として参照するのが一般的です。

ブラウザー リーダー ドキュメント には、ツリーとしてグラフィカルに表現できる オブジェクト があります。 ** では、モデルとは何ですか??**

モデルとは:

これを辞書の観点から見てみましょう。

1.通常、何かのミニチュア表現。例: - 人間の心臓のプラモデル 2. 作られるもののパターン。続きを読む

モデル の辞書の定義を理解して、それを Web ページに関連付けてみましょう。これは、ブラウザによってテキスト、色、画像、などを整理して視聴者に提示します。したがって、これを Web ドキュメントを受信して​​コンパイルした後の結果と呼びます。 結論

*

このように見てみましょう *

$$ 受信 ⇾ 対流 ⇾ プレゼンテーション $$

Web ページは、Web ページが初めて読み込まれるたび、および更新されるときにも、この単純なプロセスを通過します。

受信
:- サーバーまたはローカルマシンからドキュメントを受信し、
対流
:- ドキュメントのリーダーと各要素をノードに変換します
プレゼンテーション
:- ユーザーに表示されるように設計された Web ページに作成されたオブジェクトまたはツリーを表します。 この場合、ドキュメントに変更が加えられても、モジュールには直接的な影響はありません。ドキュメントが保存され、ブラウザは受信したドキュメントの新しいオブジェクトを作成し、モデルが再作成または変更されます。

おめでとう

---

** わあ、素晴らしい旅でした。この記事を最後まで読んでいただけて嬉しいです。**

まとめとフィードバック ?

---

この記事をお読みいただき、ありがとうございます。このトピックがあなたのトピックを単純化し、貴重な洞察を提供するのに役立つことを願っています。役に立ったと思われる場合は、Web 開発やその他の技術トピックに関するより理解しやすいコンテンツを得るために、私をフォローすることを検討してください。

あなたのフィードバックは重要です!提案、質問、改善してほしい部分など、ご意見をコメント セクションで共有してください。反応絵文字を自由に使用して、この記事を読んでどう感じたかをお知らせください。 ?

接続を維持しますか?

---

これは私のブログの旅の始まりにすぎません。皆さんとつながりを持ちたいと思っています。アイデアを共有し、成長し、一緒に学びましょう。

フォローして連絡を取り合いましょう:

ツイッター

• リンクトイン
皆さんからのご意見をお待ちしており、好奇心旺盛なこのコミュニティが成長することを楽しみにしています。 ?

以上がドキュメント オブジェクト モデルが簡素化されました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。