HTML DOMとは何ですか？
HTML DOMは、HTMLのオブジェクトモデルです。それは定義します：
- オブジェクトとしてのHTML要素
- すべてのHTML要素の プロパティ
- すべてのHTML要素のメソッド
- すべてのHTML要素のイベント
HTML DOMは、JavaScriptのAPI（プログラミングインターフェイス）です。
- JavaScriptはHTML要素を追加/変更/削除できます
- JavaScriptはHTML属性を追加/変更/削除できます
- JavaScriptはCSSスタイルを追加/変更/削除できます
- JavaScriptはHTMLイベントに反応できます
- JavaScriptはHTMLイベントを追加/変更/削除できます
HTML DOM（ドキュメントオブジェクトモデル）
Webページがロードされると、ブラウザはページのドキュメントオブジェクトモデル を作成します。
HTML DOMモデルは、オブジェクトのツリーとして構築されます。
オブジェクトのHTMLDOMツリー
HTML要素の検索
JavaScriptを使用してHTML要素にアクセスする場合は、最初に要素を見つける必要があります。
これを行うには、いくつかの方法があります。
- IDによるHTML要素の検索
- タグ名によるHTML要素の検索
- クラス名によるHTML要素の検索
- CSSセレクターによるHTML要素の検索
- HTMLオブジェクトコレクションによるHTML要素の検索
IDによるHTML要素の検索
DOMでHTML要素を見つける最も簡単な方法は、要素IDを使用することです。
この例では、id = "intro"の要素を検索します。
例
var myElement = document.getElementById("intro");
要素が見つかった場合、メソッドはその要素をオブジェクトとして（myElement内に）返します。
要素が見つからない場合、myElementにはnullが含まれます。
タグ名によるHTML要素の検索
この例では、すべての<p>要素を検索します。
例
var x = document.getElementsByTagName("p");
この例では、id = "main"の要素を検索してから、 "main"内のすべての<p>要素を検索します。
例
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
クラス名によるHTML要素の検索
同じクラス名のすべてのHTML要素を検索する場合は、getElementsByClassName（）を使用します。
この例では、class = "intro"を持つすべての要素のリストを返します。
例
var x = document.getElementsByClassName("intro");
クラス名による要素の検索は、Internet Explorer8以前のバージョンでは機能しません。
CSSセレクターによるHTML要素の検索
指定されたCSSセレクター（ID、クラス名、タイプ、属性、属性の値など）に一致するすべてのHTML要素を検索する場合は、querySelectorAll（）メソッドを使用します。
この例では、class = "intro"を持つすべての<p>要素のリストを返します。
例
var x = document.querySelectorAll("p.intro");
querySelectorAll（）メソッドは、Internet Explorer8以前のバージョンでは機能しません。
HTMLオブジェクトコレクションによるHTML要素の検索
HTMLオブジェクトコレクションにもアクセスできます。
HTMLDOMチュートリアル
完全なHTMLDOMチュートリアル
これは、HTMLDOMの簡単な紹介です。
完全なHTMLDOMチュートリアルについては、W3SchoolsHTMLDOMチュートリアルにアクセスしてください。