文件物件模型（Document Object Model 簡稱 DOM） — 筆記二

Photo by chuttersnap on Unsplash

JavaScript DOM Node Properties (DOM 節點物件的屬性)

學習DOM 節點物件有哪一些屬性 (properties) 可以使用。

Node.nodeType

節點類型分別有：

• 元素節點 (element node)
• 文字節點 (text node)
• 屬性節點 (attribute node)
• 註解節點 (comment node)

下列表，常數 (Node type constants)，幫助你來判斷節點類型:

Node.nodeType

範例：

Node.nodeType 判斷節點類型

Node.nodeName

nodeName 屬性會回傳節點的名稱。

Node.nodeName

Node.nodeName 回傳節點的名稱

nodeName 回傳的 HTML 元素節點名稱都是大寫的英文字 (upper case)；但如果你的頁面模式是 XML-mode 則會回傳原本標籤的大小寫不變。

補充:

document 是根節點，對 HTML 的存取必須從 document 物件開始。

Element.tagName

tagName 和 nodeName 基本上是一樣了，除了 tagName 屬性只有 HTML 元素節點才有。

Node.nodeValue

nodeValue 屬性用來取得 text, comment 和 CDATA 節點的內容，如果是 attribute 節點則會回傳屬性內容。

範例:

nodeValue 屬性用來取得節點的內容

Element.innerHTML

innerHTML 屬性用來取得一個 DOM 元素節點中的 HTML 內容。

範例:

innerHTML 屬性元素節點的 HTML 內容

如上圖，innerHTML 屬性可以用來改變某元素下的 HTML 內容。

Element.innerText

innerText 屬性和 innerHTML 用法類似，只是 innerText會將 HTML 標籤去除。

範例:

innerText 屬性和 innerHTML 用法類似

如上圖，innerText 也可以寫入內容，但它會將 HTML 標籤(tag)自動轉成 HTML Entity。

Node.textContent

textContent 屬性和innerText 用法類似。

textContent 和 innerText差異：

• textContent 會回傳元素的內容，包括<script> 和<style> 元素，但innerText 不會。
• textContent會回傳節點中的每一個元素 ，例如樣式是 visibility: hidden; 或 display: none;。相反，innerText受CSS樣式的影響，並且不會回傳隱藏元素的樣式。
• 另外由於 textContent 或 innerText 都會將 HTML 特殊符號自動轉成 HTML Entity 的特性，很適合用來防止 XSS 安全漏洞攻擊。

textContent 和 innerHTML差異：

• innerHTML 回傳元素節點中的HTML內容，為了在元素中尋找或寫入內容使用innerHTML。但是，textContent通常具有更好的性能，因為內容不會被解讀為HTML。

範例:

textContent 屬性輸出內容

Element.outerHTML

outerHTML 屬性用來取得 DOM 元素節點的 HTML 內容，與innerHTML用法類似。

innerHTML 和 outerHTML差異:

outerHTML會回傳節點本身的 HTML 內容。

範例:

outerHTML會回傳節點本身的 HTML 內容

如上圖，outerHTML 屬性用來改變某元素的 HTML 內容，有點像取代原節點的意思。

參考MDN: Element、Node

以上是我對 DOM 節點物件有哪一些屬性 (properties)的學習筆記，還有其他方法、事件之後再一一學習 😉。

DOM-學習筆記三

***如果有任何想法，也歡迎留言與我分享~***