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
js之parentElement属性的更多相关文章
- 简单理解js的prototype属性
在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程. 百度js的prototype的文章,先看看,W3School关于prototype的介绍: 你觉得这概念适合定义js的pr ...
- JS中style属性
解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...
- JS获取网页属性包括宽、高等
JS获取网页属性包括宽.高等. function getInfo() { // www.jbxue.com var s = ""; s += " 网页可见区域宽:&q ...
- 用js控制css属性
在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...
- jQuery与js的length属性
js:length 属性可返回字符串中的字符数目. stringObject.length jQuery:length 属性包含 jQuery 对象中元素的数目. $(selector).length ...
- js 获取对象属性个数
js 获取对象属性个数 方法一: var attributeCount = function(obj) { var count = 0; for(var i in obj) { if(obj.hasO ...
- Vue.js：计算属性
ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...
- JS获取元素属性和自定义属性
获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...
- js dom element 属性整理（原创）
最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...
随机推荐
- OA,ERP等源码一部分演示
更多源码http://www.pssdss.com QQ:11851298 功能强大的JAVA开发的ERP源码http://cx050027.pssdss.com:8080/ 用户名pssdss ...
- postInvalidate、removeAllViewsInLayout、refreshDrawableState用法
postInvalidate.invalidate:会调用控件的onDraw()重绘控件 refreshDrawableState:当控件在使用一个对控件状态敏感的Drawable对象时使用,如一个B ...
- Android样式——Styles
说明 样式(style)是属性的集合,用来指定View或者Window的外观和格式. 这些属性可以是height(高度).padding(内边距).font size(字体颜色)等. 样式定义在另一个 ...
- JMX学习笔记(三)-MXBean
在MBean中有只要遵循以下两个规则,我们就可以在jconsole中动态的改变MBean中的属性值 1. JMX中要定义接口必须以xxxMBean的规范定义 2. 得有类实现xxxMBean接口 例如 ...
- 设计模式之Memento(备忘机制)
Memento备望录模式定义:memento是一个保存另外一个对象内部状态拷贝的对象.这样以后就可以将该对象恢复到原先保存的状态. Memento模式相对也比较好理解,我们看下列代码: public ...
- Selenium2Library系列 keywords 之 _SelectElementKeywords 之 get_list_items(self, locator)
def get_list_items(self, locator): """Returns the values in the select list identifie ...
- 【打包成exe安装包文件发布你的程序】使用QT联系人管理系统的例子
[前言]在 QT数据库使用案列[联系人]-- 使用sqlite和QStringListModel 中,我们写了这个程序,如何将它打包成安装文件发给其他小伙伴呢? 我们使用 nsis-2.46-setu ...
- C# 检测机器是否有声卡设备
有时候我们的程序需要进行音频的播放,则我们首先需要判断机器是否有声卡能够进行音频的播放.在网上找了一下没有发现太多关于如何检机器是否有声卡的例子.我在看了一些文档后自己写了一个小测试程序,如果机器装有 ...
- 房租管理小软件（四）：对linq的使用
1.对LInq的封装如下: private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMap ...
- 微软Azure云主机及blob存储的网络性能测试
http://www.cnblogs.com/sennly/p/4137024.html 微软Azure云主机及blob存储的网络性能测试 1. 测试目的 本次测试的目的在于对微软Azure的云主机. ...