DOM(Document Object Model)とはドキュメントオブジェクトモデル_DOM

D:document ドキュメント ブラウザによってロードされたページ

DOM O:object オブジェクト ページとページ内の要素はオブジェクトです

M:module モデル ページの要素組織形式

DOM は、プログラムやスクリプトがドキュメントのコンテンツ、スタイル、構造に動的にアクセスして変更できる、プラットフォーム非依存および言語非依存の API として W3C 組織によって設計されています。

DOM は Web ブラウザーの動作仕様です。DOM のおかげで、JavaScript は Web 標準言語としての地位を確立し、Web 分野におけるいわゆる「一度書いたらどこでも実行できる」という目標を達成しました。


ドキュメント オブジェクト モデル (DOM) は、HTML および XML ドキュメントのプログラミング インターフェイスです。これは文書の構造化された表現を提供し、文書の内容と表現を変更することができます。私たちが最も懸念しているのは、DOM が Web ページをスクリプトや他のプログラミング言語と接続していることです。

スクリプト開発者は、ドキュメント オブジェクトのプロパティ、メソッド、イベントを通じて、動的な Web ページ要素を制御、操作、作成できます。 Web ページの各要素 (HTML タグ) はオブジェクト (オブジェクト、いわゆる「オブジェクト」は現地語で「物」を意味します。台湾では通常、オブジェクトという言葉は「オブジェクト」と訳されます) に対応します。 Web ページ上のタグは層ごとに入れ子になっており、最も外側の層は です。ドキュメント オブジェクト モデルも層ごとに入れ子になっていますが、通常はツリーの形状として理解されます。ツリーのルートはウィンドウまたはドキュメント オブジェクトであり、最も外側のラベルの周囲、つまりドキュメント全体に相当します。ツリーのルート (通常、ツリーは遺伝的家系図や家系図のように逆さまに描かれます。ルートが唯一の共通の祖先です) の下にはサブレベル オブジェクトがあり、これらのオブジェクトには、ルート オブジェクトを除き、すべてのオブジェクトには独自の親オブジェクトがあり、同じオブジェクトの子オブジェクト間の関係は兄弟関係です。

この「父、息子、兄弟」から構成される「単為生家系図」のフレーム構造では、Web ページの各要素を正確に配置することができます。ドキュメントオブジェクトモデルは、ウェブページ全体をこのようなツリー構造に編成し、ツリー構造の各要素をノードとみなします。 JavaScript を含むさまざまなプログラミング言語は、ドキュメント オブジェクト モデルを通じて Web ページのさまざまな詳細にアクセスし、変更することができます。

World Wide Web Consortium (W3C) は、ドキュメント オブジェクト モデルの一連の標準を開発し、さらに関連する標準を開発中です。これらの標準の一部をサポートすることに加えて、最新のブラウザは、W3C 標準が策定される前に普及していた歴史的で確立されたプログラミング インターフェイスの一部もサポートしています。言い換えれば、現在ブラウザーで使用されているテクノロジーの歴史は複雑であり、人々が一般的に使用している DOM テクノロジーの中には、従うべき標準がないものもあります。

実践指向のテクノロジーを完全に理解するために、すべての一般的な DOM (IE ブラウザーでは「異なる」テクノロジーを含む) の詳細を説明します。


DOM と JavaScript

QQ、MSN、電子メールでよく聞かれる「JavaScript 関連」の質問の 95% は、実際には DOM の問題に関するものです。人々は習慣的に DOM について話すことを好みません。JavaScript について話すか、「Ajax」（かつて人気を博した「概念」ですが、前世紀末の「DHTML」と同じように、最近は落ち着いてきています）について話します。これらのホットワードの出現については、個人的には非常に嬉しく思います。なぜなら、それが人々の JavaScript テクノロジへの熱意をもたらすからです。次のホットワードは何でしょうか? 疑似マッシュアップはどうでしょうか?

JavaScript を使用して Web ページ上で実行されるすべての操作は、DOM を通じて実行されます。 DOM はブラウザに属するものであり、JavaScript 言語仕様で規定されているコアコンテンツではないため、JavaScript 言語リファレンスのヘルプドキュメントをダウンロードして確認しても、適切な document.write メソッドさえ見つかりません。女性や子供には知られています。

次のコードの機能は、プロンプト ボックスを使用して、Web ページ内のすべてのリンクの URL を 1 つずつ表示することです。コード内の赤でマークされた部分が DOM です。

コードをコピー コードは次のとおりです。

varアンカーTags = document.getElementsByTagName("a ");
for (var i = 0; i {
alert("この a 要素の Href は : "アンカーTags[i].href "n") ;
}

このようにすると、どれがコアの JavaScript で、どれが DOM で、それぞれがどのような役割を果たしているかが一目でわかります。

var anchorTags =
anchorTags という名前の JavaScript 変数を作成します。

document.getElementsByTagName("a")
Document インターフェイスは DOM1 Core 仕様で定義された最初のインターフェイスであり、 document は Document インターフェイスを実装するホスト オブジェクトです。ドキュメントは Web ページ上のすべてを制御します。
DOM1 コアは、Document インターフェースの getElementsByTagName() メソッドを定義します。このメソッドは、ノード リスト (NodeList) を返します。これは、一致するパラメーター条件を満たすすべてのタグを含むノードをドキュメント内に出現する順序で並べて含む DOM 固有の配列です。したがって、anchorTags 変数はノードのリストになります。

;
セミコロンは JavaScript の文の終わりの記号です。

for (var i = 0; i これは、プログラミング言語における典型的な「for ループ」です。ループ変数 i が宣言され、anchorTags ノード リスト内の各ノードが 1 つずつ処理されますこれも JavaScript のものです。

anchorTags.length
DOM1 コアは、NodeList インターフェイスの length 属性を定義します。これは、ノード リストに含まれるノードの数です。これは、JavaScript 配列にも length 属性があります。

alert(
alert() は、メソッドに渡されたパラメーター (文字列) を表示するプロンプト ボックスをポップアップする DOM メソッドです。これは一般に DOM レベル 0 (DOM レベル 0) として知られています。または、DOM0 は歴史上確立されたプログラミング インターフェイスの 1 つです。DOM0 は「一部のブラウザでサポートされている」プログラミング インターフェイスのセットです (実際、DOM0 をサポートしていないブラウザは市場に存在しません。一部のソフトウェア ホビーでのみです)。 🎜>
"この a 要素の Href は次のとおりです。"
文字列リテラルと文字列リンカー。

anchorTags[i].href
href は、HTMLAnchorElement インターフェイスの属性です。 DOM1 HTML 仕様では、リンク () 要素の href 属性の値を返します。ここでは、i 番目の配列項目にアクセスするための構文と同じ、anchorTags[i] のような使用法を使用します。 JavaScript では、言語に依存しない、いわゆる「DOM 方式」アクセス (特定の言語に関係なく) ノード リスト内の項目にアクセスする方法は、NodeList インターフェイスで定義されている item() メソッド、anchorTags を使用します。 .item(1).href ですが、ほとんどの JavaScript 実装では、この単純な配列のような構文を使用できます。これは、ほとんどの人が実際に使用するものです。連結。文字列の末尾に復帰文字を追加します。

}
「for ループ」が終了します。