Javascript-html-dom

提供:Dev Guides
移動先:案内検索

JavaScript-ドキュメントオブジェクトモデルまたはDOM

すべてのWebページは、オブジェクトと見なすことができるブラウザーウィンドウ内にあります。

Documentオブジェクトは、そのウィンドウに表示されるHTMLドキュメントを表します。 Documentオブジェクトには、ドキュメントコンテンツへのアクセスとドキュメントコンテンツの変更を許可する他のオブジェクトを参照するさまざまなプロパティがあります。

ドキュメントのコンテンツにアクセスして変更する方法は、ドキュメントオブジェクトモデル*または *DOM と呼ばれます。 オブジェクトは階層構造になっています。 この階層構造は、Webドキュメント内のオブジェクトの組織に適用されます。

  • ウィンドウオブジェクト-階層のトップ。 オブジェクト階層の最も外側の要素です。
  • ドキュメントオブジェクト-ウィンドウにロードされる各HTMLドキュメントはドキュメントオブジェクトになります。 ドキュメントにはページのコンテンツが含まれています。
  • フォームオブジェクト-<form> …​ </form>タグで囲まれたすべてがフォームオブジェクトを設定します。
  • フォームコントロール要素-フォームオブジェクトには、テキストフィールド、ボタン、ラジオボタン、チェックボックスなど、そのオブジェクトに対して定義されたすべての要素が含まれます。

ここにいくつかの重要なオブジェクトの単純な階層があります-

HTML DOM

いくつかのDOMが存在します。 以下のセクションでは、これらの各DOMを詳細に説明し、それらを使用してドキュメントコンテンツにアクセスして変更する方法を説明します。

  • link:/javascript/javascript_legacy_dom [The Legacy DOM]-これは、JavaScript言語の初期バージョンで導入されたモデルです。 すべてのブラウザで十分にサポートされていますが、フォーム、フォーム要素、画像など、ドキュメントの特定の重要な部分にのみアクセスできます。
  • link:/javascript/javascript_w3c_dom [The W3C DOM]-このドキュメントオブジェクトモデルは、すべてのドキュメントコンテンツへのアクセスと変更を可能にし、World Wide Web Consortium(W3C)によって標準化されています。 このモデルは、ほとんどすべての最新ブラウザーでサポートされています。
  • link:/javascript/javascript_ie4_dom [The IE4 DOM]-このドキュメントオブジェクトモデルは、MicrosoftのInternet Explorerブラウザのバージョン4で導入されました。 IE 5以降のバージョンには、ほとんどの基本的なW3C DOM機能のサポートが含まれています。

DOMの互換性

可用性に応じてW3C DOMまたはIE 4 DOMのいずれかを使用する柔軟性を備えたスクリプトを作成する場合は、最初にメソッドまたはプロパティの存在を確認する機能テストアプローチを使用して、ブラウザーがあなたが望む能力。 たとえば-

if (document.getElementById) {
  //If the W3C method exists, use it
} else if (document.all) {
  //If the all[] array exists, use it
} else {
  //Otherwise use the legacy DOM
}