javascript

【javascript】DOMの基礎知識について初心者向けに徹底解説!

dom

 

DOMとは、ウェブページの内容をツリー状に構造化して操作可能にしたものです。

 

HTMLなどの階層構造を持つ文書が、ブラウザに読み込まれると、内部では、このDOMというツリー構造」に変換されて、画面に表示されます。

javascriptではこのDOMを利用することで、

  • Webページの、テキストの書き換え追加削除
  • 色や大きさなどのスタイルの変更
  • その他の色々な処理

を行うことができます。

 

この記事では

DOMについての知識や、DOM操作を学ぶ前に知っておくべき基本知識を、イラストを交えて解説していきます。

 

ぜひ一緒に楽しく学ぼう!

目次

DOMの前提知識オブジェクトブラウザオブジェクトインターフェース

DOMとは?DocumentObjectModelDocumentオブジェクトノード

 📖目次に戻る

DOMの前提知識

まずは、DOMを理解する上で、知っておくべき用語を順番に解説します。

そんなの知ってるよ、って人は読み飛ばしてね。

 📖目次に戻る

オブジェクト

オブジェクトとは、キー (名前) がペアになったデータの集まりのことです。

 

プロパティ

「キー」「値」のペアを プロパティ と言い、このプロパティによってオブジェクトの特徴や状態を表します。

例えば、2つのプロパティを持つ人物データをオブジェクトで表現すると次のようになります。

年齢が「3才」で、名前が「ナビ」という特徴を持つオブジェクトが完成しました。

また、プロパティの値には数字文字以外にも、実行命令をまとめた「関数」が入っていることがあります。

 

メソッド

関数が入ったプロパティのことを「メソッド」と言い、オブジェクトの動きを表します。

 

では、先ほどの人物データにメソッドも入れた状態のオブジェクトを作ってみましょう。

年齢と名前の他に、呼び出すだけでコンソールに「こんにちは」と表示する動きを持ったオブジェクトが完成しました。

 

呼び出し方

オブジェクトの特徴を表示させたり、オブジェクトを動かすためには、以下の方法で「プロパティ」「メソッド」を呼び出す必要があります。

 

では、実際に呼び出してみましょう。

 </>javascript

const person = { age:5, name: 'ナビ',  hello:function(){ console.log('こんにちは'); } }; console.log( person.name );  // ナビ person.hello();  // こんにちは

プロパティと、メソッドの実行結果がコンソールに表示されていますね。

 

ちなみに、以下のコードで「nameプロパティ」を呼び出し、

console.log( person.name );

以下のコードで「helloメソッド」を呼び出しています。

person.hello ();

 📖目次に戻る

ブラウザオブジェクト

ブラウザとは、「Chrome」「Microsoft Edge」「Safari」「Firefox」などの、インターネットに接続してWebページを表示するためのソフトのことです。

 

この画面も、この内のどれかのブラウザを使って見ているんじゃないかな。

そして各ブラウザには、ブラウザを操作できるオブジェクトが用意されています。

これを「ブラウザオブジェクト」と言い、「Windowオブジェクト」を頂点とした階層構造になっています。

 

各ブラウザオブジェクトには、ブラウザを操作する場所や用途に応じた「プロパティ」「メソッド」が用意されています。

そして、ブラウザを操作する場合は、

といった具合に、各ブラウザオブジェクト「プロパティ」メソッド」アクセスして行います。

 📖目次に戻る

インターフェース

インターフェース(interface)とは、直訳すると「接点」や、「接触面」といった意味があります。

ITの世界では、異なる「機器同士」「コンピューターと人」「コンピューターとプログラム」などを繋ぐ共有部分規格仕様 のことを指します。

規格はみんなで決めた標準のことで、仕様は機械の構造や内容のことだよ。

 

「機器同士」を繋ぐインターフェースとしては、次のようなものがあります。

  • 「USBHDMIプリンターHDD」などのハードウェアそのもの
  • そのコネクターの形状の「規格」「仕様」
  • 「送受信の約束事」

これらハードウェア同士を繋ぐもの「ハードウェアインターフェース」と言います。

 

「コンピューター」「人」を繋ぐインターフェースとしては、次のようなものがあります。

  • コンピューターを操作するためのキーボードやマウスなどの「操作機器」
  • 何かを検索する際に使用する検索窓などの「操作する手段」「操作性」
  • HPのデザインやレイアウト、フォントなど「表示方法」

