JavaScriptでHTMLを操作するためのDOMやDOMツーリーについて

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

DOMやDOM要素というのがよくわかりません

先生

DOMやDOM要素、ノードについて説明します

目次

JavaScriptではHTMLをDOMとして扱う

JavaScriptではWEBページをDOMとして扱うので、WEBページの操作や表示の変更には、DOMを理解する必要があります。

この記事では、DOMツリーやDOM要素について説明します。

この記事でわかること
  • DOMについて
  • DOMの主な構成要素について

DOMに付いて

DOM(Document Object Model)とは、HTMLのようなマークアップ言語を、ツリー構造のオブジェクトとして表現したものです。

この構成をDOMツリーといいます。

DOMはAPIを持っていて、JavaScriptなどのプログラム言語からAPIでアクセスしてデータを取得できます。

DOMツリーの主な構成要素

DOMのツリー構造の主な構成要素は以下になります。

  • Document(ドキュメント) ・・・ WEBページ全体
  • Node(ノード) ・・・ ツリーの各要素に共通する抽象クラス
  • Element(エレメント) ・・・ ツリーの各要素に共通する基本クラス

Document

Documentは、ブラウザに読み込まれているWEBページを表します。

WEBページ内の要素には、Documentを通してアクセスします。

JavaScript
// Documentのプロパティを取得
const url = document.location;
// WEBページ内の要素を取得
const paragraphs = document.querySelectorAll('p')

Node

NodeはDOMツリー内のすべての要素の基底となる抽象クラスです。

抽象クラスなので、実際のオブジェクトはDocumentElementなどのサブクラスになります。

DocumentElement、コメントなど種類の違いはnodeTypeプロパティで定義されています。

すべての要素がNodeクラスを継承しているので、共通してNodeクラスの以下のようなプロパティや関数を持っています。

関数説明
childNodesすべての子孫のリストを返します。
appendChild()引数を現在のノードの最後の子として追加します。
contains()指定したノードの子孫であるか否かを返します。
JavaScript
// DocumentからDOMエレメントを取得する
const list = document.getElementsByTagName('ul');
// Domエレメントの最初の子Nodeを取得する
const firstNode = list[0].firstChild.nodeName;

Element

Elementは、Nodeを具体化した、すべてのオブジェクトが継承する基底クラスです。

HTML要素の基本インターフェイスHTMLElementElementを継承しています。

Elementは以下のようなプロパティや関数、イベントを持っていて、継承したすべての要素でも使用できます。

関数説明
className要素のクラス名を返します。
querySelector()指定したセレクターに一致する最初の Node を返します。
keydownキーが押されたときに発行されるイベント。
JavaScript
// DOMエレメントを取得する
const element = document.getElementsByTagName("p");
const className = element[0].className;

EventTarget

イベントを受け取ったり、イベントを定義できるすべての要素が持つインターフェイスです。

DocumentやWEBページ内のすべての要素は、EventTargetインターフェイスを持ちます。

関数説明
addEventListener()イベントを定義。
removeEventListener()イベントを削除。
dispatchEvent()イベントを起こす。
JavaScript
// EventTargetを作成する
const events = new EventTarget()
// イベントリスナーを登録する
const eventListener = ({ type, detail }) => alert(detail);
events.addEventListener("カスタム", eventListener);
// イベントを送信する
events.dispatchEvent(new CustomEvent('カスタム', { detail: 'メッセージ' }));
よかったらシェアしてね!
  • URLをコピーしました!
目次