Documentオブジェクトは、 そのウィンドウに表示されるドキュメント。 Documentオブジェクトには、ドキュメントコンテンツへのアクセスと変更を可能にする他のオブジェクトを参照するさまざまなプロパティがあります。この記事では、HTMLDOMについて理解します。
HTMLDOMの概念
文書化されたコンテンツにアクセスして変更する方法は、 ドキュメントオブジェクトモデル 、またはDOM。オブジェクトは階層で編成されています。この階層構造は、Webドキュメント内のオブジェクトの編成に適用されます。
- ウィンドウオブジェクト＆マイナス階層の最上位。これは、オブジェクト階層の最大の要素です。
- ドキュメントオブジェクト＆マイナスウィンドウに読み込まれる各HTMLドキュメントはドキュメントオブジェクトになります。ドキュメントには、ページのコンテンツが含まれています。
- フォームオブジェクト＆minus…タグで囲まれたすべてのものがフォームオブジェクトを設定します。
- フォーム制御要素＆マイナスフォームオブジェクトには、テキストフィールド、ボタン、ラジオボタン、チェックボックスなど、そのオブジェクトに対して定義されたすべての要素が含まれます。
HTMLDOMとは
Document Object Modelは、ドキュメント用のプログラミングAPIです。オブジェクトモデル自体は、モデル化するドキュメントの構造によく似ています。たとえば、HTMLドキュメントから取得した次のテーブルについて考えてみます。
| シェイディーグローブ | エオリア旋法 |
| 川を越えて、チャーリー | ドリアン |
HTMLDOMではないもの
このセクションは、ドキュメントオブジェクトモデルを、そのように見える他のシステムと区別することにより、より正確に理解できるように設計されています。
ドキュメントオブジェクトモデルはダイナミックHTMLの影響を強く受けましたが、レベル1では、ダイナミックHTMLのすべてを実装しているわけではありません。特に、イベントはまだ定義されていません。レベル1は、ドキュメント自体の堅牢で柔軟なモデルを提供することにより、この種の機能の強固な基盤を築くように設計されています。
ドキュメントオブジェクトモデルはバイナリ仕様ではありません。同じ言語で記述されたドキュメントオブジェクトモデルプログラムは、プラットフォーム間でソースコードと互換性がありますが、ドキュメントオブジェクトモデルは、バイナリの相互運用性を定義していません。
ドキュメントオブジェクトモデルは、オブジェクトをXMLまたはHTMLに永続化する方法ではありません。ドキュメントオブジェクトモデルは、オブジェクトをXMLで表現する方法を指定する代わりに、XMLおよびHTMLドキュメントをオブジェクトとして表現する方法を指定して、オブジェクト指向プログラムで使用できるようにします。
ドキュメントオブジェクトモデルはデータ構造のセットではなく、インターフェイスを指定するオブジェクトモデルです。このドキュメントには親子関係を示す図が含まれていますが、これらはプログラミングインターフェイスによって定義された論理関係であり、特定の内部データ構造の表現ではありません。
ドキュメントオブジェクトモデルは、XMLまたはHTMLの「真の内部セマンティクス」を定義していません。これらの言語のセマンティクスは、言語自体によって定義されます。
Document Object Modelは、これらのセマンティクスを尊重するように設計されたプログラミングモデルです。ドキュメントオブジェクトモデルには、XMLおよびHTMLドキュメントの記述方法に影響はありません。これらの言語で記述できるドキュメントは、ドキュメントオブジェクトモデルで表すことができます。
ドキュメントオブジェクトモデルは、その名前にもかかわらず、コンポーネントオブジェクトモデル（COM）の競合製品ではありません。 COMは、CORBAと同様に、インターフェイスとオブジェクトを指定するための言語に依存しない方法です。ドキュメントオブジェクトモデルは、HTMLおよびXMLドキュメントを管理するために設計されたインターフェイスとオブジェクトのセットです。 DOMはCOMやCORBAなどの言語に依存しないシステムを使用して実装され、このドキュメントで指定されているJavaやECMAScriptバインディングなどの言語固有のバインディングを使用して実装される場合もあります。
Javaでデッドロックを回避する方法
ドキュメントオブジェクトモデルの出所
ドキュメントオブジェクトモデルは、JavaScriptスクリプトとJavaプログラムをWebブラウザ間で移植できるようにするための仕様として生まれました。ダイナミックHTMLは、ドキュメントオブジェクトモデルの直接の祖先であり、当初は主にブラウザの観点から考えられていました。
ただし、ドキュメントオブジェクトモデルワーキンググループが結成されたとき、HTMLまたはXMLエディタやドキュメントリポジトリなど、他のドメインのベンダーも参加しました。これらのベンダーのいくつかは、結果としてXMLが開発される前にSGMLを使用していました。その結果、ドキュメントオブジェクトモデルはSGMLGrovesとHyTime標準の影響を受けました。これらのベンダーの一部は、提供するためにドキュメント用の独自のオブジェクトモデルも開発していました。SGML / XMLエディターまたはドキュメントリポジトリ用のプログラミングAPI。これらのオブジェクトモデルは、ドキュメントオブジェクトモデルにも影響を与えています。
HTMLDOMのプロパティ
ドキュメントオブジェクトからアクセスおよび変更できるドキュメントオブジェクトのプロパティを見てみましょう。
- ウィンドウオブジェクト： ウィンドウオブジェクトは常に階層の最上位にあります。
- ドキュメントオブジェクト： HTMLドキュメントがウィンドウに読み込まれると、ドキュメントオブジェクトになります。
- フォームオブジェクト： それはによって表されます 形 タグ。
- リンクオブジェクト： それはによって表されます リンク タグ。
- アンカーオブジェクト： それはによって表されます a href タグ。
- フォーム制御要素： フォームには、テキストフィールド、ボタン、ラジオボタン、チェックボックスなどの多くの制御要素を含めることができます。
メソッド ドキュメントオブジェクトの ：
- write（“ string”）： 指定された文字列をドキュメントに書き込みます。
- getElementById（）： 指定されたID値を持つ要素を返します。
- getElementsByName（）： 指定された名前の値を持つすべての要素を返します。
- getElementsByTagName（）： 指定されたタグ名を持つすべての要素を返します。
- getElementsByClassName（）： 指定されたクラス名を持つすべての要素を返します。
HTML要素の検索
JavaScriptを使用してHTML要素にアクセスする場合は、最初に要素を見つける必要があります。
これを行うには、いくつかの方法があります。
- IDによるHTML要素の検索
- タグ名によるHTML要素の検索
- クラス名によるHTML要素の検索
IDによるHTML要素の検索
Javaの例でのスレッド同期
DOMでHTML要素を見つける最も簡単な方法は、要素IDを使用することです。
例
タグ名によるHTML要素の検索
この例では、id =” main”の要素を検索してから、すべてを検索します
「メイン」内の要素：
これで、このHTMLDOMの記事は終わりです。 HTML DOM、ドキュメントオブジェクトモデルのさまざまな側面を理解していただければ幸いです。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「HTMLImages」ブログのコメント欄にその旨をお伝えいただければ、折り返しご連絡いたします。