# Element

[browser](../..) ⟩ [DOM](..) ⟩ [type]() ⟩ Element

{% tabs %}
{% tab title="🔸 屬性" %}
* instance properties
  * [parentNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode) ([Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)) - defined in [node](node "mention")
  * [children](https://developer.mozilla.org/en-US/docs/Web/API/Element/children) ([HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection)) - includes only [element](element "mention") nodes.
  * [childElementCount](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount) (Number) - <mark style="color:blue;">`=== children.length`</mark>.
  * [firstElementChild](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild) ([Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | <mark style="color:orange;">**null**</mark>)
  * [lastElementChild](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild) ([Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | <mark style="color:orange;">**null**</mark>)
  * [nextElementSibling](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling) ([Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | <mark style="color:orange;">**null**</mark>)
  * [previousElementSibling](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling) ([Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | <mark style="color:orange;">**null**</mark>)
* custom methods
  * [elem.isinside](element/+ext/elem.isinside "mention")
  * [elem.isheading](element/+ext/elem.isheading "mention")
  * [.attr](element/+ext/.attr "mention")
  * [.styleprop](element/+ext/.styleprop "mention")
  * [.showdataattr](element/+ext/.showdataattr "mention")
{% endtab %}

{% tab title="🗺️ 圖解" %}


<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2Fk6BgajgR2fG4x1A7Gwqz%2Ffile.drawing.svg?alt=media&#x26;token=850658d3-bd27-4ef4-a58c-7dc42880ca18" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="🔴 主題" %}
* [attribute](element/attribute "mention")
* [+ext](element/+ext "mention")
* [content](element/content "mention")
* size & position
  * [coordinates](../../concepts/coordinates "mention")
  * [boxes](element/boxes "mention")
  * [bounding](element/+boxes/bounding "mention")
  * [scroll](element/+boxes/scroll "mention")
  * element [padding](element/+boxes/padding "mention")
  * [scroll](window/scroll "mention")
* [..](.. "mention") manipulation
  * [querying-elements](../querying-elements "mention")
  * [create-insert-delete-nodes](../create-insert-delete-nodes "mention")
  * [str.htmltoelement](../../../js/val/prim/str/method/str.htmltoelement "mention")
* [doc.elementfrompoint](document/methods/doc.elementfrompoint "mention")
{% endtab %}

{% tab title="📘 手冊" %}
* MDN ⟩ [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) ⟩ [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) ⟩ [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
* [Document.documentElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement) - <mark style="color:blue;">`<html>`</mark> element.
{% endtab %}

{% tab title="👥 相關" %}
* [node](node "mention") - super class.
* [traversing-dom](../traversing-dom "mention")
* [html](../../../html "mention") ⟩ [element](../../../html/element "mention")
{% endtab %}
{% endtabs %}
