DOM知識點小結(jié)
DOM(Document Object Model)將HTML和XML按結(jié)構(gòu)解析為節(jié)點和對象組成的樹形圖如下圖。通過定義的API來操作文檔結(jié)構(gòu)嫉晶，達(dá)到改變文檔結(jié)構(gòu)陨倡、樣式和內(nèi)容的目的哆姻。
Using_the_W3C_DOM_Level_1_Core-doctree.jpg
20180203230047.png
- Document構(gòu)造了HTML標(biāo)簽。
- Text構(gòu)造了文本節(jié)點玫膀，相鄰標(biāo)簽之間的回車是一個text節(jié)點矛缨，用js生成的- - 標(biāo)簽沒有回車，因而也就沒有該節(jié)點帖旨。
- Element構(gòu)造了標(biāo)簽箕昭。
- Comment構(gòu)造了注釋節(jié)點。
- and so on... 可以在控制臺上console.dir()解阅，通過查看其_proto_來查看落竹。
- 節(jié)點類型用nodeType表示』醭可以用
document.nodeType === Node.DOCUMENT_NODE或者document.nodeType === 9檢測節(jié)點類型述召。目前仍在使用的節(jié)點類型有如下幾種：
微信截圖_20180203230756.png
常用的Node屬性：
- 父節(jié)點： parentElement,parentNode
- 兄弟節(jié)點：previousSibling,nextSibling
- 子節(jié)點：childNodes,firstChild,,lastChild
-
自身：nodeName,nodeType,nodeValue,ownerDocument,textContent,
innerText,outerText.
常用方法：1. 方法（如果一個屬性是函數(shù)，那么這個屬性就也叫做方法蟹地；換言之积暖，方法是函數(shù)屬性）
- appendChild()
- cloneNode()
- contains()
- hasChildNodes()
- insertBefore()
- isEqualNode()
- isSameNode()
- removeChild()
- replaceChild()
- normalize() // 常規(guī)化
- 搞清楚英文單詞的意思就知道用法
- 如果發(fā)現(xiàn)知道英文后依然不明白用法，看 MDN 的例子即可怪与，如 normalize
DOM APi 無外乎「增刪改查」
Document 接口
屬性
anchors
body
characterSet
childElementCount
children
doctype
documentElement
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx
origin
plugins
readyState
referrer
scripts
scrollingElement
styleSheets
title
visibilityState
方法：
close()
createDocumentFragment()
createElement()
createTextNode()
execCommand()
exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
querySelector()
querySelectorAll()
registerElement()
write()
writeln()
document.querySelector 和 document.querySelectorAll
