JS中parentNode和parentElement的区别

最新推荐文章于 2023-05-05 15:00:24 发布
最新推荐文章于 2023-05-05 15:00:24 发布
阅读量770 收藏 1
点赞数
分类专栏： # JavaScript 前端 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43616817/article/details/118601832
版权

参考文章

以一个网页作为例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="bb">
            <div class="box1"></div>
            <div class="box">
                <p title="hhhh">第1</p>
                <p dataId="2">第2</p>
                <p>第3</p>
                <p>第4</p>
            </div>
            <div class="box2"></div>
        </div>
<script type="text/javascript">  var pp = document.getElementsByClassName("box")[0];
</script>
</body>
</html>

输出pp：
在这里插入图片描述
分别输出parentNode和parentElement：
在这里插入图片描述
区别：
在获取根部document节点是，parentElement找的是元素，因此报错 null ，而parentNode获取的是节点，返回的是 #document

拓展：
查找两个节点的最近的一个共同父节点，可以包括节点自身
（oNode1 和 oNode2 在同一文档中，且不会为相同的节点）

  • （父节点的父节点也算父节点，意思是父节点不止一个）
function commonParentNode(oNode1, oNode2) {
    while(true){
        if(oNode1.contains(oNode2))
            return oNode1
        oNode1 = oNode1.parentNode
    }
}

不断循环oNode1的父节点，若其包含oNode2，则该节点为最近父节点

bats421
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js之parentElement属性
weixin_30807779的博客
11-01 2192
<html> <head> </head> <body> <form name="a "> <table name="b "> <tr name="c "> <td name="d "><select name="e " onchange="xx(...
Js中parentNode,parentElement,childNodes,children之间的区别
10-26
主要是对Js中parentNode,parentElement,childNodes,children的区别进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
parentNode和parentElement的区别
05-05 1104
在DOM文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑。两者在通常情况下都是一样的，因为包含元素的节点只有可能是元素节点，这里可能会有一个误区，有些人可能会想文本节点是否可以包含元素节点，来作为父节点，这里是不行的，文本节点只是文本本身，自身算一个节点，文本节点的父节点直接是元素节点。那下面我们就说一下，parentNode,parentElement,的特例。
parentNode 与 parentElement
kfepiza的博客
04-27 554
html元素的 parentNode   是 document。html元素的 parentElement 是 null。
JS获取父节点、子节点、兄弟节点
qq_44552416的博客
02-22 8950
1、访问父节点 parentNode : Node 类型，返回指定节点的父节点,如果指定节点没有父节点，则返回 null <div id="box"> <p id="hello">hello world!</p> </div> <script> var hello=document.getElementById("hello"); console.log(hello.parentNode.nodeName); //DIV </scr
深入了解parentNode,parentElement,childNodes,children的区别，一看就懂
weixin_44206561的博客
08-26 2793
今天是准备面试的第七天，js是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成，我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。 parentNode，parentElement，childNodes和children都是对节点的操作，因此我们需要对dom树有一定的了解，在文档对象模型中，每一部分都是由节点组成（包括document都是一个节点），节点的类型一共有三种：元素节点，属性节点，文本节点，
Javascript ParentNode和ChildNode接口原理解析
10-15
主要介绍了Javascript ParentNode和ChildNode接口原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
javascript中parentNode,childNodes,children的应用详解
10-26
本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
js parentElement和offsetParent之间的区别
12-11
首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。 这里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。 要明白 offsetParent 属性，要先明白“已定位元素” 这个名字，所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且 position 样式属性的值等于 abs
parentNode,parentElement,childNodes,children最经典讲解
热门推荐
qq_36010298的博客
11-26 2万+
首先了解parentNode,parentElement,childNodes,children四大属性之前，必须对Dom树有一定的了解，在Dom文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑， 下来详细介绍，childNodes，childern， childNodes指的是返
parentNode,parentElement,childNodes,children的区别
我的技术博客
10-11 3202
从字面上我们可以知道一个是parent的节点,一个是parent的元素,实际上在很多时候它们的返回的内容是相同的,比如有这么一段代码: 节点 item1 item i item ii item iii item2 item3    var item1 = document.ge
Js-parentNode、parentElement，childNodes、children 它们有什么区别呢？
weixin_30536513的博客
10-03 155
原文：http://www.it130.cn/Article/FAQ/Web-kaifa/JavaScript/2007-3-20/2007032017013900.html 所属分类：Web 开发 JavaScript ---------------------------------------------------------------------- parentNode、pa...
JS教程:childNodes与parentNode
u010227447的专栏
10-19 808
如果你是高手，对于childNodes与parentNode并不陌生。其实他们就是DOM的两个特性/方法而以。 childNodes：表示对象的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性; parentNode：表示对象的父级节点。 当我解释完这两个方法以后，可能有人会问，他们有什么用，嘿嘿，当然有用，我们下面有一个例子来说明他们的作用。 如果我们有一个ul列表，
JS 中的parentElement的用法
haoxiang110的专栏
11-28 1万+
<br /><html> <br /><head> </head> <br /><body> <br /><form       name= "a ">       <br /><table   name= "b ">       <br /><tr   name= "c "   >       <br />                                <td   name= "d "   >       <br />                                   
js如何删除和添加一个新的元素到页面中
最新发布
07-13
在JavaScript中，可以使用DOM操作来删除和添加元素到页面中。下面分别介绍删除和添加元素的常用方法。 删除元素： 1. 获取要删除的元素的引用，可以使用`getElementById`、`getElementsByClassName`、`getElementsByTagName`等方法来获取元素。 2. 使用父元素的`removeChild`方法，将要删除的元素作为参数传入。 示例代码： ```javascript // 获取要删除的元素 var element = document.getElementById("myElement"); // 获取父元素 var parentElement = element.parentNode; // 删除元素 parentElement.removeChild(element); ``` 添加新元素： 1. 创建一个新的元素，可以使用`createElement`方法来创建指定标签名的元素。 2. 设置新元素的属性、内容等。 3. 找到要添加新元素的目标位置，可以使用`getElementById`等方法获取目标位置的父元素。 4. 使用父元素的`appendChild`方法，将新元素添加到指定位置。 示例代码： ```javascript // 创建新元素 var newElement = document.createElement("div"); // 设置新元素的属性或内容 newElement.innerHTML = "Hello, World!"; newElement.classList.add("myClass"); // 找到目标位置的父元素 var parentElement = document.getElementById("myParent"); // 添加新元素到目标位置 parentElement.appendChild(newElement); ``` 通过上述方法，你可以在JavaScript中删除和添加新的元素到页面中。记得根据实际需求调整代码中的选择器和具体操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值