【JavaScript】[DOM]について詳しく調べてみた。

  • 投稿日
  • 更新日
  • 著者 tanatiyo
  • カテゴリー JavaScript

以下、作業用メモです。

DOM（Document Object Model）は、HTMLやXML文書の構造を表現し、それに対するプログラム的なアクセスを提供するためのインターフェースです。DOMは、文書の構造をツリー構造として表現し、各要素や属性、テキストなどがノードとして扱われます。これにより、JavaScriptや他のプログラミング言語を使用して、文書の内容や構造に動的にアクセス・変更を行うことができます。

以下にDOMの基本的な概念や用語を説明します。

  1. ノード（Node）:
    DOMの基本単位で、文書内のすべての要素やテキストがノードとして扱われます。ノードにはさまざまな種類があり、主なものには要素ノード（Element Node）、テキストノード（Text Node）、属性ノード（Attribute Node）などがあります。
  2. 要素ノード（Element Node）:
    HTMLやXMLの要素は要素ノードとして表現されます。例えば、<div>や<p>などのHTML要素は、DOMにおいてそれぞれ個別の要素ノードとして扱われます。
  3. テキストノード（Text Node）:
    要素内のテキストはテキストノードとして表現されます。例えば、<p>Hello, World!</p>というHTML文書では、「Hello, World!」が<p>要素の子であるテキストノードです。
  4. 属性ノード（Attribute Node）:
    要素の属性は属性ノードとして表現されます。例えば、<img src="example.jpg" alt="Example Image">というHTML文書では、srcやaltが<img>要素の属性ノードです。
  5. DOMツリー（DOM Tree）:
    DOMはツリー構造として表現され、文書内の各要素やノードが階層的に配置されます。ルートノードは通常documentオブジェクトで、その下にHTML文書の構造がツリー状に展開されます。
   <!DOCTYPE html>
   <html>
     <head>
       <title>Example</title>
     </head>
     <body>
       <h1>Hello, World!</h1>
       <p>This is an example.</p>
     </body>
   </html>

上記のHTML文書に対するDOMツリーは次のようになります：

   document
   └── html
       ├── head
       │   └── title
       │       └── text ("Example")
       └── body
           ├── h1
           │   └── text ("Hello, World!")
           └── p
               └── text ("This is an example.")
  1. ドキュメントオブジェクト（Document Object）:
    ページ上のHTMLドキュメント全体を表すオブジェクトであり、通常documentとして参照されます。このオブジェクトを通じて、ページ内の要素にアクセスしたり、変更を加えたりすることができます。
   // documentオブジェクトを使って要素にアクセス
   const heading = document.getElementById('myHeading');
  1. セレクタ（Selector）:
    要素を特定するために使用される文字列。セレクタはCSSのセレクタと同様に、要素を一意に指定するために使用されます。例えば、#myHeadingはidがmyHeadingである要素を指定するセレクタです。
   // セレクタを使用して要素にアクセス
   const heading = document.querySelector('#myHeading');

DOMは、Webページの動的な構築やユーザーとの対話的な操作に不可欠な技術であり、JavaScriptや他のプログラミング言語を使用してDOMを操作することで、ページ上の要素やコンテンツを動的に変更することができます。

この記事を書いた人

tanatiyo

記事一覧