Javascript中parentElement和parentNode的区别

最新推荐文章于 2022-08-07 13:05:19 发布
最新推荐文章于 2022-08-07 13:05:19 发布
阅读量2.8k 收藏
点赞数 3
文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42950333/article/details/115553204
版权

parentNode和parentElement的区别

第一点：parentNode跟parentElement，前者是w3c标准，后者只ie支持。

parentElement是ie专用的，就是说在firefox(ff)浏览器里是不能使用的，一般情况parentNode可以取代parentElement的所有功能。

第二点：

parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。element是包含在node里的，它的nodeType是1。
在这里插入图片描述
理论上parentElement，应该返回"document"节点（node）,但是它不是element对象，因此parentNode返回object，而parentElement返回null。

|恰同学少年|
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
parentNode和parentElement的区别
05-05 1143
在DOM文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑。两者在通常情况下都是一样的，因为包含元素的节点只有可能是元素节点，这里可能会有一个误区，有些人可能会想文本节点是否可以包含元素节点，来作为父节点，这里是不行的，文本节点只是文本本身，自身算一个节点，文本节点的父节点直接是元素节点。那下面我们就说一下，parentNode,parentElement,的特例。
深入了解parentNode,parentElement,childNodes,children的区别，一看就懂
weixin_44206561的博客
08-26 2833
今天是准备面试的第七天，js是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成，我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。 parentNode，parentElement，childNodes和children都是对节点的操作，因此我们需要对dom树有一定的了解，在文档对象模型中，每一部分都是由节点组成（包括document都是一个节点），节点的类型一共有三种：元素节点，属性节点，文本节点，
js中parentNode和parentElement的区别
香格里拉&的博客
01-14 2211
parentNode 父节点 parentElement 父元素节点 <body> <div id="box"></div> </body> <script> var box = document.getElementById('box'); //探究parentNode 和 parentElement 的区别 ...
JavaScript之——DOM编程
weixin_65975275的博客
03-02 480
"JavaScript DOM编程"—04
parentElement:返回当前元素的父元素节点（IE不兼容）、children:只返回当前元素的元素子节点、childElementCount、firstElementChild、......
JEFF_xieyuzhi的博客
09-18 1185
parentElement:返回当前元素的父元素节点（IE不兼容，IE9以下） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> &l...
Js中parentNode,parentElement,childNodes,children之间的区别
10-26
本文将详细解析`parentNode`、`parentElement`、`childNodes`和`children`之间的区别。 首先，`parentNode`和`parentElement`都是用于获取一个元素的父级节点。它们的主要区别在于兼容性。`parentNode`是W3C标准的...
parentElement,srcElement的使用小结
09-04
在JavaScript中，`parentElement` 和 `srcElement` 是与事件处理有关的两个属性，它们在处理DOM元素和事件流时非常有用。本文将详细解释这两个属性以及它们在实际应用场景中的使用。 首先，`parentElement` 是一个...
JavaScript中removeChild 方法开发示例代码
10-21
综上所述，`removeChild`方法是JavaScript中处理DOM动态操作的关键工具，通过理解其工作原理和使用方法，可以更有效地构建交互式的网页应用。希望这个示例和解释对你有所帮助，如果有任何问题，欢迎留言讨论。感谢对...
Javascript在IE和FireFox中的兼容处理
03-09
在Web开发中，JavaScript是一种必不可少的脚本语言，它用于实现客户端的交互和动态效果。然而，由于不同浏览器的实现差异，特别是Internet Explorer（IE）和Firefox，开发者经常面临兼容性问题。以下是一些关键的...
JS中parentNode和parentElement的区别
bats的博客
07-09 776
参考文章 以一个网页作为例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="bb"> <div class="box1"></div>
js parentElement和offsetParent之间的区别
10-29
里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。
js多种事件
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-31 526
事件冒泡 默认事件 定时器 事件委托 事件监听
event.srcElement.parentElement的用法
程序人生的专栏
12-04 4918
用event.srcElement.parentElement可以获取当前操作对象的父级对象 看下代码： 无标题文档 <!-- function chkSelect(){ var tr=event.srcElement.parentElement; //获取当前操作对象的父级对象，这里获取的是input元素 tr.cells[0].children[0].checke
parentNode和parentElement区别
EmotionComputer
08-07 929
parentNode和parentElement，childNodes和children的区别
js之parentElement属性
weixin_30807779的博客
11-01 2196
<html> <head> </head> <body> <form name="a "> <table name="b "> <tr name="c "> <td name="d "><select name="e " onchange="xx(...
parentElement 与 parentNode 的区别
lio-zero 的博客
11-27 763
首先，您需要知道元素和节点之间的区别。总之，元素是一种特殊类型的节点，它表示 DOM 树中的单个节点。它不仅可以是元素，还可以是注释、文档、文本节点等。 在大多数情况下，parentElement 和 parentNode 属性返回相同的节点： // 两者都返回 <html> 元素 document.body.parentNode document.body.parentElement...
html parent()属性,HTML DOM parentElement用法及代码示例
weixin_39621456的博客
06-04 2063
DOM parentElement属性用于返回特定子元素的父元素。这是一个只读属性。 parentElement和parentNode属性相似，唯一的区别是，如果父节点不是元素，则parentElement属性返回null。用法:node.parentElement返回值：它返回一个表示任何子节点的父节点的字符串；如果指定的节点不包含任何父节点，则返回null。范例1：HTML DOM paren...
Cannot read properties of undefined (reading 'parentNode') js
最新发布
06-21
当你遇到 "Cannot read properties of undefined (reading 'parentNode')" 这个 JavaScript 错误，它意味着你试图访问一个变量或对象的 `parentNode` 属性，但这个变量的值在当前上下文中是 `undefined`，也就是说它还没有被初始化或者没有被正确地赋值为一个 DOM 元素。 例如，如果你尝试从一个可能是空或者未定义的元素（如 `let parentElement = someFunctionThatMayReturnNull();`）获取 `parentNode`，就会触发这个错误。解决这个问题的方法通常有以下几种： 1. **检查变量是否已定义**：确保在访问 `parentNode` 之前，你的变量已经正确赋值并且不为 `null` 或 `undefined`。 ```javascript if (parentElement) { const parentNode = parentElement.parentNode; } ``` 2. **使用可选链（?.）操作符**：这是一种安全的方式，它会跳过链中的空引用。 ```javascript const parentNode = parentElement?.parentNode; ``` 3. **默认值或条件判断**：提供一个默认值或者在访问前检查条件。 ```javascript const parentNode = parentElement ? parentElement.parentNode : null; ``` 4. **错误处理**：使用 `try...catch` 来捕获并处理可能出现的错误。 ```javascript try { const parentNode = parentElement.parentNode; } catch (error) { console.error(error); } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值