---
description: document object model
---

# DOM

[JS](../js) ⟩ [browser]() ⟩ [DOM](dom) ⟩&#x20;

{% tabs %}
{% tab title="🔴 主題" %}
* [querying-elements](dom/querying-elements "mention")
* [hierarchy](dom/hierarchy "mention")
* [shadow-dom](../component/shadow-dom "mention")
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}
* The <mark style="color:yellow;">**Document Object Model**</mark> (<mark style="color:orange;">**DOM**</mark>) is a programming interface implemented by **browsers** in order to make static websites functional.
* [**TypeScript**](../appendix/typescript) is a typed superset of [JavaScript](../js), and it ships **type definitions** for the **DOM** API.
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}
* replit ⟩ [DOM: node elements](https://replit.com/@pegasusroe/DOM-node-elements#script.js)
* [objects-to-html-table](../js/val/builtin/arr/ex/objects-to-html-table "mention") - array of objects to HTMLTableElement.
{% endtab %}

{% tab title="📘 手冊" %}
* [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) ⭐️
* [DOM interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#dom_interfaces) ⭐️
* 📘 TypeScript: [DOM Manipulation](https://www.typescriptlang.org/docs/handbook/dom-manipulation.html)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩ [DOM tree](https://javascript.info/dom-nodes)
* [ ] Eloquent JS ⟩ [The Document Object Model](https://eloquentjavascript.net/14_dom.html)
* [ ] source code for the [DOM type definitions](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts) ⭐️
* [ ] MakeUseOf ⟩[ How to Traverse the DOM Using JavaScript](https://www.makeuseof.com/dom-javascript-traverse/)
{% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="https://youtu.be/5fb2aPlgoys" %}
{% endtab %}
{% endtabs %}
