📘Node

browser ⟩ DOM ⟩ type ⟩ Node

🗺️ 圖解

🔸 屬性

• instance properties

  • parentNode (Node | null)

  • parentElement (Element | null)

  • childNodes (NodeList) - live NodeList include elements, text and comments.

  • firstChild (Node | null)

  • lastChild (Node | null)

  • nextSibling (Node | null)

  • previousSibling (Node | null)

  • nodeType (Integer) - Element (1), Text (3), Comment (8), Document (9).

  • nodeValue (String | null) - textual content of a node.

  • nodeName (String) - = Element.tagName if it's an HTML element.

👥 相關

• $(), $all()
• NodeList

• Element - subclass.

📘 手冊

• MDN ⟩ EventTarget ⟩ Node

🗣 討論

• Filter or map nodelists in ES6

node.textContent vs elem.innerHTML vs htmlElem.innerText

📘 手冊

• Node ⟩ .textContent - gets the content of all elements, including <script> and <style> elements. (prevent XSS attacks)
• Element ⟩ .innerHTML - returns HTML.
• HTMLElement ⟩ .innerText - innerText takes CSS styles into account.

📗 參考

• 前端筆記 ⟩ innerText、innerHTML、textContent、outerHTML 的差別

💾 程式

• codepen ⟩ node.textContent vs. htmlElement.innerText