章节
问答
课签
笔记
评论
占位
占位

访问父节点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);

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

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

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

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / Roy_Luo4333469
document.write(mylist.parentNode.parentNode.parentNode.lastChild.firstChild.nodeValue);

最新回答 / 慕田峪8063247
我把代码在我的编辑器上跑了一遍,得到的是9,怎么会是6?

最新回答 / 慕田峪8063247
一层一层往上数,就是三个parentNode,就得到了最大的这个ul,也就是<body>下面紧挨着的这个ul。 然后官方给的答案是错误的,正确的应该是document.write(mylist.parentNode.parentNode.parentNode.childNodes[7].innerHTML);

最新回答 / 粥可温Ni
兄弟这个输出并不是指的那个HTML/CSS里面课程的内容啊,这个nodeName指的是元素的标签名,可以通过祖先元素的最后一个子节点的innerHTML属性去输出对应的值。

最新回答 / weixin_慕运维0201071
标签之间的空白算一个节点而不是本身算一个节点

最新回答 / qq_慕九州6342324
        var mylist = document.getElementById("tcon");        var p = mylist.parentNode.parentNode.parentNode;        var c = p.childNodes;        for (a = 0; a < c.length; a++) {            if (c[a].nodeType == 1 && c[a].getAttribute("id") == "...

最赞回答 / weixin_慕桂英4346352
因为你最后</li>和</ul>换行了,所以最后一个节点是一个空值

已采纳回答 / weixin_慕桂英4346352
通俗易懂的来讲parentNode选的是你的父亲,和你前后站的是谁无关;而lastChild选的是最后一个人,是谁都一样

最赞回答 / 慕村6055097
document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);

最新回答 / qq_我可是张小一啊_0
<script  type="text/javascript">       var mylist = document.getElementById("tcon");     document.write(mylist.parentNode.parentNode.parentNode.lastChild.firstChild.nodeValue)</script> 

最赞回答 / 几盎丶
可以仔细看下DOM树结构,发现我们选中的带有class:tcon的li元素,他的父结点是ul元素结点,ul元素结点的父节点是id:lesson1的li元素结点,Id:lesson1的li结点的父结点是id:con的ul元素结点,然后id:con的ul元素结点有8个子节点,编号为0,1,2,3,4,5,6,7,再次写下这8个结点的nodeName(结点名)作为参考0:#text(默认文本元素结点)1:LI 2:#text 3:LI 4:#text 5:LI 6:#text 7:LI(我们要的nodeValu...

已采纳回答 / qq_慕先生7007143
  var num = mylist.parentNode.parentNode.parentNode;  document.write(num.lastChild.innerHTML)你num=后面那个写入是多余的,你这么写的话num得到的不是你想要的
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言