DOM(文檔對(duì)象模型)
什么是DOM?
D 代表 Document， DOM 將 HTML 頁(yè)面解析為一個(gè) 文檔。同時(shí)提供了 document 對(duì)象。
O 代表 Object， DOM 將 HTML 頁(yè)面中每個(gè)元素解析為一個(gè) 對(duì)象。例如 <div> 元素在 DOM 中對(duì)應(yīng)就是 HTMLDivElement 對(duì)象。
M 代表Model，DOM 中表示各個(gè)對(duì)象之間的關(guān)系。也就是DOM樹(shù)。
--DOM樹(shù)
DOM操作
--JavaScript 能夠操縱頁(yè)面中的 HTML 元素
--JavaScript 能夠操縱頁(yè)面中的 HTML 屬性
--JavaScript 能夠改變頁(yè)面中的 CSS 樣式
--JavaScript 能夠?qū)?yè)面中的事件做出響應(yīng)
節(jié)點(diǎn)類型
DOM = HTML + 其他多種類型(元素、屬性、文本等)
所有組成DOM的內(nèi)容都稱作DOM節(jié)點(diǎn)。
--節(jié)點(diǎn)類型
querySelector與getElement系列的區(qū)別
https://www.zhihu.com/question/24702250
attribute與propety的區(qū)別
attribute包含自定義屬性和預(yù)定義屬性，而propety只包含預(yù)定義屬性
<1>非布爾值
attribute與propety會(huì)實(shí)時(shí)同步關(guān)系
<2>布爾值屬性
--propety不會(huì)同步attribute
--如果沒(méi)有修改過(guò)propety,attribute會(huì)實(shí)時(shí)同步propety,
一旦修改過(guò)propety,attribute不會(huì)實(shí)時(shí)同步proprty
####瀏覽器響應(yīng)的是propety，用戶操作的也是propety
事件對(duì)象
eg:
div.onclick = function(ev){ //形參ev:一般情況下瀏覽器會(huì)將事件對(duì)象作為事件回調(diào)的第一個(gè)參數(shù)傳入
ev = ev||event; //event:某些瀏覽器將事件對(duì)象綁給了window對(duì)象(window.event)
}
DOM中關(guān)于獲取CSS尺寸&位置的API
--尺寸
clientWidth&clientHeight //padding-box
offsetWidth&offsetHeight //border-box(=padding-box+border,此API獲取的尺寸與盒模型的值有關(guān)，根據(jù)盒模型的值而發(fā)生變化)
//獲取視口的大小
document.documentElement.clientWidth
document.documentElement.clientHeight
--位置
clientX&clientY //clientX：觸發(fā)事件時(shí)，在X軸上，鼠標(biāo)距離視口的位置
//clientY：觸發(fā)事件時(shí)，在Y軸上，鼠標(biāo)距離視口的位置
getBoundingClientRect() //元素相對(duì)視口的位置(getBoundingClientRect().left,getBoundingClientRect().top)
offsetleft&offsettop&offsetParent
阻止事件的默認(rèn)行為
--HTML阻止事件的默認(rèn)行為
1.<a href = "javascript:;"></a>
2.<a href = "#"></a> //地址欄中會(huì)產(chǎn)生錨點(diǎn)#,所以不推薦使用
--DOM0阻止事件的默認(rèn)行為
1.ev.preventDefalut();
2.return false;
--DOM2阻止事件的默認(rèn)行為
ev.preventDefalut();
注意點(diǎn)：只有當(dāng)cancelble為true時(shí)才能取消事件默認(rèn)行為，否則不能取消事件默認(rèn)行為
事件流
事件流以事件為單位。
--DOM0事件流只有冒泡
--DOM2事件流既有冒泡(false)也有捕獲(true)
--冒泡的條件：
HTML結(jié)構(gòu)有嵌套(父子關(guān)系)
嵌套結(jié)構(gòu)有相同的事件
--捕獲定義：
當(dāng)觸發(fā)事件時(shí)，瀏覽器會(huì)從根節(jié)點(diǎn)開(kāi)始由外向內(nèi)進(jìn)行傳播(如果子元素與父元素都綁定了相應(yīng)事件，會(huì)先觸發(fā)父元素)
--冒泡定義：
當(dāng)觸發(fā)事件時(shí)，；瀏覽器會(huì)從子節(jié)點(diǎn)開(kāi)始由內(nèi)向外進(jìn)行傳播(先觸發(fā)子元素再冒泡到父元素)
完整的事件流
捕獲---->目標(biāo)處理(無(wú)捕獲和冒泡)---->冒泡
阻止冒泡
1.ev.stopProgation();
2.ev.cancleBubble = true;
阻止冒泡&阻止事件默認(rèn)行為
如果一個(gè)節(jié)點(diǎn)的父級(jí)阻止了默認(rèn)行為，會(huì)影響到子級(jí)(子級(jí)也會(huì)阻止事件的默認(rèn)行為)，但可以通過(guò)阻止冒泡來(lái)使父子之間通信，這樣子級(jí)就可以使用默認(rèn)行為(因?yàn)檫@時(shí)子級(jí)無(wú)法知道父級(jí)是否阻止了默認(rèn)行為)
事件委托
事件委托要基于事件冒泡，當(dāng)子節(jié)點(diǎn)有共性操作是使用事件委托
事件委托:一般來(lái)講，會(huì)將一個(gè)或一組元素的事件委托到它的父級(jí)或更外層元素元素上，真正綁定事件的是外層元素，當(dāng)事件響應(yīng)到需要綁定的元素時(shí)，會(huì)通過(guò)事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上，然后在外層元素上去執(zhí)行函數(shù)。
eg:
<ul>
<li>item1</li>
...
<li>itemn</li>
</ul>
<script>
window.onload = function(){
var ul = document.queraySelector("ul");
//ul是currentTarget,始終是監(jiān)聽(tīng)事件者，而target是事件的真正發(fā)出者
ul.onclick = function(ev){
ev = ev||event;
if(ev.target.nodeName.toupperCase()==[]){
alert(ev.target.textContent);
}
}
}
</script>
事件分類
具體的事件分類可參考以下地址：
https://developer.mozilla.org/zh-CN/docs/Web/Events
