为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
访问父节点parentNode,JavaScript进阶篇教程-慕课网
章节
课签
笔记
占位
占位

访问父节点parentNode

获取指定节点的父节点

语法:

elementNode.parentNode

注意:父节点只能有一个。

看看下面的例子,获取 P 节点的父节点,代码如下:

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

运行结果:

parentNode 获取指点节点的父节点
DIV

访问祖节点:

elementNode.parentNode.parentNode

看看下面的代码:

<div id="text">  
  <p>
    parentNode      
    <span id="con"> 获取指点节点的父节点</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.parentNode.nodeName);
</script>

运行结果:

parentNode获取指点节点的父节点
DIV

注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

任务

试一试,通过获取的mylist节点,使用访问父节点parentNode,将"HTML/CSS"课程内容输出。

补充第30行代码,将"HTML/CSS"课程内容输出。

?不会了怎么办

document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);

||

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

举报

0/150
提交
取消