💾node.isInPage

💾 程式

💾 replit: node.isInPage

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

⭐️ 重點

不管一個 HTMLElement 是 display:none、visibility:hidden、opacity:0 等等，只要它在 DOM 裡面，node.isInPage 就是 true。

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

📘 手冊

• Node ⟩ .contains() - check if a node is a descendant of a given node. (itself included)

• HTMLElement ⟩ .hidden - quite different from using CSS display.

• HTML ⟩ Global attributes ⟩ hidden

• CSS ⟩

  • display

  • visibility

  • opacity

📗 參考

• CSSTrick ⟩ The hidden Attribute is Visibly Weak
• The HTML Hidden Attribute Explained
• 【英文介係詞】該如何用英文表達「位置」？in front of/behind/next to/on/in/above….英文用法解說！

🗣 討論

• How can I check if an element exists in the visible DOM?
• What is the difference between visibility:hidden and display:none?
• what is the difference between opacity:0 and display:none?
• What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?

❓

問：「HTML hidden attribute is equivalent to HTMLElement.hidden property❓」