js之parentElement屬性


<html>
<head>
</head>
<body>
	<form name="a ">
		<table name="b ">
			<tr name="c ">
				<td name="d "><select name="e "
					onchange="xx(this.parentElement.parentElement.parentElement.parentElement.parentElement.name) ">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
				</select></td>
				<td> </td>

			</tr>
			<tr> 
			</tr>
		</table>
	</form>
</body>
<script language="javascript" type="text/javascript">
	function xx(a) {
		alert(a);
	}
</script>
</html>

注意parentELement第一個時返回的是當前元素對象 

結果輸出a,這個測試是在IE下面進行的,firefox無效

 

http://www.w3school.com.cn/css/pr_class_position.asp

先是 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 被其他瀏覽支持
詳細出處參考:http://www.jb51.net/article/22705.htm


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM