【初心者向け】DOMをわかりやすく解説

■こんなお悩みに

結論

• DOMの役割はWEBページとプログラミング言語を繋ぐこと
• DOMとはHTMLの要素を操作する仕組み
• DOMは「階層構造」になっている

この記事では、DOMの理解が0→1になるポイントを3つ紹介して、サンプルもご紹介します。読み終えるとDOMについての理解のベースができあがりますよ＾＾

DOMの役割はWEBページとプログラミング言語を繋ぐこと

最初から文書でダラダラ説明するより、実際に触れてもらったほうが理解が深るので簡単なサンプルを用意しました。

DOMとはどのように使われているのか、下記をご覧ください。

どうでしょうか。クリックをすると文書が変更されましたよね。これが簡単なJavaScriptを利用したDOM操作のうちのひとつです。

上記を踏まえて、DOMとは何なのかを解説していきます。

DOMとはHTMLの要素を操作する仕組み

ただのHTMLファイルではJavaScriptなどをつかって上記のように操作することができません。そこでファイルのところどころに目印を付けます。例えばとある文章があったとして、A、B、Cと目印を付けたとすると、「Aのとこだけ太文字にしたい」とか「Bのとこをクリックしたら隠れるようにしたい」などの処理ができるようになるのです。この「～したい」を叶えてくれるのがDOMなのです。

DOMは「階層構造」になっている

DOMの理解にはノードの存在を知ることが必須です。

では、ノードとは何でしょうか。

それは要素そのもののことです。HTMLではエレメントやタグと表現しますが、それ自体を「ノード」といいます。そして、あるノードを基準としたときに、周囲ノードは親子関係で表現されます。

実際に見てみましょう。下図をご覧ください。

例えば、<ul>というノードを基準としたとき、上にある<div>は「親ノード」、下にある<li>は「子ノード」と表現されるわけです。また<ul>には兄弟がいるので、下にある<ul>は「兄弟姉妹ノード」と表現します。

このようにDOMとういのは階層構造をとっているのです。

まとめ

以上「ノードとは」というテーマでしたが、いかがだったでしょうか。

本記事をもう一度まとめると

• DOMの役割はWEBページとプログラミング言語を繋ぐこと
• DOMとはHTMLの要素を操作する仕組み
• DOMは「階層構造」になっている

となります。

今回の記事がこれからの知識の積み上げのお役に立てれば幸いです。

では、また次回＾＾