Разница между DOM parentNode и parentElement

Может кто-нибудь объяснить мне как можно проще, какова разница между классическим DOM parentNode и недавно введена в Firefox 9 parentElement

Ответ 1

parentElement является новым для Firefox 9 и DOM4, но он присутствует во всех других основных браузерах уже давно.

В большинстве случаев это то же самое, что и parentNode. Единственная разница возникает, когда узел parentNode не является элементом. Если так, parentElement является null.

В качестве примера:

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

Поскольку элемент <html> (document.documentElement) не имеет родителя, который является элементом, parentElement имеет значение null. (Существуют другие, более маловероятные случаи, когда parentElement может быть null, но вы, вероятно, никогда не встретите их.)

Ответ 2

В Internet Explorer parentElement есть undefined для элементов SVG, тогда как parentNode определен.

Ответ 3

Используйте .parentElement и вы не ошибетесь, если не используете фрагменты документа.

Если вы используете фрагменты документа, то вам нужен .parentNode:

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

Также:

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

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

Ответ 4

Изменить: Некоторые из этих ошибок неверны. Подробнее см. Комментарии ниже.

Все объекты Element также являются объектами Node (поскольку Element является потомком Node). Но существует Node, который не является объектом Element... document. Таким образом, ваш элемент <html> имеет родительский node (document), но у него нет родительского элемента.

Причина, по которой существует необходимость parentElement вместо parentNode, заключается в том, что HTML5 строго не требует элемента <html>, поэтому почти любой элемент может иметь родительский node без фактического наличия родительского элемента, Поэтому, если моя HTML-страница выглядит так:

<!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>

Затем элементы title, header, #body и footer имели бы parentNode как document, но их parentElement были бы пустыми. Только тег p имеет parentElement, который равен #body. (Обратите внимание, что я бы не советовал это как структуру страницы... придерживаться чего-то более традиционного.)

Вы можете воспроизвести его примерно так:

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

Ответ 5

Как и с nextSibling и nextElementSibling, просто помните, что свойства с "элементом" в их имени всегда возвращают Element или null. Свойства без возврата другого типа node.

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

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

Ответ 6

Есть еще одно отличие, но только в Internet Explorer. Это происходит, когда вы смешиваете HTML и SVG. если родитель является "другим" из этих двух, тогда .parentNode дает родителя, в то время как .parentElement дает неопределенное.