Published in
5 min readMar 13, 2020
文件物件模型(Document Object Model 簡稱 DOM) — 筆記二
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。
範例:
textContent
屬性輸出內容以上是我對 DOM 節點物件有哪一些屬性 (properties)的學習筆記,還有其他方法、事件之後再一一學習 😉。
***如果有任何想法,也歡迎留言與我分享~***