js parentElement和offsetParent之間的區(qū)別
更新時(shí)間:2010年03月23日 23:15:56 作者:
這里主要說的是 offsetParent 屬性,這個(gè)屬性在 MSDN 的文檔中也沒有解釋清楚,這就讓人更難理解這個(gè)屬性。 這幾天在網(wǎng)上找了些資料看看,再加上自己的一些測試,對(duì)此屬性有了那么一點(diǎn)的了解,在這里總結(jié)一下。
首先是 parentElement 屬性,這個(gè)屬性好理解,就是在 DOM 層次結(jié)構(gòu)定義的上下級(jí)關(guān)系,如果元素A包含元素B,那么元素B就可以通過 parentElement 屬性來獲取元素A。
這里主要說的是 offsetParent 屬性,這個(gè)屬性在 MSDN 的文檔中也沒有解釋清楚,這就讓人更難理解這個(gè)屬性。 這幾天在網(wǎng)上找了些資料看看,再加上自己的一些測試,對(duì)此屬性有了那么一點(diǎn)的了解,在這里總結(jié)一下。
要明白 offsetParent 屬性,要先明白“已定位元素” 這個(gè)名字,所謂“已定位元素”就是指給元素設(shè)置了 position 屬性的樣式,并且 position 樣式屬性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 屬性獲取父級(jí)對(duì)象時(shí)有以下兩種情況:
1、元素本身已經(jīng)定位
如果元素本身已經(jīng)定位,那么 offsetParent 屬性返回此元素已定位父級(jí)元素,如沒有已定位的父級(jí)元素,則返回 BODY 對(duì)象,例如:
<body>
<p>
<div>
<span id="obj1" style="position:absolute"></span>
</div>
<div id="pObj1" style="position:absolute">
<span id="obj2" style="position:absolute"></span>
</div>
</p>
</body>
obj1.offsetParent 返回 BODY 對(duì)象
obj2.offsetParent 返回 pObj1 對(duì)象
2、元素沒有定位
如果元素沒有定位, offsetParent 不但會(huì)找已經(jīng)定位的父級(jí)元素而且還會(huì)查找類型為 TD 和 TABLE 的父級(jí)元素,只要找到這三種父級(jí)元素的其中任何一種元素將返回此元素,否則返回 BODY 對(duì)象,例如:
<table width="500" border="0">
<tr>
<td id="td1">
<div id="pObj1">
<span id="obj1"></span>
</div>
</td>
</tr>
<tr>
<td>
<div id="pObj2" style="position:relative">
<span id="obj2"></span>
</div>
</td>
</tr>
</table>
obj1.offsetParent 返回 td1 對(duì)象
obj2.offsetParent 返回 pObj2 對(duì)象
在 DOM 元素的屬性里,還有 parentNode 這個(gè)屬性,其實(shí)這個(gè)屬性跟 parentElement 屬性是一個(gè)意思,parentElement 屬性是 IE 特有的,W3C 標(biāo)準(zhǔn)是使用 parentNode 屬性,還有 children 和 childNodes, children 是 IE 特有的, childNodes 被其他瀏覽支持。
這里主要說的是 offsetParent 屬性,這個(gè)屬性在 MSDN 的文檔中也沒有解釋清楚,這就讓人更難理解這個(gè)屬性。 這幾天在網(wǎng)上找了些資料看看,再加上自己的一些測試,對(duì)此屬性有了那么一點(diǎn)的了解,在這里總結(jié)一下。
要明白 offsetParent 屬性,要先明白“已定位元素” 這個(gè)名字,所謂“已定位元素”就是指給元素設(shè)置了 position 屬性的樣式,并且 position 樣式屬性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 屬性獲取父級(jí)對(duì)象時(shí)有以下兩種情況:
1、元素本身已經(jīng)定位
如果元素本身已經(jīng)定位,那么 offsetParent 屬性返回此元素已定位父級(jí)元素,如沒有已定位的父級(jí)元素,則返回 BODY 對(duì)象,例如:
復(fù)制代碼 代碼如下:
<body>
<p>
<div>
<span id="obj1" style="position:absolute"></span>
</div>
<div id="pObj1" style="position:absolute">
<span id="obj2" style="position:absolute"></span>
</div>
</p>
</body>
obj1.offsetParent 返回 BODY 對(duì)象
obj2.offsetParent 返回 pObj1 對(duì)象
2、元素沒有定位
如果元素沒有定位, offsetParent 不但會(huì)找已經(jīng)定位的父級(jí)元素而且還會(huì)查找類型為 TD 和 TABLE 的父級(jí)元素,只要找到這三種父級(jí)元素的其中任何一種元素將返回此元素,否則返回 BODY 對(duì)象,例如:
復(fù)制代碼 代碼如下:
<table width="500" border="0">
<tr>
<td id="td1">
<div id="pObj1">
<span id="obj1"></span>
</div>
</td>
</tr>
<tr>
<td>
<div id="pObj2" style="position:relative">
<span id="obj2"></span>
</div>
</td>
</tr>
</table>
obj1.offsetParent 返回 td1 對(duì)象
obj2.offsetParent 返回 pObj2 對(duì)象
在 DOM 元素的屬性里,還有 parentNode 這個(gè)屬性,其實(shí)這個(gè)屬性跟 parentElement 屬性是一個(gè)意思,parentElement 屬性是 IE 特有的,W3C 標(biāo)準(zhǔn)是使用 parentNode 屬性,還有 children 和 childNodes, children 是 IE 特有的, childNodes 被其他瀏覽支持。
相關(guān)文章
JavaScript登錄驗(yàn)證碼的實(shí)現(xiàn)
驗(yàn)證碼功能真的無處不在,為了提高網(wǎng)站的安全性,驗(yàn)證碼功能是必要的環(huán)節(jié),今天小編通過本文給大家分享js登錄驗(yàn)證碼的實(shí)現(xiàn),感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-10-10
判斷滾動(dòng)條滑到底部觸發(fā)事件(實(shí)例講解)
下面小編就為大家?guī)硪黄袛酀L動(dòng)條滑到底部觸發(fā)事件的實(shí)例講解。具有很好的參考價(jià)值。一起跟隨小編過來看看吧,希望對(duì)大家有所幫助2017-11-11
微信小程序中網(wǎng)絡(luò)請(qǐng)求緩存的解決方法
這篇文章主要給大家介紹了關(guān)于微信小程序中網(wǎng)絡(luò)請(qǐng)求緩存的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-02-02
移動(dòng)端如何用下拉刷新的方式實(shí)現(xiàn)上拉加載
這篇文章主要介紹了移動(dòng)端如何用下拉刷新的方式實(shí)現(xiàn)上拉加載,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12 
