<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

js之parentElement属性的更多相关文章

  1. 简单理解js的prototype属性

    在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程. 百度js的prototype的文章,先看看,W3School关于prototype的介绍: 你觉得这概念适合定义js的pr ...

  2. JS中style属性

    解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...

  3. JS获取网页属性包括宽、高等

    JS获取网页属性包括宽.高等. function getInfo()  { // www.jbxue.com var s = "";  s += " 网页可见区域宽:&q ...

  4. 用js控制css属性

    在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...

  5. jQuery与js的length属性

    js:length 属性可返回字符串中的字符数目. stringObject.length jQuery:length 属性包含 jQuery 对象中元素的数目. $(selector).length ...

  6. js 获取对象属性个数

    js 获取对象属性个数 方法一: var attributeCount = function(obj) { var count = 0; for(var i in obj) { if(obj.hasO ...

  7. Vue.js:计算属性

    ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...

  8. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  9. js dom element 属性整理(原创)

    最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...

随机推荐

  1. 【CSS】

    12个很少被人知道的CSS事实 通过CSS禁止Chrome自动为输入框添加橘黄色边框http://www.solagirl.net/override-chromes-automatic-border- ...

  2. 安装VS2015出现的bug,各位安装请注意

    昨天微软发布了vs2015 迫不及待的下载下来安装体验了一把,但是机器上同时安装有vs2010.vs2012.vs2013 .安装完成后,因为公司项目需要开发,打开vs2012 ,有如下提示: 百度查 ...

  3. About Wisdom

    All human wisdom is summed up in two words --- wait and hope.人类所有的智慧可以归结为两个词---等待和希望. —— Alexandre D ...

  4. cdn是什么和作用有些

    内容分发网络其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节点服务器所构 成的在现有的互联网基础之上的一层智能虚拟网络,CDN系 ...

  5. 《深入Java虚拟机学习笔记》- 第3章 安全

    3.1为什么需要安全性 Java的安全模型是其多个重要结构特点之一,它使Java成为适于网络环境的技术.因为网络提供了一条攻击连人的计算机的潜在途径,因此安全性是非常重要的.Java安全模型侧重于保护 ...

  6. dynamips虚拟服务:找不到指定设备

    刚开始接触dynamips,属于新手, 之前是可以正常使用dynamips的,但不知道什么原因就出现这样的问题 果断重新安装,之后可以正常使用

  7. [RQNOJ313]波浪数

    题目描述 波浪数是在一对数字之间交替转换的数,如1212121,双重波浪数则是指在两种进制下都是波浪数的数,如十进制数191919是一个十进制下的波浪数,它对应的十一进制数121212也是一个波浪数, ...

  8. Magento 头部的演示信息去除

    进入后台: 系统-配置, 然后选择左栏的“设计”, 选择右栏的HTML头信息里面有个“Display Demo Store Notice”, 默认是yes,设置为“no”就可以了.

  9. Python几个算法实现

    1.平衡点问题: 比如int[] numbers = {1,3,5,7,8,25,4,20}; 25前面的总和为24,25后面的总和也是24,25这个点就是平衡点:假如一个数组中的元素,其前面的部分等 ...

  10. asp.net 分析器错误消息: 文件.aspx.cs”不存在错误

    发布webapplication时后老是报告分析器错误消息: 文件.aspx.cs”不存在错误,差点抓狂,后来在网上搜到原因是: <%@ Page Language="C#" ...