自定義屬性及getAttribute方法
- getAttribute() 獲取特定元素節(jié)點屬性的值，某些低版本瀏覽器不支持.
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;//js代碼添加自定義的屬性(自定義索引) 在ie8下面能夠看到這個屬性。chrome可以使用但是看不到
}
- setAttribute() 設(shè)置特定元素節(jié)點屬性的值绅喉，某些低版本瀏覽器不支持
- removeAttribute() 移除特定元素節(jié)點屬性劝枣，某些低版本瀏覽器不支持
outerHTML/innerHTML/innerText
- innerHTML(可讀可寫)：獲取和設(shè)置元素節(jié)點里的內(nèi)容誉裆，從對象的起始位置到終止位置的全部內(nèi)容,不包括自身Html 標(biāo)簽勘天。
- outerHTML：除了包含innerHTML的全部內(nèi)容外, 還包含對象標(biāo)簽本身饰及。
- innerText：獲取某個網(wǎng)頁元素的文本內(nèi)容（忽略標(biāo)簽龙助，不常用）
DOM元素類型(元素和文本)
- 節(jié)點可以分為元素節(jié)點砰奕、屬性節(jié)點和文本節(jié)點...，而這些節(jié)點又有三個非常有用的屬性 提鸟，分別為：nodeName（節(jié)點的名稱）军援、nodeType（節(jié)點類型） 和 nodeValue（文本）
- nodeType：元素(1) 屬性(2) 文本(3)
//children:子元素，獲取元素對象的子元素称勋。類數(shù)組(下標(biāo)和length)
oUl.children.length)//[object HTMLCollection] 4
oUl.children[0];//獲取ul里面第一個元素胸哥。
獲取元素內(nèi)容用innerHTML，表單使用value
childNodes/過濾空白節(jié)點
- childNodes 獲取當(dāng)前元素節(jié)點的所有子節(jié)點,這里面包含空白節(jié)點赡鲜，在IE9之前烘嘱，IE瀏覽器會自動忽略空白節(jié)點（兼容問題）.
高級選取firstChild/lastChild/parentNode/previousSibling/nextSibling
- firstChild/firstElementChild 獲取當(dāng)前元素節(jié)點的第一個子節(jié)點
firstChild包含空白節(jié)點 - lastChild 獲取當(dāng)前元素節(jié)點的最后一個子節(jié)點
- ownerDocument 獲取該節(jié)點的文檔根節(jié)點（document）
- document.documentElement 獲取的html標(biāo)簽元素
- parentNode 獲取當(dāng)前節(jié)點的父節(jié)點
- previousSibling 獲取當(dāng)前節(jié)點的前一個兄弟節(jié)點
- nextSibling 獲取當(dāng)前節(jié)點的后一個兄弟節(jié)點
獲取非行內(nèi)樣式
- offsetWidth昆禽、offsetHeight、offsetLeft蝇庭、offsetTop醉鳖、offsetParent(定位父級)沒有單位
盒子的偏移值，如果存在定位父級哮内，以父級為基準(zhǔn)盗棵，沒有定位父級以body元素為基準(zhǔn)
注意，只能獲取北发，不能賦值
oUl.style.width只能獲取行內(nèi)元素css
求元素的絕對位置
function getpostion(obj) {
//存儲最終的值
var _left = 0;
var _top = 0;
while (obj) { //檢測定位父級是否存在
_left += obj.offsetLeft;
_top += obj.offsetTop;
obj = obj.offsetParent; //獲取當(dāng)前元素的定位父級
}
return { //結(jié)果返回一個對象纹因，兩個值
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操作先放置在文檔碎片中瞭恰，最后在追加給對應(yīng)的元素。
應(yīng)用
-
進(jìn)度條
進(jìn)度條 簡易年歷
-
自動登錄勾選提示
勾選提示
綜合應(yīng)用
1．點擊按鈕換圖片
2．tab切換案例
3．?dāng)U展案例： QQ延遲提示框狱庇，兩個盒子兄弟關(guān)系惊畏，中間有空隙。
4．?dāng)U展案例： 密碼強(qiáng)度
5．?dāng)U展案例： 求一個盒子的絕對位置密任。
