文件物件模型(Document Object Model 簡稱 DOM) — 筆記二
JavaScript DOM Node Properties (DOM 節點物件的屬性)
學習DOM 節點物件有哪一些屬性 (properties) 可以使用。
Node.nodeType
節點類型分別有:
- 元素節點 (element node)
- 文字節點 (text node)
- 屬性節點 (attribute node)
- 註解節點 (comment node)
下列表,常數 (Node type constants),幫助你來判斷節點類型:
範例:
Node.nodeName
nodeName
屬性會回傳節點的名稱。
nodeName
回傳的 HTML 元素節點名稱都是大寫的英文字 (upper case);但如果你的頁面模式是 XML-mode 則會回傳原本標籤的大小寫不變。
補充:
document
是根節點,對 HTML 的存取必須從document
物件開始。
Element.tagName
tagName
和 nodeName
基本上是一樣了,除了 tagName
屬性只有 HTML 元素節點才有。
Node.nodeValue
nodeValue
屬性用來取得 text, comment 和 CDATA 節點的內容,如果是 attribute 節點則會回傳屬性內容。
範例:
Element.innerHTML
innerHTML
屬性用來取得一個 DOM 元素節點中的 HTML 內容。
範例:
如上圖,innerHTML
屬性可以用來改變某元素下的 HTML 內容。
Element.innerText
innerText
屬性和 innerHTML
用法類似,只是 innerText
會將 HTML 標籤去除。
範例:
如上圖,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。
範例:
以上是我對 DOM 節點物件有哪一些屬性 (properties)的學習筆記,還有其他方法、事件之後再一一學習 😉。
***如果有任何想法,也歡迎留言與我分享~***