DOM
- MDN
-
阮一峰
什么是DOM既们，DOM最重要的就是要明白它的概念，否則遇到問題也不知道如何下手
大家都說DOM樹不铆，這是一個(gè)比喻蝌焚，易于理解，
D就是文檔誓斥，想象它是一個(gè)樹狀的結(jié)構(gòu)（就像之前數(shù)據(jù)結(jié)構(gòu)里的二叉樹那樣）只洒，樹上有著節(jié)點(diǎn)（node）
O就是對(duì)象，
M也就是模型劳坑，把D和O做一個(gè)一一對(duì)應(yīng)的映射毕谴，就是這個(gè)模型
所以DOM就是把文檔變成一個(gè)對(duì)象
映射
上圖紅字
DOM轉(zhuǎn)化來的js對(duì)象里面到底存放什么由DOM標(biāo)準(zhǔn)規(guī)定
比如：
上圖的 head、body、meta析珊、link羡鸥、h1、p 都是Element的實(shí)例
（中間存在其它函數(shù)忠寻，F(xiàn)12調(diào)試可見惧浴，比如document.body就是document.body.proto->HTMLBodyElement.prototype.proto->HTMLElement.prototype.proto->Element.prototype）
根節(jié)點(diǎn)html比較特殊，是由document構(gòu)造的（DOucment->HTMLDocument,簡(jiǎn)寫）
至于文本節(jié)點(diǎn)則是由
Node Api
Node 屬性
記住以下單詞奕剃；
- child / children / parent
- node
- first / last
- next / previous
- sibling / siblings
- type
- value / text / content
- inner / outer
- element
然后相互組合
一部分：childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent
<html>
<head></head>
<body></body>
</html>
document.body.previousSibling // #text
document.body.previousSibling.previousSibling // <head></head>
docuemnt.body.previousElementSibling // <head></head>
// 為什么previousSibling返回的是文本節(jié)點(diǎn)呢衷旅，這是因?yàn)楸緛韉om是配對(duì)xml的，后來強(qiáng)行配對(duì)html
// previousSibling是 Node 的屬性纵朋，previousElementSibling是 Element 的屬性
// previousSibling 是本來就有的柿顶，previousElementSibling是后來加的
// 類似的還有 nextSibling / nextElementSibling, firstChild / firstElementChild 等等
// 可以在F12中嘗試，控制臺(tái)會(huì)顯示提示以及該屬性屬于哪個(gè)對(duì)象
幾個(gè)要注意的 Node Api
-
nodeName
注意這個(gè)api很奇葩
document.body.nodeName // 'BODY
document.documentElement.nodeName // 'HTML
document.nodeName不行操软，必須像上面那樣寫
它對(duì)所有標(biāo)簽返回名稱都是大寫
但是嘁锯！唯有svg，它返回小寫
document.getElementsByTagName('svg')[0] // 'svg'
這是因?yàn)閟vg是‘外來的’標(biāo)簽聂薪，它是后來新加的家乘，然后就這么小寫了…… -
nodeType-MDN
只讀屬性 Node.nodeType 表示的是該節(jié)點(diǎn)的類型。其所有可能的值請(qǐng)參考節(jié)點(diǎn)類型常量.
它返回一個(gè)整數(shù)來表示節(jié)點(diǎn)的類型
(之所以這樣是因?yàn)楫?dāng)年的計(jì)算機(jī)還沒這么發(fā)達(dá)藏澳，而1比element的字節(jié)小多了)
以下幾個(gè)需知：
1 元素節(jié)點(diǎn)仁锯， Eg：<div>、<p>
3 文本節(jié)點(diǎn)翔悠， 元素或者屬性中實(shí)際的文字业崖，比如<p>段落</p>中的段落二字
9 Document節(jié)點(diǎn)，
11 DocumentFragment節(jié)點(diǎn) // 很特殊的一個(gè)節(jié)點(diǎn)（暫時(shí)我還不清楚蓄愁，google DocumentFragment優(yōu)化）document.body.nodeType // 1 document.nodeType // 9 document.documentElement.nodetype // 1 document.documentElement.nodeName // 'HTML' // 所以document.documentElement才是html双炕，document不是？ -
innerText與textContent-MDN
區(qū)別:- textContent 會(huì)獲取所有元素的內(nèi)容涝登，包括
<script> 和 <style>元素雄家，然而 innerText 不會(huì)。 - innerText意識(shí)到樣式胀滚，并且不會(huì)返回隱藏元素的文本(設(shè)置display:none的元素)，而textContent會(huì)乱投。
- 由于 innerText 受 CSS 樣式的影響咽笼，它會(huì)觸發(fā)重排（reflow），但textContent 不會(huì)戚炫。
- 與 textContent 不同的是, 在 Internet Explorer (對(duì)于小于等于 IE11 的版本) 中對(duì) innerText 進(jìn)行修改剑刑， 不僅會(huì)移除當(dāng)前元素的子節(jié)點(diǎn)，而且還會(huì)永久性地破壞所有后代文本節(jié)點(diǎn)（所以不可能再次將節(jié)點(diǎn)再次插入到任何其他元素或同一元素中）。
- textContent 會(huì)獲取所有元素的內(nèi)容涝登，包括
-
childNodes-MDN
Node.childNodes 返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合施掏，該集合為即時(shí)更新的集合（live collection）钮惠。var parent = document.getElementById('parent'); parent.childNodes.length // 2 parent.appendChild(document.createElement('div')); parent.childNodes.length // 請(qǐng)問現(xiàn)在 length 是多少 // 3 // 與之相反的是 querySelectorAll() ,它返回的是一個(gè)靜態(tài)的 NodeList var allDiv = document.querySelectorAll('div> allDiv.length // 假設(shè)是 2 document.body.appendChild( document.createElement('div') ) allDiv.length // 請(qǐng)問現(xiàn)在 length 的值是多少？七芭？素挽？ // 2 // querySelectorAll方法不屬于 node，是document 和 element 的 - HTMLCollection與NodeList的區(qū)別有
- HTMLCollection實(shí)例對(duì)象的成員只能是Element節(jié)點(diǎn)狸驳，NodeList實(shí)例對(duì)象的成員可以包含其他節(jié)點(diǎn)预明。
- HTMLCollection實(shí)例對(duì)象可以用id屬性或name屬性引用節(jié)點(diǎn)元素，NodeList只能使用數(shù)字索引引用耙箍。
- HTML DOM 中的 HTMLCollection 是即時(shí)更新的（live）撰糠；
當(dāng)其所包含的文檔結(jié)構(gòu)發(fā)生改變時(shí)，它會(huì)自動(dòng)更新辩昆。
NodeList 對(duì)象大多數(shù)情況下是個(gè)實(shí)時(shí)集合阅酪。
意思是說，如果文檔中的節(jié)點(diǎn)樹發(fā)生變化汁针，則已經(jīng)存在的 NodeList 對(duì)象也可能會(huì)變化术辐。例如，Node.childNodes 是實(shí)時(shí)的扇丛。
在另一些情況下术吗，NodeList 是一個(gè)靜態(tài)集合，也就意味著隨后對(duì)文檔對(duì)象模型的任何改動(dòng)都不會(huì)影響集合的內(nèi)容帆精。document.querySelectorAll 返回一個(gè)靜態(tài)的 NodeList较屿。
Node 方法 （如果一個(gè)屬性是函數(shù)，那么這個(gè)屬性就也叫做方法卓练；換言之隘蝎，方法是函數(shù)屬性）
appendChild()cloneNode() // 分深、淺拷貝contains()hasChildNodes()insertBefore()isEqualNode() // 看起來相等isSameNode() // 完全相等襟企，可以用 === 來代替removeChild()replaceChild()-
normalize() // 常規(guī)化
基本看見名字就知道作用嘱么，不清楚也可以查MDN。
Document Api -MDN
Document 屬性
- body
- characterSet
- childElementCount
- children
- doctype
- documentElement
- domain
- fullscreen
- head
- hidden
- images
- links
- location
- onxxxxxxxxx
- origin
- plugins
- readyState
- referrer
- scripts
- scrollingElement
- styleSheets
- title
- visibilityState
Document 方法：
- close()
- createDocumentFragment()
- createElement()
- createTextNode()
- execCommand()
- exitFullscreen()
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
- getSelection()
- hasFocus()
- open()
- querySelector()
- querySelectorAll()
- registerElement()
- write()
- writeln()
Element Api -MDN
關(guān)于 DOM API 更多見之后寫的常用 API顽悼。（待續(xù)）
