HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

ドキュメントオブジェクトモデル（DOM）とは？基本概念と階層構造を解説

ドキュメントオブジェクトモデル（DOM）とは

Document オブジェクトは、ウィンドウに表示されている HTML ドキュメントを表すものです。この Document オブジェクトは、他のオブジェクトを参照するさまざまなプロパティを持っており、それによってドキュメントの内容へのアクセスや変更が可能になります。

こうした「ドキュメントの内容にアクセスして変更するための仕組み」全体を、ドキュメントオブジェクトモデル（Document Object Model）、略して DOM と呼びます。DOM ではオブジェクトが階層構造で整理されており、Web ドキュメント内の各オブジェクトもこの階層構造に従って配置されます。

DOM の主要な階層構造

  • Window オブジェクト： 階層の最上位に位置する、オブジェクト階層における最上位の要素です。
  • Document オブジェクト： ウィンドウに読み込まれた各 HTML ドキュメントが Document オブジェクトになります。ページの内容全体を保持しています。
  • Form オブジェクト： <form>〜</form> タグで囲まれたすべての要素が、Form オブジェクトを構成します。
  • フォームコントロール要素： Form オブジェクトには、テキストフィールド、ボタン、ラジオボタン、チェックボックスなど、そのフォーム内で定義されたすべての要素が含まれます。
  1. HTML DOM Detailsオブジェクトの使い方をサンプルコード付きで解説

    HTML DOMのDetailsオブジェクトは、HTMLの<details>要素に関連付けられたオブジェクトです。<details>要素を活用することで、ユーザーがクリックして開いたときにだけ内容が表示される、折りたたみ可能な情報ブロックを作成できます。FAQや補足説明など、ページをすっきりと見せたい場面で活躍します。DetailsオブジェクトのプロパティDetailsオブジェクトには、次のプロパティが用意されています。番号プロパティと説明1opendetailsの内容をユーザーに表示するかどうかを設定、または取得します。openプロパティの使い方openプロパティにt

  2. HTML DOM Textareaオブジェクトとは？作成方法からプロパティ・メソッドまで徹底解説

    HTML DOM の Textarea オブジェクトは、HTMLドキュメント内の <textarea> 要素を JavaScript から操作するためのインターフェースです。このオブジェクトを使うことで、複数行テキスト入力欄の値の取得・変更や、表示サイズの調整などが動的に行えます。 Textareaオブジェクトの作成方法 新しい Textarea オブジェクトを作成するには、document.createElement() メソッドを使用します。 構文 document.createElement(TEXTAREA); この構文を実行すると、まだページには追加されていない新しい t