Разница между 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