logo

TechCodeview

HTML DOM (ドキュメント オブジェクト モデル)

HTML DOM (ドキュメント オブジェクト モデル) HTML ドキュメントの階層表現です。これは、Web ページ上の要素の構造とプロパティを定義し、JavaScript がコンテンツに動的にアクセス、操作、更新できるようにし、対話性と機能性を強化します。

注記 : DOM はオブジェクト間の関係を指定しないため、論理構造と呼ばれます。

Javaの文字列のlen

目次



DOMとは何ですか?

ドム 、 または ドキュメントオブジェクトモデル 、次のような構造化ドキュメントを表すプログラミング インターフェイスです。 HTML そして XML オブジェクトのツリーとして。 JavaScript などのスクリプト言語を使用してドキュメント要素にアクセス、操作、および変更する方法を定義します。

したがって、基本的にドキュメント オブジェクト モデルは API HTML または XML ドキュメントを表現し、それらと対話します。

DOM は W3C (ワールドワイドウェブコンソーシアム) 標準 そしてドキュメントにアクセスするための標準を定義します。

W3C Dom 標準は 3 つの異なる部分に分かれています。

  • コアDOM – あらゆる種類の文書に対応する標準モデル
  • XML DOM – XMLドキュメントの標準モデル
  • HTML DOM – HTMLドキュメントの標準モデル

HTML DOM

HTML DOM は標準です オブジェクトモデル およびプログラミングインターフェイス HTMLドキュメント。 HTML DOM ウェブページを表現する方法です。 構造化された階層的な方法 これにより、プログラマやユーザーがドキュメントをスムーズに読み進めることができるようになります。

HTML DOM を使用すると、ドキュメント オブジェクトによって提供されるコマンドやメソッドを使用して、HTML のタグ、ID、クラス、属性、または要素に簡単にアクセスして操作できます。

DOM JavaScript を使用すると、Web ページの HTML および CSS にアクセスでき、HTML 要素の動作を変更することもできます。

JavaScriptで寝る

なぜ DOM が必要なのでしょうか?

HTML は次の目的で使用されます。 構造 ウェブページと JavaScript 追加するために使用されます 行動 当社のウェブページへ。 HTML ファイルがブラウザにロードされるとき、JavaScript は HTML ドキュメントを直接理解できません。したがって、HTML ドキュメントに基づいてブラウザによって作成されるドキュメント オブジェクト モデル (DOM) を解釈し、対話します。

DOM は基本的に同じ HTML ドキュメントをオブジェクトで構成されるツリー状の構造で表現したものです。 JavaScript は HTML ドキュメントの tags() を理解できませんが、DOM のオブジェクト h1 は理解できます。

JavaScript は DOM を簡単に解釈し、要素にアクセスして操作するためのブリッジとして使用します。 DOM Javascript では、さまざまな関数を使用して各オブジェクト (h1、p など) にアクセスできます。

ドキュメント オブジェクト モデル (DOM) は、次のような理由から Web 開発に不可欠です。

  • 動的 Web ページ: これを使用すると、動的な Web ページを作成できます。これにより、JavaScript がページのコンテンツ、構造、スタイルに動的にアクセスして操作できるようになり、ページ全体を再読み込みせずにコンテンツを更新したり、ユーザーのアクションに即座に応答したりするなど、インタラクティブで応答性の高い Web エクスペリエンスが実現します。
  • インタラクティブ性: DOM を使用すると、ユーザーのアクション (クリック、入力、スクロールなど) に応答し、それに応じて Web ページを変更できます。
  • コンテンツの更新: ページ全体を更新せずにコンテンツを更新したい場合、DOM を使用すると対象を絞った変更が可能になり、Web アプリケーションがより効率的でユーザーフレンドリーになります。
  • ブラウザ間の互換性: ブラウザーが異なれば、HTML と CSS は異なる方法でレンダリングされる場合があります。 DOM は、ページ要素を操作するための標準化された方法を提供します。
  • シングルページ アプリケーション (SPA): React や Angular などのフレームワークを使用して構築されたアプリケーションは、ページ全体を再読み込みすることなく単一の HTML ページ内のコンテンツを効率的にレンダリングおよび更新するために DOM に大きく依存しています。

DOMの構造

DOM は、ツリーまたはフォレスト (複数のツリー) と考えることができます。用語 構造モデル ドキュメントをツリー状に表現するために使用されることがあります。

ツリーの各ブランチはノードで終わり、各ノードにはオブジェクトが含まれます。イベント リスナーをノードに追加し、特定のイベントの発生時にトリガーできます。 DOM 構造モデルの重要なプロパティの 1 つは次のとおりです。 構造同型性 : 同じドキュメントの表現を作成するために 2 つの DOM 実装が使用される場合、それらはまったく同じオブジェクトと関係を持つ同じ構造モデルを作成します。

DOM がオブジェクト モデルと呼ばれるのはなぜですか?

ドキュメントはオブジェクトを使用してモデル化されます。モデルには、ドキュメントの構造だけでなく、HTML の属性を持つタグ要素のように、ドキュメントとドキュメントを構成するオブジェクトの動作も含まれます。

DOM のプロパティ

ドキュメント オブジェクトによってアクセスおよび変更できるドキュメント オブジェクトのプロパティを見てみましょう。

DOM フローチャートのプロパティ

DOM の表現

  • ウィンドウオブジェクト : Window オブジェクトは常に階層の最上位にあるブラウザのオブジェクトです。これは、ブラウザーのすべてのプロパティとメソッドを設定およびアクセスするために使用される API のようなものです。ブラウザによって自動的に作成されます。
  • ドキュメントオブジェクト: HTML ドキュメントがウィンドウにロードされると、ドキュメント オブジェクトになります。 「ドキュメント」オブジェクトには、Web ページのコンテンツへのアクセスとそのコンテンツの変更を可能にする他のオブジェクトを参照するさまざまなプロパティがあります。 HTML ページ内の要素にアクセスする必要がある場合は、常に「ドキュメント」オブジェクトにアクセスすることから始めます。 Document オブジェクトは window オブジェクトのプロパティです。
  • フォームオブジェクト: それは次のように表されます。 形状 タグ。
  • リンクオブジェクト : それは次のように表されます。 リンク タグ。
  • アンカーオブジェクト : それは次のように表されます。 ｈｒｅｆ タグ。
  • フォーム制御要素: フォームには、テキスト フィールド、ボタン、ラジオ ボタン、チェックボックスなど、多くのコントロール要素を含めることができます。

Document オブジェクトのメソッド

ドム は、ユーザーがドキュメントを操作したり操作したりできるようにするさまざまなメソッドを提供します。一般的に使用される DOM メソッドには次のようなものがあります。

方法説明
書く （弦）指定された文字列をドキュメントに書き込みます。
getElementById() 指定された ID 値を持つ要素を返します。
getElementsByName() 指定された名前の値を持つすべての要素を返します。
getElementsByTagName() 指定されたタグ名を持つすべての要素を返します。
getElementsByClassName() 指定されたクラス名を持つすべての要素を返します。

例： この例では、HTML 要素 ID を使用して DOM HTML 要素を検索します。

HTML 
    
techcodeview.comh2>
オタク向けのコンピューター サイエンス ポータル。 p>
この例は、 getElementByIdb> メソッド。 p>
p>