> 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/+ext/node.isinpage.md).

# node.isInPage

{% tabs %}
{% tab title="💾 程式" %}
:floppy\_disk: replit: [node.isInPage](https://replit.com/@pegasusroe/nodeisInPage#script.js)

```javascript
// 🔸 node.isInPage
Object.defineProperty(Node.prototype, 'isInPage', {
    get() { return document.body.contains(this) }
});
```

{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
不管一個 [HTMLElement](/web/browser/dom/type/htmlelement.md) 是 display:none、visibility:hidden、opacity:0 等等，只要它在 [DOM](/web/browser/dom.md) 裡面，<mark style="color:blue;">`node.isInPage`</mark> 就是 <mark style="color:yellow;">**true**</mark>。
{% endhint %}

```
CSS/JS/HTML              visible  space  clickable
---------------------------------------------------
CSS    opacity: 0            ❌    ✅    ✅
CSS    visibility: hidden    ❌    ✅    ❌
CSS    display: none         ❌    ❌    ❌
JS     .hidden = false       ❌    ❌    ❌
HTML   <... hidden>          ❌    ❌    ❌
```

{% endtab %}

{% tab title="📘 手冊" %}

* [Node](/web/browser/dom/type/node.md) ⟩ [.contains()](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains) - check if a node is a descendant of a given node. (<mark style="color:yellow;">**itself**</mark> <mark style="color:orange;">**included**</mark>)
* [HTMLElement](/web/browser/dom/type/htmlelement.md) ⟩ [.hidden](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden) - <mark style="color:red;">**quite different**</mark> from using CSS [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
* [HTML](/web/html.md) ⟩ [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) ⟩ [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
* [CSS](/web/css.md) ⟩&#x20;
  * [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
  * [visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
  * [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
    {% endtab %}

{% tab title="📗 參考" %}

* [ ] CSSTrick ⟩ [The `hidden` Attribute is Visibly Weak](https://css-tricks.com/the-hidden-attribute-is-visibly-weak/)
* [ ] [The HTML Hidden Attribute Explained](https://www.semrush.com/blog/html-hide-element/)
* [ ] [【英文介係詞】該如何用英文表達「位置」？in front of/behind/next to/on/in/above….英文用法解說！](https://tw.englisher.info/2017/01/06/english-grammar-prepositions-of-place/)
  {% endtab %}

{% tab title="🗣 討論" %}

* [How can I check if an element exists in the visible DOM?](https://stackoverflow.com/a/5629730/5409815)
* [What is the difference between visibility:hidden and display:none?](https://stackoverflow.com/a/133064/5409815)
* [what is the difference between opacity:0 and display:none?](https://stackoverflow.com/a/8598999/5409815)
* [What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?](https://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone)
  {% endtab %}

{% tab title="❓" %}
{% hint style="warning" %}
問：「HTML [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) attribute is equivalent to [HTMLElement.hidden](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden) property❓」
{% endhint %}
{% endtab %}
{% endtabs %}