Різниця між DOM parentNode та parentElement

Чи може хтось пояснити мене якомога простішими термінами, в чому різниця між класичним батьківським вузлом DOM та нововведеним у Firefox 9 parentElement

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як визначено.

Використовуйте, .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>, .parentNodeпосилання на Документ . Це слід вважати фазою прийняття рішення, оскільки документи не є вузлами, оскільки визначено, що вузли можуть бути доступними документами, а документи не можуть міститись у документах.

Так само, як і 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

Є ще одна різниця, але тільки в Internet Explorer. Це відбувається при змішуванні HTML і SVG. якщо батько є "іншим" з цих двох, то .parentNode дає батькові, тоді як .parentElement дає невизначений.