コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

DOMそのものが備えるプロパティやメソッドの調べかた

いわゆる普通のプログラミングにおけるクラスメソッド、インスタンスメソッド、プロパティにあたるものを調べたいときにどうやって調べるのかさらっとまとめmした。

前提

DOMのメソッドとプロパティはInterfeceで決まる。

DOMが備えるメソッドやプロパティはInterface(Data type)によって決まる。

例えばよく使う documentHTMLDocument Interfaceを備えたDOM、bodyなどにぶら下がる <div> タグのDOMは HTMLDivElement Interfaceを備えたDOMとなる。

Interfaceは継承できる。

またこのInterfaceは単一継承ができる関係にあるため、親にあたるInterfaceのメソッドやプロパティを引き継ぐ。前例の HTMLDivElementElement を継承し、ElementNode を継承し…という形で継承し、HTMLDivElementはNodeのメソッドやプロパティを備える。

なおすべてのInterfaceは EventTarget Interfaceを継承するので、そこから分岐する形で継承する関係にある。

調べ方

調べ方はシンプルで以下の通り

  1. 対象のDOMのInterfeceを調べる
  2. Interfece名からプロパティとメソッドの定義を調べる

対象のDOMのInterfeceを調べる

これは Object.getPrototypeOf() のstaticメソッドを使うことで調べることができる。例えばdocumentは以下のように調べることができる。

// document の直下は <html> のDOMが取得できる
Object.getPrototypeOf(document.firstElementChild)

f:id:shinkufencer:20211002231741p:plain
consoleで実行した結果

上記の様にhtmlタグに設定される HTMLHtmlElement があたる

Interfece名からプロパティとメソッドの定義を調べる

Interfeceが何のプロパティとメソッドを備えているかは WHATWGのDOMのページなどにも定義があるが、日本語文献だとMDNのページが一番わかりやすくかかれているのでMDN内で検索して確認すると調べやすい。indexとしては以下のページがある。

ドキュメントオブジェクトモデル (DOM) - Web API | MDN

参考リンク