js parentElement和offsetParent之間的區(qū)別
更新時間：2010年03月23日 23:15:56 作者：
這里主要說的是 offsetParent 屬性，這個屬性在 MSDN 的文檔中也沒有解釋清楚，這就讓人更難理解這個屬性。 這幾天在網上找了些資料看看，再加上自己的一些測試，對此屬性有了那么一點的了解，在這里總結一下。
首先是 parentElement 屬性，這個屬性好理解，就是在 DOM 層次結構定義的上下級關系，如果元素A包含元素B，那么元素B就可以通過 parentElement 屬性來獲取元素A。
這里主要說的是 offsetParent 屬性，這個屬性在 MSDN 的文檔中也沒有解釋清楚，這就讓人更難理解這個屬性。 這幾天在網上找了些資料看看，再加上自己的一些測試，對此屬性有了那么一點的了解，在這里總結一下。
要明白 offsetParent 屬性，要先明白“已定位元素” 這個名字，所謂“已定位元素”就是指給元素設置了 position 屬性的樣式，并且 position 樣式屬性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 屬性獲取父級對象時有以下兩種情況：
1、元素本身已經定位
如果元素本身已經定位，那么 offsetParent 屬性返回此元素已定位父級元素，如沒有已定位的父級元素，則返回 BODY 對象，例如：
<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 對象
obj2.offsetParent 返回 pObj1 對象
2、元素沒有定位
如果元素沒有定位， offsetParent 不但會找已經定位的父級元素而且還會查找類型為 TD 和 TABLE 的父級元素，只要找到這三種父級元素的其中任何一種元素將返回此元素，否則返回 BODY 對象，例如：
<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 對象
obj2.offsetParent 返回 pObj2 對象
在 DOM 元素的屬性里，還有 parentNode 這個屬性，其實這個屬性跟 parentElement 屬性是一個意思，parentElement 屬性是 IE 特有的，W3C 標準是使用 parentNode 屬性，還有 children 和 childNodes, children 是 IE 特有的， childNodes 被其他瀏覽支持。
這里主要說的是 offsetParent 屬性，這個屬性在 MSDN 的文檔中也沒有解釋清楚，這就讓人更難理解這個屬性。 這幾天在網上找了些資料看看，再加上自己的一些測試，對此屬性有了那么一點的了解，在這里總結一下。
要明白 offsetParent 屬性，要先明白“已定位元素” 這個名字，所謂“已定位元素”就是指給元素設置了 position 屬性的樣式，并且 position 樣式屬性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 屬性獲取父級對象時有以下兩種情況：
1、元素本身已經定位
如果元素本身已經定位，那么 offsetParent 屬性返回此元素已定位父級元素，如沒有已定位的父級元素，則返回 BODY 對象，例如：
復制代碼 代碼如下:
<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 對象
obj2.offsetParent 返回 pObj1 對象
2、元素沒有定位
如果元素沒有定位， offsetParent 不但會找已經定位的父級元素而且還會查找類型為 TD 和 TABLE 的父級元素，只要找到這三種父級元素的其中任何一種元素將返回此元素，否則返回 BODY 對象，例如：
復制代碼 代碼如下:
<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 對象
obj2.offsetParent 返回 pObj2 對象
在 DOM 元素的屬性里，還有 parentNode 這個屬性，其實這個屬性跟 parentElement 屬性是一個意思，parentElement 屬性是 IE 特有的，W3C 標準是使用 parentNode 屬性，還有 children 和 childNodes, children 是 IE 特有的， childNodes 被其他瀏覽支持。
相關文章
這篇文章主要介紹了js文件Cookie存取值的使用,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了document.cookie 使用,主要包括cookie設置，修改cookie值及獲取cookie值的相關知識，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06
驗證碼功能真的無處不在，為了提高網站的安全性，驗證碼功能是必要的環(huán)節(jié)，今天小編通過本文給大家分享js登錄驗證碼的實現，感興趣的朋友跟著小編一起學習吧2016-10-10
下面小編就為大家?guī)硪黄袛酀L動條滑到底部觸發(fā)事件的實例講解。具有很好的參考價值。一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
這篇文章主要給大家介紹了關于微信小程序中網絡請求緩存的解決方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
今天我們聊一聊,一個非常有趣且重要的問題,如何用原生js實現拍照功能？這時候,有的朋友會說,為什么要用原生js實現呀,這么麻煩還要自己動腦子,直接用第三方庫多好呀,但是,你難道不好奇它的底層js實現嗎？感興趣的同學跟著小編一起來瞧瞧吧2023-12-12
這篇文章主要為大家詳細介紹了js實現簡單放大鏡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了如何使用JavaScript實現獲取URL中參數值的4種方法,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2025-02-02
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來創(chuàng)建模態(tài)窗口豐富用戶體驗，或者為用戶添加實用功能。下面通過本文給大家介紹如何使用bootstrap插件來實現模態(tài)框2016-12-12
這篇文章主要介紹了移動端如何用下拉刷新的方式實現上拉加載，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12