🤖

DOM,Node,Elementについて

2023/03/06に公開

DOM とは

Document Object Model の頭文字からとったものである。
DOM はドキュメントオブジェクトモデルという名前の通り、 HTML や XML のドキュメントに含まれる要素や要素に含まれるテキストのデータをオブジェクトとして扱います。
ドキュメントをオブジェクトが階層的に組み合わされたものとして識別します。
DOM では JavaScript など色々なプログラミング言語などから、オブジェクトを扱うための API を提供しています。

勘違いされがちなのですが、DOM あ JavaScript の言語の一部ではないです。ブラウザの環境で使用できる WebAPI です。

DOM は JavaScript 言語の一部ではなく、ウェブサイトを構築するために使用される Web API の 1 つです。 JavaScript は他のコンテキストで使われることもあります。 例えば、 Node.js はコンピュータ上で JavaScript プログラムを実行しますが、異なる API のセットを提供しており、 DOM API は Node.js ランタイムのコア部分にはなりません。
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

Node とは

Node とは DOM ツリー(階層構造)を構成する一つの要素のことを言います。
抽象クラスであるため、単なる Node オブジェクトというものは存在しません。
Node の機能を実装しているオブジェクトはすべて、何れかのサブクラスに基づいています。
最も注目すべきものは、 Document, Element, DocumentFragment です。

nodeType は下記で確認してください。
https://developer.mozilla.org/ja/docs/Web/API/Node/nodeType

Element とは

Node の中の一つの種類です。

Element は Document が継承するオブジェクトの中にあるすべての要素オブジェクト(すなわち、要素を表現するオブジェクト)が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが Element を継承しています。
https://developer.mozilla.org/ja/docs/Web/API/Element

HTMLElement や SVGElement など要素に直接操作をするときに使用するオブジェクト

まとめ

DOM とは仕様みたいなもので、
Node は DOM ツリー(HTML などのドキュメントをオブジェクトの階層構造で表したもの)を構成するオブジェクトである
Element は Node の一種類である。

GitHubで編集を提案

Discussion