---
description: 🚧 under construction -> Event hierarchy
---

# DOM hierarchy

[JS](../../js) ⟩ [browser](..) ⟩ [DOM]() ⟩ hierarchy

{% tabs %}
{% tab title="🗺️ 圖解" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FSjZQGz1Xww1mozSnK0Ni%2Fdom.hierarchy.svg?alt=media&#x26;token=b3248ae8-2129-406d-a1f9-e66da29b0547" alt="DOM EventTarget hierarchy" class="gitbook-drawing">

![](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FAIpeUcSWjXmaiwpMB3No%2Fdom%20hierarchy.png?alt=media\&token=c2444e51-701a-4fb0-afc1-77bd653685b6)
{% endtab %}

{% tab title="🔴 主題" %}
* [event](../event "mention") ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ &#x20;
  * [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
* [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) ⟩&#x20;
  * [node](type/node "mention") ⟩&#x20;
    * [CharacterData](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData) ⟩ [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) ⟩ Comment
    * [documentfragment](type/documentfragment "mention") ⟩ [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)&#x20;
    * [element](type/element "mention") ⟩
      * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
      * [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)  ⟩
        * [HTMLTemplateElement](../../component/template)
        * [canvas](../canvas "mention") ([HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement))
{% endtab %}

{% tab title="💈範例" %}
* [DOM Hierarchy](https://dom-hierarchy.pegasusroe.repl.co/) (✏️ [replit](https://replit.com/@pegasusroe/DOM-Hierarchy#script.js)) ⭐️
* [\<expanding-list>](../../component/examples/expanding-list)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩ [DOM tree](https://javascript.info/dom-nodes)
* [ ] [HTML DOM Diagram, Coded Example and Explanation](https://mrvirk.com/html-dom-diagram-and-explanation.html)
{% endtab %}

{% tab title="📘 手冊" %}
* [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) ⭐️
* 📘 [DOMTokenList](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) ([elem.classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) 的類別)
{% endtab %}

{% tab title="🗣 討論" %}
* [Where can I find a complete description of JavaScript DOM class hierarchy?](https://stackoverflow.com/questions/55924114/where-can-i-find-a-complete-description-of-javascript-dom-class-hierarchy)
* [built in object hierarchy in javascript?](https://stackoverflow.com/questions/19891453/what-does-the-built-in-object-hierarchy-look-like-in-javascript)
* [DOM Inheritance structure](https://stackoverflow.com/questions/39344977/the-dom-inheritance-structure)
* 🗣 [DOMTokenList prototype](https://stackoverflow.com/questions/49241330/javascript-domtokenlist-prototype)
* 🗣 [Does \`DOMTokenList\` have any superclass?](https://stackoverflow.com/questions/69111634/does-domtokenlist-have-any-superclass)&#x20;
  * DOMTokenList is a [TypeScript interface](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#interfaces)❓
{% endtab %}

{% tab title="❓" %}
{% hint style="warning" %}
DOM 所定義的所有類別難不成都是 interface❓
{% endhint %}
{% endtab %}
{% endtabs %}

