DOMについて

DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。

Element
Element は Document の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが Element を継承します。例えば HTML 要素には HTMLElement インターフェイス、SVG 要素には SVGElement インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。

Kakedashi

Element は、親インターフェスである Node、およびその親インターフェイスである EventTarget からプロパティを継承します。

Kakedashi

lib.dom.d.tsみたら色々型定義が書いてあってわかりやすい

Kakedashi

Windowのinterfaceにdocumentやhistoryなどがある。
Devtoolのconsoleでthisはwindowになっている

Kakedashi

DOM の Node インターフェイスは、他の多くの DOM API オブジェクトのベースとなる抽象的な基底クラスです。したがって、これらのオブジェクト型と類似しており、しばしば交換して使用することができます。抽象クラスであるため、単なる Node オブジェクトというものは存在しません。

Kakedashi

interface Node extends EventTarget {
...

Kakedashi

ホワイトスペースは HTML、 CSS、そして DOM 内でどう扱われるか

Kakedashi

元の文書で HTML 要素の外にあるホワイトスペースはすべて DOM で表現されます

Kakedashi

Window
Window インターフェイスは、 DOM 文書を収めるウィンドウを表します。 document プロパティは、そのウィンドウに読み込まれた DOM の document オブジェクトを指します。特定の文書が属するウィンドウは、 document.defaultView プロパティを使用して取得できます。

タブブラウザーでは、それぞれのタブが個々の Window オブジェクトで表されます。タブ内で実行している JavaScript から見えるグローバルの window は、常にコードを実行しているタブを表します。しかし、タブブラウザーであっても resizeTo() や innerHeight のように、タブを含むウィンドウ全体に適用されるプロパティやメソッドがあります。一般に、タブに所属することができない合理的な理由があるものは、代わりにウィンドウに属します。

Kakedashi