DOM總結(jié)
1:DOM - document object model 文檔對(duì)象模型
作用：給我們提供了一些方法碟贾，讓我們可以操作頁(yè)面.
2: 獲取標(biāo)簽對(duì)象的方式.
2.1:根據(jù)id名獲取元素
console.log(document.getElementById("box"));
使用document.getElementById()獲取元素失敗時(shí)結(jié)果為null
注意：獲取位置币喧，如果在head中書(shū)寫(xiě)js代碼獲取元素，需要考慮標(biāo)簽 是否生成
2.2:根據(jù)標(biāo)簽名獲取元素.
getElementsByTagName("div"),得到的是偽數(shù)組,要么遍歷,要么給具體的 索引值.
3: js的入口函數(shù).
window.onload = function () { };
作用：在入口函數(shù)內(nèi)書(shū)寫(xiě)的代碼會(huì)在頁(yè)面完全加載(引入的文件,結(jié)構(gòu),圖片,文件)后執(zhí)行.
4:對(duì)標(biāo)簽進(jìn)行樣式設(shè)置操作
標(biāo)簽.style , 然后再訪問(wèn)具體的某個(gè)樣式名
書(shū)寫(xiě)樣式時(shí)袱耽，在css中加-的樣式名杀餐，例如background-color，在js中需要將-去掉扛邑，并將后半部分的首字母大寫(xiě)
// font-size fontSize z-index zIndex
box.style.backgroundColor = "red";
5:文本操作.
標(biāo)簽.innerHTML
Innerhtml既可以設(shè)置文本,也識(shí)別標(biāo)簽.
6:DOM - 文檔對(duì)象模型
前面我們說(shuō)過(guò)只有對(duì)象才有屬性和方法
通過(guò)觀察我們發(fā)現(xiàn),樣式和文本操作均為通過(guò)屬性的形式
使用DOM操作的標(biāo)簽以及其他內(nèi)容均為對(duì)象形式
7:js中的事件:
js中的事件同樣也是由三個(gè)部分組成
1 事件源(觸發(fā)事件的元素)(被動(dòng))
2 事件類(lèi)型(例如點(diǎn)擊,鼠標(biāo)移入)
3 事件處理程序(函數(shù)類(lèi)型)
語(yǔ)法形式:
事件源.事件類(lèi)型 = function(){
事件處理程序怜浅，當(dāng)事件觸發(fā)后，執(zhí)行內(nèi)部的所有代碼;
}
8:操作標(biāo)簽自身支持的行內(nèi)屬性(id/title/class).
1:獲取: 標(biāo)簽名.屬性名 iv.id
設(shè)置: 標(biāo)簽名.屬性名 = ”屬性值”div.className = “current”
但是class比較的特殊,因?yàn)閏lass是關(guān)鍵字,所以換成了className.
2:通過(guò) 標(biāo)簽.className = “abc” 設(shè)置的時(shí)候,需要將以前的類(lèi)名帶上,不然就會(huì)刪除以前的類(lèi)名了.
9:標(biāo)簽行內(nèi)自定義屬性的操作方式,無(wú)法通過(guò)標(biāo)簽.屬性名的方式操作.
既可以設(shè)置標(biāo)簽行內(nèi)的自定義屬性,也可以設(shè)置標(biāo)簽自身支持的的行內(nèi)屬 性.但建議僅僅用作標(biāo)簽的行內(nèi)自定義屬性.
1 獲取 標(biāo)簽.getAttribute(屬性名);
console.log(box.getAttribute("hehe"));
console.log(box.getAttribute("id"));
2 設(shè)置 標(biāo)簽.setAttribute(要修改的屬性名,修改成什么值)
box.setAttribute("hehe", "b");
3 移除 標(biāo)簽.removeAttribute(要移除的屬性名)
box.removeAttribute("hehe")
box.removeAttribute("id").
10:事件內(nèi)部的代碼僅僅點(diǎn)擊才執(zhí)行,晚于頁(yè)面的加載.其他加載完才執(zhí)行.
解決方法:
1:自調(diào)用函數(shù):
自調(diào)用函數(shù)(立即執(zhí)行函數(shù))的功能：
1 用于包裹作用域(模擬塊級(jí)作用域).
2 減少全局變量的使用.
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
(function () {
var j = i;
lis[i].onclick = function () {
console.log(j);
};
})();
}
2:給DOM對(duì)象添加自定義的屬性.(對(duì)象名.屬性)
3:給標(biāo)簽添加行內(nèi)的自定義屬性.(setattribute/getAttribute/removeAttribute).
---------------------------------------------第二天------------------------------------------------------
11:DOM第二天有總結(jié).
12:阻止默認(rèn)的a標(biāo)簽的跳轉(zhuǎn),要在后面設(shè)置 return false.
Return false 可以阻止默認(rèn)跳轉(zhuǎn).
13:鼠標(biāo)的移入移出事件:
鼠標(biāo)移入事件: onmouseover.
鼠標(biāo)移出事件: onmouseout.
14:焦點(diǎn)事件:
onfocus 獲取焦點(diǎn)事件：點(diǎn)擊輸入框時(shí)蔬崩，光標(biāo)在框內(nèi)跳動(dòng)
onblur 失去焦點(diǎn)事件：點(diǎn)擊輸入框以外恶座，光標(biāo)不跳到觸發(fā)
15:表單操作內(nèi)容，自帶value屬性沥阳，所以操作內(nèi)容時(shí)直接使用value即可.
Input表單的默認(rèn)值 value屬性.
16:在所有表單的表單中,僅僅下拉菜單select的默認(rèn)文本為innerHTML,其他的均為value.
17: 復(fù)選框是否選中 checked
checked 設(shè)置值為bool值跨琳，如果值為true，表示選中桐罕，false表示取消選中
注意點(diǎn)(不常用):如果設(shè)置的值不是bool值會(huì)進(jìn)行隱式轉(zhuǎn)換操作
cb.checked = "hehehe";
cb.checked = false;
-------------------------------------------第三天-------------------------------------------------
18:為什么會(huì)有兼容問(wèn)題:
js中有許多的功能脉让，但是某些功能無(wú)法在所有的瀏覽器中同時(shí)執(zhí)行
針對(duì)這些功能，需要進(jìn)行兼容性操作功炮。
21: 文本操作.(都是屬性)
Innerhtml 即可以生成文字,也可以生成標(biāo)簽
如果我們要給一個(gè)標(biāo)簽內(nèi)部設(shè)置大量的文字信息溅潜，同樣會(huì)進(jìn)行內(nèi)部的標(biāo)簽檢索操作.
純文本的設(shè)置:
①:innerText: IE提出的,兼容IE.
②:textcontent: 標(biāo)準(zhǔn)屬性,但是低版本的IE(IE6/7/8)不支持.
22:ie總是出現(xiàn)兼容性的原因
1 瀏覽器升級(jí)麻煩
2 系統(tǒng)升級(jí)更麻煩
導(dǎo)致了ie會(huì)有多個(gè)版本同時(shí)在市面上存在，我們?cè)跁?shū)寫(xiě)代碼時(shí)需要考慮到可能額會(huì)出現(xiàn)的兼容性問(wèn)題薪伏，保證最大化的用戶使用
23:能力檢測(cè):
檢測(cè)當(dāng)前這個(gè)功能是否可以使用滚澜，能用則用(看你行不行).
24:文本設(shè)置的兼容性:
先隨意找到其中一個(gè)屬性，進(jìn)行使用嫁怀，查看使用結(jié)果设捐，可以用就用借浊，不能用的話換另一個(gè)即可
if (typeof box.innerText == "string") {
//如果獲取到了內(nèi)容，為字符串萝招，但是取值可能為空蚂斤，所以直接利用隱式轉(zhuǎn)換的方式不太嚴(yán)謹(jǐn)
box.innerText = "我是innerText設(shè)置的內(nèi)容";
} else {
//不支持innerText，可以使用textContent
box.textContent = "我是textContent設(shè)置的內(nèi)容";
}
25:通過(guò)style設(shè)置/獲取的樣式,僅僅是在行內(nèi)顯示,但是并不是所有的樣式都是在行內(nèi).所有必須要通過(guò)其他的方式來(lái)獲取樣式.
①:getComputedStyle(). 獲取計(jì)算后的樣式(獲取的樣式值是標(biāo)簽最終生效的那個(gè)樣式值). 標(biāo)準(zhǔn)方法,但是不兼容低版本的IE(IE6/7/8);
getComputedStyle(DOM對(duì)象).屬性名 getComputedStyle(box, null).width
參數(shù)2槐沼，一會(huì)兒再說(shuō)曙蒸，先寫(xiě)一個(gè)null
獲取結(jié)果為對(duì)象形式，是當(dāng)前標(biāo)簽所有樣式的集合
注意岗钩，此方法只可以進(jìn)行樣式值的獲取逸爵，結(jié)果只讀不可設(shè)置,結(jié)果為字符串，帶單位
②: 標(biāo)簽.currentStyle IE自身支持,且得到得是對(duì)象.
標(biāo)簽.currentStyle.屬性名 box.currentStyle.width.
③:DOM對(duì)象.getComputedStyle()與DOM對(duì)象.currentStyle的能力測(cè)試:
if (box.currentStyle) {
//只要進(jìn)入了if凹嘲，說(shuō)明currentStyle的取值為對(duì)象，支持
console.log(box.currentStyle.width);
} else {
console.log(getComputedStyle(box, null).width);
}
26:
一次設(shè)置多個(gè)行內(nèi)的樣式屬性值(不常用):
box.style.cssText = "width:100px;height:100px;background-color:red;";
27:設(shè)置樣式的兩種方式:
①:DOM對(duì)象.style.屬性名 = 屬性值.
②:DOM對(duì)象.className = 名字. 通過(guò)類(lèi)名來(lái)修改樣式
28:根據(jù)類(lèi)名獲取標(biāo)簽對(duì)象:
1:document.getElementsByClassName(類(lèi)名);
但是低版本IE(IE6/7/8)不兼容,我們必須手寫(xiě)兼容程序:
獲取標(biāo)簽對(duì)象中,僅僅有document.getElementsByTageName(標(biāo)簽名)/document.getElementById(ID名)是兼容IE的,所以在書(shū)寫(xiě)原生JS時(shí)最好使用tageName與ID的方式來(lái)獲取標(biāo)簽對(duì)象.
書(shū)寫(xiě)能力檢測(cè):
//步驟1：進(jìn)行能力檢測(cè)
// if (document.getElementsByClassName) {
// //支持的代碼
// document.getElementsByClassName("box");
// } else {
//如果進(jìn)入到else构韵，說(shuō)明當(dāng)前瀏覽器不支持此方法周蹭，自己書(shū)寫(xiě)功能實(shí)現(xiàn)。
//需求：根據(jù)給定的類(lèi)名進(jìn)行元素的獲取
//1 獲取body中的所有標(biāo)簽
var tags = document.body.getElementsByTagName("*");
var resultArr = [];//結(jié)果數(shù)組疲恢，用于保存獲取到的標(biāo)簽
//2 檢測(cè)當(dāng)前某個(gè)標(biāo)簽的className屬性的值
for (var i = 0; i < tags.length; i++) {
//3 取出當(dāng)前某個(gè)標(biāo)簽的類(lèi)名凶朗，用于檢測(cè)
var oldCls = tags[i].className;
//4 驗(yàn)證時(shí)，需要考慮显拳，如果取得的標(biāo)簽不是只有一個(gè)類(lèi)名時(shí)棚愤，采用相等判斷會(huì)導(dǎo)致不準(zhǔn)確
//將標(biāo)簽的類(lèi)名按照空格分割
var clsArr = oldCls.split(" ");
//5 遍歷，查找指定的部分是否存在
for (var j = 0; j < clsArr.length; j++) {
//如果某個(gè)部分和指定類(lèi)名相等杂数，取出即可
if (clsArr[j] == "box") {
resultArr.push(tags[i]);
break;//跳出
}
}
}
console.log(resultArr);
// }
29:頁(yè)面是如何顯示的：
當(dāng)一個(gè)頁(yè)面被瀏覽器加載后需要執(zhí)行以下幾個(gè)基本步驟：
1 先解析html文件宛畦，將標(biāo)簽進(jìn)行生成，根據(jù)每個(gè)標(biāo)簽之間的關(guān)系揍移，生成一個(gè)樹(shù)模型(節(jié)點(diǎn)樹(shù))
2 再解析css文件次和，將樣式生成為樣式樹(shù)
3 將樣式樹(shù)和節(jié)點(diǎn)樹(shù)合并，生成一個(gè)渲染樹(shù)(頁(yè)面等待進(jìn)行繪制)
4 瀏覽器會(huì)根據(jù)渲染樹(shù)將頁(yè)面顯示出來(lái)
4.1 排列：將每個(gè)標(biāo)簽確定尺寸和位置
4.2 繪制：將標(biāo)簽內(nèi)部的內(nèi)容顯示出來(lái)(圖片那伐，顏色踏施，文字)
現(xiàn)在我們的重點(diǎn)是上面的第一步
第一步會(huì)根據(jù)html標(biāo)簽生成節(jié)點(diǎn)樹(shù)
作用為，生成每個(gè)html標(biāo)簽的對(duì)應(yīng)的DOM對(duì)象罕邀，方便用戶對(duì)標(biāo)簽的操作
作用2：一會(huì)兒我們要學(xué)習(xí)的新的訪問(wèn)關(guān)系
30: 節(jié)點(diǎn)：對(duì)節(jié)點(diǎn)樹(shù)中的所有形式內(nèi)容的統(tǒng)稱(chēng)（都可稱(chēng)為節(jié)點(diǎn)）
元素節(jié)點(diǎn) ：標(biāo)簽畅形，頁(yè)面元素
文本節(jié)點(diǎn) ：文本內(nèi)容
屬性節(jié)點(diǎn) ：標(biāo)簽的行內(nèi)屬性
注釋節(jié)點(diǎn) ：注釋
根節(jié)點(diǎn) ：document (DOM中的頂級(jí)對(duì)象，所有DOM的內(nèi)容均為他下屬內(nèi)容)
31:節(jié)點(diǎn)訪問(wèn)總共分為兩類(lèi):(都是屬性)/都是屬性/都是屬性
①:上下級(jí)訪問(wèn)關(guān)系(父子關(guān)系);父節(jié)點(diǎn)/子節(jié)點(diǎn)
②:同級(jí)訪問(wèn)關(guān)系(兄弟關(guān)系);
32:上下級(jí)訪問(wèn)關(guān)系(都是屬性):
①:父節(jié)點(diǎn): 節(jié)點(diǎn).parentNode
注意:任意節(jié)點(diǎn)诉探，如果具有父節(jié)點(diǎn)parentNode的值日熬，結(jié)果一定為元素節(jié)點(diǎn)(標(biāo)簽).
②:子節(jié)點(diǎn):
節(jié)點(diǎn).childNodes 獲取所有子節(jié)點(diǎn),但包括換行/空格等文本節(jié)點(diǎn).
節(jié)點(diǎn).children 獲取所有元素子節(jié)點(diǎn)（常用）
節(jié)點(diǎn).firstChild 獲取第一個(gè)子節(jié)點(diǎn),可能是文本節(jié)點(diǎn).
節(jié)點(diǎn).firstElementChild 獲取第一個(gè)元素子節(jié)點(diǎn).(不兼容低版本的IE,但是 不需要寫(xiě)兼容代碼).可以用以下方式來(lái)替換: 節(jié)點(diǎn).children[0];
節(jié)點(diǎn).lastChild 獲取最后一個(gè)子節(jié)點(diǎn),可能是文本節(jié)點(diǎn).
節(jié)點(diǎn).lastElementChild 獲取最后一個(gè)元素子節(jié)點(diǎn),也不兼容低版本的IE,
不需要書(shū)寫(xiě)兼容代碼,可以用這個(gè)來(lái)替換:
節(jié)點(diǎn).children[節(jié)點(diǎn).children.length - 1];
33:同級(jí)的訪問(wèn)關(guān)系(都是屬性):
節(jié)點(diǎn).previousSibling 前一個(gè)節(jié)點(diǎn),但是會(huì)獲取到換行空格等內(nèi)容.
節(jié)點(diǎn).previousElementSibling 前一個(gè)元素節(jié)點(diǎn),低版本的IE不兼容.
節(jié)點(diǎn).nextSibling 下一個(gè)節(jié)點(diǎn),會(huì)獲取到換行空格等內(nèi)容.
節(jié)點(diǎn).nextElementSibling 下一個(gè)元素節(jié)點(diǎn),低版本的IE不兼容.
34:對(duì)象的比較,比較的是內(nèi)存地址值.
每次生成對(duì)象,就會(huì)在堆內(nèi)存中產(chǎn)生一個(gè)區(qū)域存放數(shù)據(jù),會(huì)有一個(gè)內(nèi)存地址值.
要兩個(gè)對(duì)象相等,必須內(nèi)部保存的指針相同才可以(實(shí)際上是同一個(gè)對(duì)象才行)
35:獲取每個(gè)兄弟元素:
找父元素,再找所有的子元素,但是必須排除自己.
36:節(jié)點(diǎn)的移動(dòng):
1 標(biāo)簽.appendChild(要移動(dòng)的節(jié)點(diǎn)) 追加子節(jié)點(diǎn)
效果：將傳入的節(jié)點(diǎn)添加到調(diào)用節(jié)點(diǎn)內(nèi)的所有子節(jié)點(diǎn)后面(最后)
A.appendChild(B); 將B 添加到A元素的子元素的最后面.
2 標(biāo)簽.insertBefore(要移動(dòng)的節(jié)點(diǎn),參考節(jié)點(diǎn)) 插入子節(jié)點(diǎn)
效果，將要移動(dòng)的節(jié)點(diǎn)插入到指定的參考節(jié)點(diǎn)之前阵具。
注意：參考節(jié)點(diǎn)必須為調(diào)用元素的子節(jié)點(diǎn)才可以使用碍遍。
A.insertBefore(B, C); 將B移動(dòng)到元素A里面的元素C前面.
當(dāng)沒(méi)有傳入第二個(gè)參數(shù)時(shí),insertBefore()相當(dāng)于appendChild();
------------------------------------------第四天-------------------------------------------------------
37:為什么要?jiǎng)討B(tài)加載元素:
1:提高頁(yè)面的響應(yīng)速度(動(dòng)態(tài)加載結(jié)構(gòu)).
2:節(jié)省流量(動(dòng)態(tài)加載圖片).
38:動(dòng)態(tài)加載元素的幾種方式:
1:document.write(字符串); 字符串 = “<div>我是div</div>”
2:DOM對(duì)象.innerHTML = 字符串;
3:document.createElement(標(biāo)簽名);
39: document.write(字符串):
document.write(字符串)的方式基本不用,因?yàn)槿秉c(diǎn)是在太多:
①:無(wú)法指定位置添加:
②:如果將document.write在頁(yè)面加載后使用定铜，會(huì)導(dǎo)致頁(yè)面所有內(nèi)容被清除:
40:DOM對(duì)象.innerHTML = 字符串:
1):既可以更改內(nèi)部的文本,也可以加載標(biāo)簽.
2):特點(diǎn)
①:會(huì)對(duì)標(biāo)簽內(nèi)部的原有內(nèi)容進(jìn)行覆蓋:
1.1:解決方法:取出原來(lái)的內(nèi)容與需要生成的內(nèi)容進(jìn)行拼接,再一起生成.
box.innerHTML = box.innerHTML + "<div>我是div</div>";
box.innerHTML += "<div>我是div</div>";簡(jiǎn)化寫(xiě)法
1.2:因?yàn)槭菍⑴f標(biāo)簽替換為了新標(biāo)簽,所以原來(lái)舊標(biāo)簽的事件與自定義屬性均不見(jiàn)了.
②:執(zhí)行效率比較差:
查看用了多長(zhǎng)事件的方法:
console.time("innerHTML的執(zhí)行速度");
for (var i = 0; i < 2000; i++) {
box2.innerHTML += "<div></div>";
}
console.timeEnd("innerHTML的執(zhí)行速度");
41:document.createElement(標(biāo)簽名)
在創(chuàng)建元素后不會(huì)立刻在頁(yè)面中顯示
如果想要在頁(yè)面中顯示，需要添加到頁(yè)面中的某個(gè)位置(appendChild/insertBefore)
而且效率比較的高,與innerhtml的效率比例為1:1000:
總結(jié):我們?cè)谑褂胐ocument.createElement時(shí)怕敬，沒(méi)有特定的使用場(chǎng)景揣炕，只要innerHTML不適用，均可使用document.createElement.
42:解決innerhtml創(chuàng)建元素效率低下的問(wèn)題:
解決方法:可以使用字符串或者數(shù)組的替換方式东跪，在循環(huán)中替代innerHTML畸陡，將最終結(jié)果一次設(shè)置給innerHTML屬性.
代碼優(yōu)化后，執(zhí)行時(shí)間為 2.7ms虽填，大幅度的提高執(zhí)行速度
console.time("innerHTML的執(zhí)行速度");
for (var i = 0; i < 2000; i++) {
str += "<div></div>";
}
box.innerHTML = str;
console.timeEnd("innerHTML的執(zhí)行速度");
43:幾種創(chuàng)建元素的方式的總結(jié):
直接用document.createElement(標(biāo)簽名)就好了,大量的創(chuàng)建我們后面會(huì)用模板的形式.
①:innerHTML的使用場(chǎng)景：
如果需要?jiǎng)?chuàng)建的結(jié)構(gòu)大量重復(fù)并且結(jié)構(gòu)比較復(fù)雜時(shí)丁恭，推薦使用innerHTML的方式（操作方式為字符串拼接，可以直接拷貝html中設(shè)計(jì)好的結(jié)構(gòu)斋日，直接使用）.
②:document.createElement必須使用的場(chǎng)景：
要進(jìn)行動(dòng)態(tài)創(chuàng)建元素的位置上具有舊的標(biāo)簽牲览，并且舊的標(biāo)簽可能具有事件時(shí)，必須使用此方式恶守。
44:移除子節(jié)點(diǎn):
父節(jié)點(diǎn).removeChild(要?jiǎng)h除的子節(jié)點(diǎn));
45:onkeydown/onkeyup 事件
onkeydown 當(dāng)鍵盤(pán)上的某個(gè)按鍵按下后第献，觸發(fā)事件
onkeyup 當(dāng)鍵盤(pán)上的某個(gè)按鍵按下后，按鍵抬起觸發(fā)
獲取輸入框的內(nèi)容時(shí)：
1 keydown無(wú)法獲取到本次剛輸入的內(nèi)容部分
2 keyup可以獲取到當(dāng)前輸入的結(jié)果(常用)
46: str.indexOf(“abc”) abc是否是str的一部分 返回true/false
使用indexOf的時(shí)候想要匹配成功兔港，參數(shù)字符串必須比調(diào)用的字符串短
注意的點(diǎn)：使用空字符串對(duì)其他字符串進(jìn)行匹配時(shí)庸毫，可以在開(kāi)頭立刻匹配成功
-------------------------------------------第五天----------------------------------------------
47: 克隆 標(biāo)簽.cloneNode(bool值)
需要克隆的標(biāo)簽不要設(shè)置id名.
默認(rèn)值為false，false表示淺復(fù)制衫樊，只復(fù)制標(biāo)簽本身飒赃，不復(fù)制內(nèi)部?jī)?nèi)容
true表示深復(fù)制，復(fù)制標(biāo)簽以及內(nèi)部?jī)?nèi)容
無(wú)論哪種克隆方式(深復(fù)制或者淺復(fù)制)均無(wú)法復(fù)制標(biāo)簽的內(nèi)容或內(nèi)部的屬性.
復(fù)制完的標(biāo)簽必須使用appendchild,或者insertbefore添加到具體的標(biāo)簽內(nèi),不然看不到.
48: 替換節(jié)點(diǎn): replaceChild();
父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn),替換哪個(gè)子節(jié)點(diǎn));
返回值科侈，替換掉的節(jié)點(diǎn)會(huì)被返回载佳，可以根據(jù)需求繼續(xù)使用;
49:節(jié)點(diǎn)是對(duì)節(jié)點(diǎn)樹(shù)中所有內(nèi)容的統(tǒng)稱(chēng)(對(duì)頁(yè)面中所有內(nèi)容的統(tǒng)稱(chēng))
1 元素節(jié)點(diǎn)
2 屬性節(jié)點(diǎn)
3 文本節(jié)點(diǎn)
7 注釋節(jié)點(diǎn)
9 document 根節(jié)點(diǎn)
每個(gè)節(jié)點(diǎn)都具有三個(gè)屬性：
①:nodeType 用于標(biāo)注某個(gè)節(jié)點(diǎn)的類(lèi)型:
返回值為數(shù)值類(lèi)型，1表示元素節(jié)點(diǎn)
②:nodeValue 用于表示節(jié)點(diǎn)的節(jié)點(diǎn)值
元素節(jié)點(diǎn)沒(méi)有節(jié)點(diǎn)值屬性臀栈，返回值為null
③:nodeName 用于顯示節(jié)點(diǎn)名
nodeName屬性對(duì)于元素節(jié)點(diǎn)來(lái)說(shuō)刚盈，結(jié)果為標(biāo)簽名(在html中為大寫(xiě)形式,在xhtml中為小寫(xiě)形式)
50:總結(jié):
[圖片上傳失敗...(image-d355f4-1515936359360)]
-------------------------特效第一天-----------------------
51:offsetwidth/offsetheight
1: 標(biāo)簽對(duì)象.offsetwidth/offsetheight
2:是一個(gè)只讀屬性，沒(méi)有px單位.可直接運(yùn)算.
3:獲取的盒子的真實(shí)大小: width/height+padding+border.
4:
[圖片上傳失敗...(image-8cf329-1515936359359)]
52: 標(biāo)簽對(duì)象.style.width/height.
1:僅僅能獲取/設(shè)置行內(nèi)樣式.
2:獲取/設(shè)置的均是字符串,帶px單位.
3:獲取/設(shè)置的僅僅是 width.
4:
[圖片上傳失敗...(image-d3da7d-1515936359359)]
53:總結(jié):
獲取寬度/高度的時(shí)候挂脑，用offsetWidth/offsetHeight
設(shè)置寬度/高度的時(shí)候藕漱，用style.width/style.height,記得帶px單位.且為行內(nèi)式
54:parentNode與offsetParent
1:標(biāo)簽對(duì)象.parentNode
標(biāo)簽對(duì)象.offsetParent
2: parentNode 找父類(lèi)元素.
offsetParent 找最近的有定位的父元素.如果都沒(méi)有,一直找到body.
55:標(biāo)簽對(duì)象.style.left/top.
1:給定位的盒子設(shè)置偏移的量.
2:僅僅能獲取/設(shè)置行內(nèi)樣式.
3:獲取/設(shè)置的均是字符串,帶px單位.
4:
[圖片上傳失敗...(image-151f37-1515936359359)]
56:標(biāo)簽對(duì)象.offsetLeft/offsetTop
1: offsetLeft: 自身左側(cè)到offsetParent左側(cè)的距離：left + margin-left
offsetTop:自身頂部到offsetParent頂部的距離 : top + margin-top
2:僅僅能獲取,不能設(shè)置.且為數(shù)值類(lèi)型.
3:
[圖片上傳失敗...(image-9ffdb-1515936359358)]
57:總結(jié).
獲取操作：用offset系列
設(shè)置操作：用style.xxx進(jìn)行設(shè)置。
[圖片上傳失敗...(image-92ee70-1515936359358)]
58:getComputedStyle 獲取計(jì)算后的樣式
1:標(biāo)簽對(duì)象.getComputedStyle(ele,null)
2:傳入兩個(gè)參數(shù),
第一個(gè)參數(shù): 元素,需要獲取的標(biāo)簽對(duì)象
第二個(gè)參數(shù): 偽元素,null.
3:返回的是一個(gè)對(duì)象,后面需要.具體的屬性.
[圖片上傳失敗...(image-630c26-1515936359358)]
4:存在兼容問(wèn)題:
element:獲取誰(shuí)的樣式
attr: 獲取的樣式的屬性名
function getStyle(element, attr) {
//能力檢測(cè)
if(window.getComputedStyle) {
return window.getComputedStyle(element, null)[attr];
}else {
return element.currentStyle[attr];
}
}
59:節(jié)流閥步驟：
1. 定義節(jié)流閥開(kāi)關(guān)
2. 判斷閥門(mén)是否打開(kāi)崭闲，只有打開(kāi)了才能執(zhí)行
3. 關(guān)閉閥門(mén)肋联，不讓其他人執(zhí)行
4. 執(zhí)行完動(dòng)畫(huà)之后，打開(kāi)閥門(mén)
60:三大家族.
Offset家族
Scroll家族
Client家族.
61:Offset家族.
標(biāo)簽對(duì)象.offsetHeight/offsetWidth/offsetParent/offsetLeft/offsetTop
1:offset系列主要有：offsetHeight刁俭、offsetWidth橄仍、offsetParent、offsetLeft、offsetTop
2:特點(diǎn):
獲取的是元素真實(shí)的高度和寬度
獲取到的是數(shù)值類(lèi)型侮繁，方便計(jì)算
3:offsetHeight與offsetWidth是只讀屬性虑粥，不能設(shè)置。
offsetHeight = height + paddnig + border
offsetWidth = width + padding + border
4:與style.height/style.width區(qū)別.
只能獲取行內(nèi)樣式
獲取到的是字符串類(lèi)型帶px單位宪哩，需要轉(zhuǎn)換
[圖片上傳失敗...(image-71178d-1515936359357)]
62:scroll家族
(1): scroll家族用來(lái)獲取盒子內(nèi)容的大小和位置
scroll家族有：scrollWidth娩贷、scrollHeight、scrollLeft锁孟、scrollTop
(2):scrollWidth與scrollHeight是盒子內(nèi)容的真實(shí)的寬度和高度彬祖。與和盒子大小無(wú)關(guān)，僅僅與盒子的內(nèi)容有關(guān)系品抽。
(3):scrollTop是盒子內(nèi)容被滾動(dòng)條卷去的頭部的高度储笑。scrollLeft是盒子內(nèi)容被滾動(dòng)條卷去的左側(cè)的寬度。
[圖片上傳失敗...(image-9b1a30-1515936359357)]
(4):onscroll事件圆恤，對(duì)于有滾動(dòng)條的盒子突倍，可以使用onscroll注冊(cè)滾動(dòng)事件，每滾動(dòng)一像素盆昙，就會(huì)觸發(fā)該事件赘方。
var box = doucment.getElementById(“box”);
box.onscroll = function(){
//事件處理程序
}
:一般用來(lái)獲取scrollLeft與scrollTop.但是有兼容性的問(wèn)題,將其封裝如下:
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
//如何使用
console.log(scroll().top);//獲取頁(yè)面被卷去的頭部的距離
console.log(scroll().left);//獲取頁(yè)面被卷去的左側(cè)的距離
63:client家族.
(1):client家族用于獲取盒子可視區(qū)的大小
client家族有clientWidth、clientHeight弱左、clientLeft、clientTop
(2):如果內(nèi)容沒(méi)有超出盒子,clientWidth與scrollWidth相同.
[圖片上傳失敗...(image-ad542d-1515936359357)]
(3):三大家族的對(duì)比
[圖片上傳失敗...(image-6a7b14-1515936359357)]
64:onresize事件.
1:onresize事件會(huì)在窗口被調(diào)整大小的時(shí)候發(fā)生炕淮。
window.onresize = function(){
//事件處理程序
}
2:client系列一般用來(lái)獲取頁(yè)面的可視區(qū)寬高
但是存在兼容性問(wèn)題,書(shū)寫(xiě)兼容如下:
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
65:事件對(duì)象.
1:什么是事件對(duì)象:
在觸發(fā)某個(gè)事件的時(shí)候拆火，都會(huì)產(chǎn)生一個(gè)事件對(duì)象Event，這個(gè)對(duì)象中包含所有與事件相關(guān)的一些信息涂圆，包括觸發(fā)事件的元素们镜，事件的類(lèi)型以及其他與事件相關(guān)的信息。
2:獲取事件對(duì)象存在兼容性的問(wèn)題.
btn.onclick = function(event){
//只要用到了事件對(duì)象润歉，就要記得處理瀏覽器兼容性
event = event || window.event;
}
66:事件對(duì)象中屬性.
1:在事件對(duì)象中我們經(jīng)常用到的是鼠標(biāo)位置信息與鍵盤(pán)碼信息.
2:記錄了鼠標(biāo)位置信息的相關(guān)屬性.
screenX與screenY：光標(biāo)相對(duì)于屏幕左上角的水平位置與垂直位置模狭。
clientX與clientY：光標(biāo)相對(duì)于可視區(qū)左上角的水平位置和垂直位置。
pageX與pageY：光標(biāo)相對(duì)于網(wǎng)頁(yè)（文檔document）左上角的水平位置與垂直位置（推薦使用）
[圖片上傳失敗...(image-378c05-1515936359356)]
3:記錄了鍵盤(pán)碼的屬性.
event.keyCode:鍵盤(pán)按下的那個(gè)鍵的鍵盤(pán)碼
4:pageX與pageY存在兼容性的問(wèn)題.
function getPage(event) {
return {
//在IE678中使用document.documentElement.scrollLeft就可以獲取到scrollTop的值
x:event.pageX || event.clientX + document.documentElement.scrollLeft,
y:event.pageY || event.clientY + document.documentElement.scrollTop
}
}
67:on注冊(cè)事件.
1:注冊(cè)事件:
box.onclick = function(){//代碼塊}.
2:移除事件.
box.onclick = null.
3:同一個(gè)元素的同一個(gè)類(lèi)型的事件,僅僅能注冊(cè)一個(gè),注冊(cè)多個(gè)會(huì)產(chǎn)生覆蓋.
68:addEventListener 綁定事件
1:語(yǔ)法.
第一個(gè)參數(shù)：事件的類(lèi)型：click mouseover
第二個(gè)參數(shù)：函數(shù)踩衩，監(jiān)聽(tīng)者嚼鹉，每次點(diǎn)擊，這個(gè)函數(shù)就執(zhí)行驱富。
第三個(gè)參數(shù)：false
addEventListener(type, func, useCapture);
2:如果想讓你注冊(cè)的事件能夠被移除就不能使用匿名函數(shù).
function fn1() {
alert("hehe");
}
//如果想讓注冊(cè)的事件能移除锚赤，不能用匿名函數(shù)。
box.addEventListener("click", fn1, false);
69:removeEventListener. 移除事件.
1:要想被移除,就不能是匿名函數(shù)
2:語(yǔ)法:
第一個(gè)參數(shù)：參數(shù)類(lèi)型
第二個(gè)參數(shù)：要移除的那個(gè)函數(shù)
第三個(gè)參數(shù)：false
removeEventListener(type, func, useCapture);
70:在IE6/7/8里面不支持addEventListener /removeEventListener.
僅僅有attachEvent與detachEvent
1:attachEvent的用法.
//type:事件類(lèi)型 需要加上on onclick onmouseenter
//func:需要執(zhí)行的那個(gè)事件
attachEvent(type, func)
2:detachEvent的用法.
//type:事件類(lèi)型 需要加上on onclick onmouseenter
//func:需要執(zhí)行的那個(gè)事件
detachEvent(type, func)
71:注冊(cè)/移除事件的封裝.
//添加事件
function addEvent(element, type, fn){
//能力檢測(cè)
if(element.addEventListener){
element.addEventListener(type, fn, false);
}else if(element.attachEvent){
element.attachEvent("on"+type, fn);
}else {
//如果都不行褐鸥，那就用on方式
element["on"+type] = fn;
}
}
//移除事件
function removeEvent(element, type, fn) {
if(element.removeEventListener){
element.removeEventListener(type, fn, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, fn);
}else {
element["on"+type] = null;
}
}
72:常見(jiàn)的鼠標(biāo)事件.
onmousedown:鼠標(biāo)按下事件
onmouseup:鼠標(biāo)彈起事件
onclick:單擊事件
ondblclick：雙擊事件
onmouseover：鼠標(biāo)經(jīng)過(guò)事件
onmouseout：鼠標(biāo)離開(kāi)事件
onmousemove：鼠標(biāo)移動(dòng)事件
onfocus：鼠標(biāo)獲得焦點(diǎn)事件
onblur：鼠標(biāo)失去焦點(diǎn)事件
73:常見(jiàn)的鍵盤(pán)事件.
onkeydown:鍵盤(pán)按下時(shí)觸發(fā)
onkeyup:鍵盤(pán)彈起時(shí)觸發(fā)
對(duì)于鼠標(biāo)事件线脚，事件對(duì)象中有一系列的XY記錄了鼠標(biāo)的位置信息。而鍵盤(pán)事件中，事件對(duì)象有一個(gè)event.keyCode屬性浑侥，記錄了按下去的鍵的鍵盤(pán)碼.
74:正則表達(dá)式在筆記本與特效第五天的筆記上.
