DOM屬性總結
1. nodeType
作用：返回一個整數值，代表節點型別
首先來總結一下關於nodeType的種類
- 文件節點(document node)對應常量
Node.DOCUMENT_NODE.
- 屬性節點(attribute node)，對應常量
Node.ATTRIBUTE_NODE.
- 文字節點(text node),對應常量
Node.TEXT_NODE.文字節點既包括空格也包括換行
- 元素節點(element),對應常量
Node.ELEMENT_NODE.
- 文件片段節點(document fragment node)對應常量
Node.DOCUMENT_FRAGMENT_NODE.
- 註釋節點(comment node)對應常量
Node.COMMENT_NODE.
- 文件型別節點(documentType node),對應常量
Node.DOCUMENT_TYPE_NODE.
image.png
image.png
2. nodeName
作用：返回當前節點名稱
- 文件節點的nodeName就是#document
- 屬性節點的nodeName是屬性名稱
- 文字節點的nodeName是#text
- 元素節點的nodeName是大寫的標籤
- 註釋節點的nodeName是#comment
- 文件型別的nodeName是文件型別
- 文件片段節點的nodeName是#document_fragment
image.png
3.nodeValue
作用：返回一個字串，表示當前節點的文字值
- 文字節點的nodeValue是該文字內容
- 註釋節點的nodeValue是該註釋的文字值,就是你的註釋
- 屬性節點的nodeValue是該屬性的名稱
- 其他節點的nodeValue是null
image.png
4.textContent
作用：返回當前節點和其子節點的所有內容
- "="是替換，如果前面的字串非空，就直接替換為‘=’後邊的內容。如果前面字串是空的，此時"="相當於“+”，起連線作用
- "+"是連線，把後邊的內容直接給連線到前面內容裡邊
image.png
5.baseURL
作用：返回當前頁面的一個網址URL
隨便一個網站裡面，先滑鼠右鍵，選擇檢查元素，再在控制檯輸入 console.log(document.baseURL) 回車鍵即可。
這是我在小米官網裡面輸入的返回的網址，然後再控制檯點選這個網址，你會發現會直接跳到原網頁
image.png
6.nextSibling
作用：返回當前節點的後面緊跟著的第一個同級節點，如果該節點沒有同級節點返回null
image.png
image.png
其實這兩張圖裡面的程式碼一樣，只不過第一個 id 為e2和 id 為hi的 demo 連線在一起，而第二張圖裡面沒有連線在一起,導致裡面產生一個 文字節點 使得 id 為e2和 id 為hi的節點沒有 “緊跟” 的關係，因此結果為 false
7.previousSibling
作用：返回當前節點前面相鄰的第一個同級節點,如果該節點沒有同級節點返回null
image.png
image.png
這個問題跟上面的問題是一個型別， 文字節點包括空格和換行
8.ownerDocument
作用：返回當前節點的頂級節點，如果沒有返回null
image.png
9.parentElement
作用：返回當前元素的父元素節點，如果其沒有父元素節點或者其父節點型別不是元素節點返回null
image.png
10.parentNode
作用：返回當前元素的父節點。文件節點和文件片段節點都是null
image.png
image.png
11.firstChild lastChild
image.png
id 為bod的第一個兒子是 id 為hello的，最後一個兒子是 id 為e2的
12.childNodes
作用：返回一個節點陣列，該數組裡麵包含的是當前節點的所有子節點
image.png
image.png
13.isConnected
作用：返回一個布林值，判斷當前節點是否在文件中
image.png
在該程式碼中，span 不屬於該節點，因此返回 false ，當插入節點之後，返回 true .