【JavaScript / DOM】DOM入門 - HTMLドキュメントのプログラム制御

JavaScriptのDOMについて解説します。

DOM

DOMの正式名称は『Document Object Model』です。

WEBドキュメント（HTMLやXMLなど）をオブジェクトデータとして扱うインターフェースになります。

※ インターフェースはソフトフェア等を繋げるための接点（窓口）のイメージです。

JavaScriptのDOMはHTMLやXMLなどのマークアップドキュメントの操作を行えます。

ノード

ノードはHTMLドキュメントの１つ１つの構成部分を示します。

ノードには種類があり、主なノードは次の通りです。

JavaScript/DOMはノードをオブジェクトとして扱います。

また、ノードはHTMLドキュメントの要素の関係性に沿って階層的に親子関係を持ちます。

【HTML】要素の関係性 - 親子孫関係・兄弟関係

ドキュメントノード

ドキュメントノードは“WEBドキュメントを表すノード”です。

JavaScript/DOMではドキュメントノードはDocumentオブジェクトとして扱います。

一般的なブラウザではWEBページを読み込むと、自動で変数documentにDocumentオブジェクトを格納します。

<script type="text/javascript">
    console.log(document);
</script>

#document

DocumentオブジェクトはDOMの起点となるオブジェクトで、ノードの検索（取得）など様々なメソッドを持ちます。

サンプル

JavaScript/DOMは様々なHTMLドキュメントの操作を実現します。

例えば、id属性がtitleの要素ノードのテキストを取得するサンプルコードは次のようになります。

<h1 id="title">JavaScriptとは</h1>
<p>
    JavaScriptはプログラミング言語の１つです。<br>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</p>
<script type="text/javascript">
    ___ih_hl_start
    let title = document.getElementById("title");
    console.log(title.textContent);
    ___ih_hl_end
</script>

JavaScriptとは

要素ノードの取得は７行目のdocument.getElementById("title")です。

Documentオブジェクト（変数document）のgetElementByIdメソッドは実引数で与えた値と同じid属性値を持つ要素ノードを取得します。

８行目のtextContentプロパティは要素ノードのテキストを格納するプロパティです。

DOMは様々なノードを操作する機能を提供しています。

ここではDOMの概要に留めますが、他のDOMの仕様や機能についても別ドキュメントで解説しておりますのでご活用ください。