これらコンピューターと人の接点のすべてを、「ユーザーインターフェース(UI)」と言います。

 

最後に、「コンピューター」「プログラム」を繋ぐインターフェースとして「API」などがあります。

APIとは、アプリケーションプログラミングインターフェースの略で、その名の通り、アプリケーションプログラム繋ぐものです。

例として、twitterfacebookGoogleマップなどから発行されたURLがあります。

この「発行されたURL」を自分のホームページに貼り付けることで、twitterFacebookのタイムラインや、Googleマップを埋め込むことができると言うわけです。

これはつまり、API (発行されたURL)を介して、twitterやFacebook、Googleマップのアプリケーションと、自分の作ったプログラム(ホームページ)繋いでいると言えるでしょう。

 

ちなみに、これらアプリケーション同士や、コンピューターとプログラムを繋ぐものを、「ソフトウェアインターフェース」と言います。

 

ここまでお読みいただくとわかる通り、インターフェースという言葉は、物理的・抽象的な広い意味合いで使われます。

ものすごく簡単に「何か」「何か」繋ぐもの、と捉えておくと理解しやすいかもしれません。

 

 

これでDOMを知る準備はバッチリだ!

 📖目次に戻る

DOMとは?

冒頭ではDOMのことを、

Webページの内容をツリー状に構造化して操作可能にしたもの 

と説明しましたが、ここでは前項のDOMの前提知識を踏まえて、DOMについてもう少し詳しく説明します。

 📖目次に戻る

Document Object Model

DOMとは、ドキュメント(Document)オブジェクト(Object)モデル(Model)の略で、

その名の通り、HTMLなどのドキュメント」をツリー状の「オブジェクト」の集まりで表現し、操作可能にしたものです。

 

ツリー状の「オブジェクト」の集まりを「DOMツリー」って言うよ。

 

この仕組みにより、HTMLドキュメントとJavascriptを繋ぐため、DOMは「API」「インターフェース」と表現されることがあります。

そして、このDOMツリーには「Documentオブジェクト」からアクセスすることができます。

 📖目次に戻る

Documentオブジェクト

DocumentオブジェクトとはWindowオブジェクトの配下にあるブラウザオブジェクトで、ドキュメント(文書)操作することができるオブジェクトです。

この「Documentオブジェクト」は、「Windowオブジェクト」「documentプロパティ」として定義されているため、

window.document

または、「window」を省略して

document

と記述することで使用することができます。

 

DOM操作は、このdocumentオブジェクトを利用して、DOMツリーの各オブジェクトにアクセスすることで行います。

 📖目次に戻る

ノード

DOMツリーの各オブジェクトのことを「ノード」と言います。

ノードの実態は、「Nodeオブジェクト」です。

Nodeオブジェクトには、DOMツリーを検索したり操作するためのプロパティメソッドが用意されており、

DOMツリーの各オブジェクトは、全てこのNodeを継承しています。

 

継承とは、簡単に言うと能力を引き継ぐってことだよ。

 

そしてこのノードは、オブジェクトの種類に応じて次のように分けることができます。

例えば次のようなHTMLがあった場合、

以下のようなDOMツリーで表すことができます。

あるノードに対してすぐ上のノードは、そのノードの「親ノード」すぐ下のノード「子ノード」、同じ親を持ち同じレベルにあるノード「兄弟ノード」と言います。

 

この考え方は、DOM操作をする上で重要になってくるよ。

 

例えば、DOMツリーを探索したい場合は次のようなプロパティを利用します。

 

先ほどのDOMツリーの「p要素」は、次のコードで呼び出すことができます。

console.log(document.lastChild.lastChild.childNodes[1]);

 

次の図をご覧ください。

documentから、最後の子ノード「html」の最後の子ノード「body」の、さらに2番目の子ノード「p」にアクセスしてるのがわかると思います。

 

なので、「title」にアクセスしたい場合は、

console.log(document.lastChild.firstChild.childNodes[1]);

のように記述します。

 

これで何となくでもDOMについて理解してくれたかな。

📖目次に戻る

最後に

いかがでしたでしょうか、今回はjavascriptの基本である「DOM」の基本知識を中心に解説しました。

さらに詳しい解説や、DOM操作については別の記事で解説します。

javascriptについてもっと詳しく学習したい方は、下の記事一覧から他の記事もご覧下さい。

Javascript

 

続きを見る

最後まで読んでいただき、ありがとうございました!

-javascript