Разница между DOM parentNode и parentElement
может кто-нибудь объяснить мне как можно проще, в чем разница между классическим DOM parentNode и недавно введенный в Firefox 9 parentElement
5 ответов:
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
, но вы, вероятно, никогда не столкнетесь с ними.)
В Internet Explorer,
parentElement
не определено для элементов SVG, тогда какparentNode
определяется.
Edit:некоторые из них неверны. Смотрите комментарии ниже для деталей
все
Element
объектыNode
объекты (потому чтоElement
является наследникомNode
). Но есть иNode
, который не являетсяElement
... элемент
использовать
.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
ссылки документ. Это следует считать решением phail, поскольку документы не являются узлами, так как узлы определены будет содержаться документы и документы не могут содержаться в документах.
как с nextSibling и nextElementSibling, просто помните, что свойства с "элементом" в их имени всегда возвращает
Element
илиnull
. Свойства без могут возвращать любой другой тип узла.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