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

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

5 ответов


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

в большинстве случаев это то же самое, что parentNode. Единственное отличие заключается в том, что узел parentNode не является элементом. Если так, то parentElement is 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 is null. (Есть и другие, более маловероятные случаи, когда parentElement может будь null, но вы, вероятно, никогда не встретите их.)


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


Edit: кое-что из этого неправильно. См. комментарии ниже для деталей

все Element объекты Node объекты (потому что Element является наследником Node). Но есть Node, который не является Element... the


использовать .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>

видимо <html> ' s .parentNode ссылки документ. Это следует рассматривать как решение, поскольку документы не являются узлами, так как узлы определены быть containable документами и документы не могут содержаться в документах.


как с / / сделать и nextElementSibling, просто помните, что свойства с "элементом" в их имени всегда возвращает Element или null. Properties without может возвращать любой другой тип узла.

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