HTML DOM
1. HTML Document Object Model
HTML DOM（HTML Document Object Model）は、HTMLドキュメントのためのオブジェクトモデルです。
HTML DOMは、HTMLページを表現するノード（Node）のツリー構造になっています。
2. DOMツリー
ウェブページがロードされる際、ブラウザはHTMLドキュメントをツリー状に表現したものを生成します。
ドキュメントの各パーツは、ツリー内のノードとなります。
| ノード | 説明 |
|---|---|
| Document | ドキュメント内のすべてのノードのオーナー |
<html> | ルートエレメントノード |
<head> | エレメントノード |
<body> | エレメントノード |
<a> | エレメントノード |
| href | アトリビュートノード |
<h1> | エレメントノード |
| My Header | テキストノード |
3. HTML要素へのアクセス
HTML DOMを使用して、HTML要素（エレメント）にアクセスすることができます。
HTML要素にアクセスする最も一般的な方法は、要素の id を使用することです。
コード例
<html>
<body>
<p id="demo"></p>
<script>
// パラグラフ（段落）要素にアクセス
const myPara = document.getElementById("demo");
// 要素のコンテンツを変更
myPara.innerHTML = "こんにちは、世界！";
</script>
</body>
</html>上記の例では、getElementById メソッドが id="demo" を使用して要素を見つけています。
id="demo"は HTMLプロパティ です。getElementById()は DOMメソッド です。innerHTMLは DOMプロパティ です。
4. 本チュートリアルで学べること
今後のチャプターでは、以下の内容について学習します。
- HTML要素のコンテンツを変更する方法
- HTML要素のスタイル（CSS）を変更する方法
- HTML要素を追加・削除する方法
- HTML要素からのイベントに反応する方法
5. W3C（World Wide Web Consortium）
DOMは W3C標準（World Wide Web Consortium）です。
「W3C Document Object Model（DOM）は、プログラムやスクリプトがドキュメントのコンテンツ、構造、スタイルに動的にアクセスし、更新することを可能にする、プラットフォームおよび言語に依存しないインターフェースである。」
W3C DOM標準は、以下の3つの異なるパートに分かれています。
- Core DOM - すべてのドキュメントタイプのための標準モデル
- XML DOM - XMLドキュメントのための標準モデル
- HTML DOM - HTMLドキュメントのための標準モデル
HTML DOM は、W3CおよびWHATWGによって策定された、言語に依存しない標準規格です。