DOM相關屬性,方法,相容性問題處理小析

2022-08-18 02:33:10 字數 2253 閱讀 4246

dom:document object model文件物件模型,用於讓程式(js)取操作頁面中的元素。dom節點型別有12種。

(一)屬性

一、子節點操作

1.所有子節點

(1)元素.childnodes ==>唯讀,元素子節點列表集合(只包含一級子節點,不包含後輩孫級以下節點)

標準瀏覽器:包含了文字和元素型別節點,也會包含非法巢狀的子節點。

非標準瀏覽器:只包含元素型別節點,ie7以下不包含非法巢狀的子節點。

相容處理:由於文字節點無背景等樣式,故在設定樣式前用.nodetype判斷節點型別。

元素.nodetype得到節點的型別:

1--元素節點;

2--屬性節點;

3--文字節點;

元素.attributes ==>唯讀,獲取元素屬性名,返回屬性列表集合

元素.attributes[n].name ==>得到對應的屬性值

(2)元素.children ==>唯讀,子節點列表集合

標準瀏覽器下和非標準瀏覽器下都只包含元素型別的節點,把非法巢狀的標籤設定為孫節點。

因此,獲取子節點多採取這種方式。

2.第乙個子節點

(1)元素.firstchild ==>唯讀,元素的第乙個子節點

標準瀏覽器:會包含文字型別節點

非標準瀏覽器:只包含元素型別節點

(2)元素.firstelementchild ==>唯讀,第乙個子節點

標準瀏覽器:獲取第乙個元素型別的子節點

非標準瀏覽器:無此屬性

相容處理:var ofirst=元素.firstelementchild||元素.firstchild(當元素下無子節點時,此處理方式有問題,會得到

元素下的文字節點,故盡量採用此法:元素.children[0].style.background='red')

3.最後乙個子節點

元素.lastchild

元素.lastelementchild

相容性問題及處理同第乙個子節點方式

二、兄弟節點操作

1.元素的下乙個兄弟節點

元素.nextsibling

元素.nextelementsibling

相容性問題及處理同第乙個子節點方式

2.元素的上乙個兄弟節點

元素.previoussibling

元素.previouselementsibling

相容性問題及處理同第乙個子節點方式

三、父節點操作

1.元素.parentnode ==>唯讀,當前元素的父節點(無相容性問題)

2.元素.offsetparent ==>唯讀,離當前元素最近的乙個有定位屬性的父節點;如果沒有定位的父級,預設為body;ie7以

下,如果當前元素有定位則父節點是html;ie7以下,如果當前元素的某個父級觸發了layout,那麼offsetparent就會被

指向到這個觸發了layout特性的父節點上。

3.元素.offsetleft(offsettop) ==>唯讀,當前元素到定位父級的偏移值

當有定位父級時:

ie7及以下:

(1)如果自己無定位,那麼該屬性是到body的距離

(2)如果自己有定位,那麼就是到定位父級的距離

其他瀏覽器:到定位父級的距離

當父級無定位時:

offsetparent:body

offsetleft,offsettop:html

四、寬高屬性

元素.style.width/height ==>元素的樣式寬/高

元素.style.clientwidth/height ==>元素的可視寬/高=樣式寬/高+padding

元素.style.offsetwidth/height ==>元素的佔位寬/高=樣式寬/高+padding+border

獲取元素絕對位置封裝函式:因為不知道該元素的父級是否有定位。

function getpos(obj);

while(obj)

return pos;

}(二)方法

一、動態建立子節點

document.createelement('元素名稱') ==>建立元素,還不存在頁面裡

將元素新增到頁面中:

(2)父級.insertbefort('要新增的元素','被插入的元素') ==>在指定元素前插入乙個新元素

二、刪除子節點

父級.remove('要刪除的子節點')

三、替換子節點

被替換的節點父級.replace('新節點','被替換的節點')

piczoom相容性問題 相容性問題

1.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff 下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案 給文字設定 line height 確保所有文字都有預設的 lin...

相容性問題

原文 1.ie浮動 margin 產生的雙倍距離 box 2.display inline block ie6,7下不相容 用float left 3.position fixed ie6不支援 ie6下用position和js模擬,或者完全不用,用position和js模擬 4.cursor ha...

相容性問題

ie6下最小高度為19px,增加font size 0後可縮小為2px 還是沒解決嘛 orz。增加overflow hidden屬性,截掉多餘的高度!ie6 ie7只支援標籤的四個偽類 lvha 不支援其他偽類。ie6,7下父級有寬度就可以不用清浮動,其他瀏覽器不可以哦 haslayout屬性 在i...