生徒DOMやDOM要素というのがよくわかりません
先生DOMやDOM要素、ノードについて説明します
目次
JavaScriptではHTMLをDOMを扱う
JavaScriptでWEBページを操作したり表示を変更したりするには、DOMを理解する必要があります。
この記事では、DOMがどういったものかについて説明します。
DOMに付いて
DOM（Document Object Model）とは、HTMLのようなマークアップ言語を、ツリー構造のオブジェクトとして表現したものです。
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ツリー内のすべての要素の基底となる抽象クラスです。
DocumentやElement、コメントなど種類の違いはnodeTypeプロパティで定義されています。
MDN Web Docs
Node: nodeType プロパティ – Web API | MDN
nodeType は Node インターフェイスの読み取り専用プロパティであり、整数値でこのノードが何であるかを識別します。これは様々なノードの種類、例えば elements、text、co…
すべての要素がNodeクラスを継承しているので、共通してNodeクラスの以下のようなプロパティや関数を持っています。
| 関数 | 説明 |
|---|---|
| childNodes | すべての子孫のリストを返します。 |
| appendChild() | 引数を現在のノードの最後の子として追加します。 |
| contains() | 指定したノードの子孫であるか否かを返します。 |
JavaScript
// DocumentからDOMエレメントを取得する
const list = document.getElementsByTagName('ul');
// Domエレメントの最初の子Nodeを取得する
const firstNode = list[0].firstChild.nodeName;Element
Elementは、Nodeを具体化した、すべてのオブジェクトが継承する基底クラスです。
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: 'メッセージ' }));