自定義屬性及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展案例: 求一個盒子的絕對位置密任。