自定義屬性及getAttribute方法
- getAttribute() 獲取特定元素節(jié)點(diǎn)屬性的值，某些低版本瀏覽器不支持.
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;//js代碼添加自定義的屬性(自定義索引) 在ie8下面能夠看到這個(gè)屬性。chrome可以使用但是看不到
}
- setAttribute() 設(shè)置特定元素節(jié)點(diǎn)屬性的值，某些低版本瀏覽器不支持
- removeAttribute() 移除特定元素節(jié)點(diǎn)屬性，某些低版本瀏覽器不支持
outerHTML/innerHTML/innerText
- innerHTML(可讀可寫(xiě))：獲取和設(shè)置元素節(jié)點(diǎn)里的內(nèi)容，從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,不包括自身Html 標(biāo)簽。
- outerHTML：除了包含innerHTML的全部?jī)?nèi)容外, 還包含對(duì)象標(biāo)簽本身。
- innerText：獲取某個(gè)網(wǎng)頁(yè)元素的文本內(nèi)容（忽略標(biāo)簽，不常用）
DOM元素類(lèi)型(元素和文本)
- 節(jié)點(diǎn)可以分為元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)...，而這些節(jié)點(diǎn)又有三個(gè)非常有用的屬性 ，分別為：nodeName（節(jié)點(diǎn)的名稱(chēng)）、nodeType（節(jié)點(diǎn)類(lèi)型） 和 nodeValue（文本）
- nodeType：元素(1) 屬性(2) 文本(3)
//children:子元素，獲取元素對(duì)象的子元素。類(lèi)數(shù)組(下標(biāo)和length)
oUl.children.length)//[object HTMLCollection] 4
oUl.children[0];//獲取ul里面第一個(gè)元素。
獲取元素內(nèi)容用innerHTML，表單使用value
childNodes/過(guò)濾空白節(jié)點(diǎn)
- childNodes 獲取當(dāng)前元素節(jié)點(diǎn)的所有子節(jié)點(diǎn),這里面包含空白節(jié)點(diǎn)，在IE9之前，IE瀏覽器會(huì)自動(dòng)忽略空白節(jié)點(diǎn)（兼容問(wèn)題）.
高級(jí)選取firstChild/lastChild/parentNode/previousSibling/nextSibling
- firstChild/firstElementChild 獲取當(dāng)前元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
firstChild包含空白節(jié)點(diǎn) - lastChild 獲取當(dāng)前元素節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
- ownerDocument 獲取該節(jié)點(diǎn)的文檔根節(jié)點(diǎn)（document）
- document.documentElement 獲取的html標(biāo)簽元素
- parentNode 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
- previousSibling 獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)
- nextSibling 獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)
獲取非行內(nèi)樣式
- offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent(定位父級(jí))沒(méi)有單位
盒子的偏移值，如果存在定位父級(jí)，以父級(jí)為基準(zhǔn)，沒(méi)有定位父級(jí)以body元素為基準(zhǔn)
注意，只能獲取，不能賦值
oUl.style.width只能獲取行內(nèi)元素css
求元素的絕對(duì)位置
function getpostion(obj) {
//存儲(chǔ)最終的值
var _left = 0;
var _top = 0;
while (obj) { //檢測(cè)定位父級(jí)是否存在
_left += obj.offsetLeft;
_top += obj.offsetTop;
obj = obj.offsetParent; //獲取當(dāng)前元素的定位父級(jí)
}
return { //結(jié)果返回一個(gè)對(duì)象，兩個(gè)值
left: _left,
top: _top
}
}
- 獲取選擇器里面的css相關(guān)屬性的值。
- 標(biāo)準(zhǔn)瀏覽器：getComputedStyle()
- IE8及其以下瀏覽器：currentStyle()
兼容操作
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
文檔碎片（createDocumentFragment）
文檔碎片在理論上可以提高DOM操作的執(zhí)行效率，將要追加的dom操作先放置在文檔碎片中，最后在追加給對(duì)應(yīng)的元素。
應(yīng)用
-
進(jìn)度條
進(jìn)度條 簡(jiǎn)易年歷
-
自動(dòng)登錄勾選提示
勾選提示
綜合應(yīng)用
1．點(diǎn)擊按鈕換圖片
2．tab切換案例
3．?dāng)U展案例： QQ延遲提示框，兩個(gè)盒子兄弟關(guān)系，中間有空隙。
4．?dāng)U展案例： 密碼強(qiáng)度
5．?dāng)U展案例： 求一個(gè)盒子的絕對(duì)位置。
