Difference between DOM parentNode and parentElemen

2楼-- · 2019-01-04 05:42

Edit: Some of this is wrong. See comments below for details

All Element objects are also Node objects (because Element is a descendent of Node). But there is a Node which isn't an Element... the document object. So your <html> element has a parent node (document) but it doesn't have a parent element.

The reason that there's a need for parentElement instead of parentNode is because, HTML5 doesn't strictly require an <html> element, so almost any element can have a parent node without actually having a parent element. So if my HTML page looked like this:

<!doctype html>
<title>My page</title>
<header>This is my page</header>
<div id="body">
  <p>This is some text from my page</p>
</div>
<footer>
  Copyright, me
</footer>

Then the title, header, #body and footer elements would have their parentNode as document, but their parentElement would be null. Only the p tag would have a parentElement, which is #body. (Note that I wouldn't advise this as a page structure... stick to something more traditional.)

You can replicate it with something like this:

if (myElement.parentNode instanceof Element) {
    myElement.parentElement = myElement.parentNode;
} else {
    myElement.parentElement = null;
}

0人赞添加讨论(0) 举报

你好瞎i

3楼-- · 2019-01-04 05:43

Just like with nextSibling and nextElementSibling, just remember that, properties with "element" in their name always returns Element or null. Properties without can return any other kind of node.

console.log(document.body.parentNode, "is body's parent node");    // returns <html>
console.log(document.body.parentElement, "is body's parent element"); // returns <html>

var html = document.body.parentElement;
console.log(html.parentNode, "is html's parent node"); // returns document
console.log(html.parentElement, "is html's parent element"); // returns null

0人赞添加讨论(0) 举报

我命由我不由天

4楼-- · 2019-01-04 05:46

Use .parentElement and you can't go wrong as long as you aren't using document fragments.

If you use document fragments, then you need .parentNode:

let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment

Also:

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment

<template id=t><div></div></template>

Apparently the <html>'s .parentNode links to the Document. This should be considered a decision phail as documents ain't Nodes since Nodes are defined to be containable by documents and documents can't be contained by documents.

0人赞添加讨论(0) 举报

走好不送

5楼-- · 2019-01-04 05:47

In Internet Explorer, parentElement is undefined for SVG elements, whereas parentNode is defined.

0人赞添加讨论(0) 举报

神经病院院长

6楼-- · 2019-01-04 05:48

parentElement is new to Firefox 9 and to DOM4, but it has been present in all other major browsers for ages.

In most cases, it is the same as parentNode. The only difference comes when a node's parentNode is not an element. If so, parentElement is null.

As an example:

document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element

document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null

(document.documentElement.parentNode === document);  // true
(document.documentElement.parentElement === document);  // false

Since the <html> element (document.documentElement) doesn't have a parent that is an element, parentElement is null. (There are other, more unlikely, cases where parentElement could be null, but you'll probably never come across them.)

0人赞添加讨论(0) 举报

Difference between DOM parentNode and parentElemen

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间