以下、作業用メモです。
DOM（Document Object Model）は、HTMLやXML文書の構造を表現し、それに対するプログラム的なアクセスを提供するためのインターフェースです。DOMは、文書の構造をツリー構造として表現し、各要素や属性、テキストなどがノードとして扱われます。これにより、JavaScriptや他のプログラミング言語を使用して、文書の内容や構造に動的にアクセス・変更を行うことができます。
以下にDOMの基本的な概念や用語を説明します。
- ノード（Node）:
DOMの基本単位で、文書内のすべての要素やテキストがノードとして扱われます。ノードにはさまざまな種類があり、主なものには要素ノード（Element Node）、テキストノード（Text Node）、属性ノード（Attribute Node）などがあります。 - 要素ノード（Element Node）:
HTMLやXMLの要素は要素ノードとして表現されます。例えば、<div>や<p>などのHTML要素は、DOMにおいてそれぞれ個別の要素ノードとして扱われます。 - テキストノード（Text Node）:
要素内のテキストはテキストノードとして表現されます。例えば、<p>Hello, World!</p>というHTML文書では、「Hello, World!」が<p>要素の子であるテキストノードです。 - 属性ノード（Attribute Node）:
要素の属性は属性ノードとして表現されます。例えば、<img src="example.jpg" alt="Example Image">というHTML文書では、srcやaltが<img>要素の属性ノードです。 - DOMツリー（DOM Tree）:
DOMはツリー構造として表現され、文書内の各要素やノードが階層的に配置されます。ルートノードは通常documentオブジェクトで、その下にHTML文書の構造がツリー状に展開されます。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <h1>Hello, World!</h1> <p>This is an example.</p> </body> </html> |
上記のHTML文書に対するDOMツリーは次のようになります：
|
1 2 3 4 5 6 7 8 9 10 |
document └── html ├── head │ └── title │ └── text ("Example") └── body ├── h1 │ └── text ("Hello, World!") └── p └── text ("This is an example.") |
- ドキュメントオブジェクト（Document Object）:
ページ上のHTMLドキュメント全体を表すオブジェクトであり、通常documentとして参照されます。このオブジェクトを通じて、ページ内の要素にアクセスしたり、変更を加えたりすることができます。
|
1 2 |
// documentオブジェクトを使って要素にアクセス const heading = document.getElementById('myHeading'); |
- セレクタ（Selector）:
要素を特定するために使用される文字列。セレクタはCSSのセレクタと同様に、要素を一意に指定するために使用されます。例えば、#myHeadingはidがmyHeadingである要素を指定するセレクタです。
|
1 2 |
// セレクタを使用して要素にアクセス const heading = document.querySelector('#myHeading'); |
DOMは、Webページの動的な構築やユーザーとの対話的な操作に不可欠な技術であり、JavaScriptや他のプログラミング言語を使用してDOMを操作することで、ページ上の要素やコンテンツを動的に変更することができます。
