【JavaScript / DOM】DOM入門 - HTML要素のプログラム制御

JavaScriptのDOMを解説します。

DOM

DOMの正式名称は『Document Object Model』です。
WEBドキュメント（HTMLやXMLなど）をオブジェクトデータとして扱うインターフェースになります。
※ インターフェースはソフトフェア等を繋げるための接点のイメージです。

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

ノード

ノードはHTMLドキュメントの要素を示します。
HTML要素を要素ノード、テキストをテキストノードと呼びます。

DOMは基本的にノード単位で操作します。

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

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

Documentオブジェクト

DocumentオブジェクトはWEBドキュメントを示すオブジェクトです。
HTMLドキュメントをDOM構造で管理し、DOM操作の起点となります。

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

ソースコード

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

プレビュー

Console

#document

サンプル

次のコードはDOMで実現できることの一例です。
id属性値がtitleの要素を取得し、そのテキストをコンソールに出力ます。

ソースコード

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

プレビュー

Console

JavaScriptとは

変数documentを起点にgetElementById("title")で要素ノードを取得しています。
また、ノードのtextContentプロパティはノードのテキストです。

DOMは他にも様々な機能があり、要素・ノードの操作を実現します。

情報量が多いため、本ドキュメントでは、DOMの概要に留めます
※ 他の仕様については別途解説します。