js获取父级元素

JavaScript091

js获取父级元素,第1张

1、打开编辑工具editplus，点击editplus菜单栏上的【File】-->New -->HTML page。

2、新建好html页面后，editplus自动帮助我们生成了框架，先把title修改下，然后保存。

3、在body区域里添加了子，父，祖父三级div，代码如下。

4、演示代码写好后，打开浏览器，在浏览器上运行看看效果。

5、下面在head区域里添加实现js获取最高父级的代码，代码具体如下，这样利用了while循环来判断的。

6、实现好后，保存代码，此时再到浏览器上刷新访问，看下，此时弹出对话框告诉最后父级是zufu。

你的子页面是一个iframe吗？如果是这样，你可以往iframe的url传入一个参数如btnid：

http://your-iframe-url.com/page/?btnid，子页面通过location.search获取到查询字符串“?btnid”，你自己去掉问号，就可以获取到父页面的btnid了。

我还是写个简单的例子吧：

父页面的js：

$(".btn").click(function(){

    $("#child-frame").src="http://your-iframe-url.com/page/?"+this.id

})

子页面的js：

var id = location.search.substr(1)

首先通过js获取到当前img对象，可以使用document.getElementById()的方式，然后通获取到的对象的parentElement属性指向的就是当前元素的直接父级元素。

// 获取到当前IMG对象

var obj = document.getElementById("imgId")

// 获取到IMG对象的直接父级对象元素

var parentEl = obj.parentElement

示例效果代码：

<html>

<head>

<meta http-equiv="content-type" content="text/htmlcharset=GBK">

<style>

#div_parentDiv{width:20%text-align:center}

.mouseoverCss{border:1px solid #FF0000}

.mouseoutCss{border:1px solid #EEEEEE}

</style>

<script type="text/javascript">

function getParentEl(obj, showColor){

if (obj) {

// 这个就是获取当前对象的上一级元素

var parentEl = obj.parentElement

var className = "mouseoutCss"

if (showColor) {

className = "mouseoverCss"

}

parentEl.className = className

}

}

</script>

</head>

<body>

<div id="div_parentDiv" class="mouseoutCss">

<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/avarta/66/r6s1g11.gif" onmouseover="getParentEl(this, true)" onmouseout="getParentEl(this, false)" />

</div>

</body>

</html>