js之DOM操作（访问父节点parentNode）

最新推荐文章于 2023-04-27 15:35:03 发布

_我就是愛自由

最新推荐文章于 2023-04-27 15:35:03 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： javascript DOM属性操作

本文链接：https://blog.csdn.net/u010359143/article/details/48624323

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

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

demo：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
  <ul> 
      <li id="tcon"> 基础语法</li>
      <li>流程控制语句</li>
      <li>函数</li>
      <li>事件</li>
      <li>DOM</li>
  </ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS 
  <ul>
    <li>文字</li>
    <li>段落</li>
    <li>表单</li>
    <li>表格</li>  
  </ul> 
</li></ul>  
<script  type="text/javascript">    
   var mylist = document.getElementById("tcon"); 
   document.write("HTML/CSS课程内容是：" + mylist.parentNode.parentNode.parentNode.lastChild.innerHTML); 
</script> 

</body>
</html>

运行结果：

    javascript
        基础语法
        流程控制语句
        函数
        事件
        DOM
    das
    dadf
    HTML/CSS
        文字
        段落
        表单
        表格

HTML/CSS课程内容是：HTML/CSS

    文字
    段落
    表单
    表格

_我就是愛自由

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js之DOM操作（访问父节点parentNode）

访问父节点parentNode获取指定节点的父节点语法：elementNode.parentNode注意:父节点只能有一个。看看下面的例子,获取 P 节点的父节点，代码如下: parentNode 获取指点节点的父节点 var mynode= document.getElementById("con"); document.write(mynode.pa
复制链接

扫一扫