> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/type/node.md).

# Node

[browser](/web/browser.md) ⟩ [DOM](/web/browser/dom.md) ⟩ [type](/web/browser/dom/type.md) ⟩ 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&amp;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](/web/browser/dom/type/element.md) | <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](/web/browser/dom/type/element.md), <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()](/web/browser/dom/querying-elements/dom.md)
* [NodeList](/web/browser/dom/type/nodelist.md)
* [Element](/web/browser/dom/type/element.md) - 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 %}