# Node

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

{% tabs %}
{% tab title="🗺️ 圖解" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FRU5GKuD5e3v6a3DSlRFS%2Ffile.drawing.svg?alt=media&#x26;token=6d2d2597-7d1b-43e6-a2a3-a933b076c71f" alt="" class="gitbook-drawing">
{% endtab %}

{% 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) | <mark style="color:orange;">**null**</mark>)
  * [parentElement](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement) ([Element](element) | <mark style="color:orange;">**null**</mark>)
  * [childNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) ([NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)) - <mark style="color:red;">**live**</mark> NodeList include [elements](element), <mark style="color:yellow;">**text**</mark> and <mark style="color:yellow;">**comments**</mark>.
  * [firstChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild) ([Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) | <mark style="color:orange;">**null**</mark>)
  * [lastChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild) ([Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) | <mark style="color:orange;">**null**</mark>)
  * [nextSibling](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling) ([Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) | <mark style="color:orange;">**null**</mark>)
  * [previousSibling](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling) ([Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) | <mark style="color:orange;">**null**</mark>)
  * [nodeType](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) (Integer) - Element (1), Text (3), Comment (8), Document (9).
  * [nodeValue](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) (String | <mark style="color:orange;">**null**</mark>) - textual content of a node.
  * [nodeName](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName) (String) - = [Element.tagName](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) if it's an HTML element.
{% endtab %}

{% tab title="👥 相關" %}
* [$(), $all()](../querying-elements/dom)
* [nodelist](nodelist "mention")
* [element](element "mention") - subclass.
{% 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)&#x20;
{% endtab %}

{% tab title="🗣 討論" %}
* [Filter or map nodelists in ES6](https://stackoverflow.com/a/32767009/5409815)
{% endtab %}
{% endtabs %}

## node.textContent vs elem.innerHTML vs htmlElem.innerText

{% tabs %}
{% tab title="📘 手冊" %}
* [ ] Node ⟩ .[textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) - gets the content of _all_ elements, including [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) and [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) elements. (prevent [XSS attacks](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting))
* [ ] Element ⟩ .[innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) - returns HTML.
* [ ] HTMLElement ⟩ .[innerText](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText) - `innerText` takes CSS **styles** into account.
{% endtab %}

{% tab title="📗 參考" %}
* [x] 前端筆記 ⟩ [innerText、innerHTML、textContent、outerHTML 的差別](https://orandigo.github.io/blog/2020/03/22/20200322-innerText-innerHTML-textContent-outerHTML/)
{% endtab %}

{% tab title="💾 程式" %}
* codepen ⟩ [node.textContent vs. htmlElement.innerText](https://codepen.io/lochiwei/pen/vYJOyYp?editors=1101)
{% endtab %}
{% endtabs %}
