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

500

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

javascript firefox dom

— шабунк
джерело

stackoverflow.com/questions/2899196/what-is-this-parentelement

bugzilla.mozilla.org/show_bug.cgi?id=685798

4

Здається, батьківський вузол є стандартом DOM, тому безпечніше завжди використовувати його замість parentElement.

— TMS

5

@TMS w3school не є авторитетом: w3fools.com

— Guillaume Massé

486

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, але ви, ймовірно, ніколи не натрапите на них.)

— самотній день
джерело

162

Іншими словами, це абсолютно безглуздо в 99,999999999999% часу. Чия це була ідея?

— Niet the Dark Absol

25

Оригінал parentElementбув власною річчю IE; Я вважаю, що інші веб-переглядачі (наприклад, Netscape) підтримували, parentNodeале ні parentElement. (Очевидно, враховуючи, що я вже згадував Netscape, я говорю про зворотний шлях до IE5 і раніше ...)

— nnnnnn

9

@lonesomeday ти забувdocumentfragment.firstChild.parentElement === null

— Raynos

7

@Raynos Це була фактично точна обставина, яку я мав на увазі в останньому реченні моєї відповіді ...

— lonesomeday

17

Як я нещодавно з’ясував, елемент SVG (як, наприклад, circleвсередині a g), в IE, parentElementбуде невизначений і parentNodeбуде тим, що ви шукаєте. :(

— Джейсон Уолтон

94

В Internet Explorer parentElementне визначено елементів SVG, тоді parentNodeяк визначено.

— швидкісний літак
джерело

10

чесно кажучи, я думаю, що це скоріше коментар, а не відповідь.

— shabunc

38

Напевно, але це причина, що я головою об стіл стукав годину і більше, поки не зрозумів. Я підозрюю, що багато інших приходять на цю сторінку після подібного удару по голові.

— швидкісний літак

3

@speedplane Радий, що це відповідь, тому що це не має жодного логічного сенсу, і мені довелося наткнутися на довгий час ...

— superphonic

1

Він також не визначений для вузлів коментарів. У Chrome я із задоволенням отримав батьківський коментар, але це не було визначено в IE.

— Simon_Weaver

Я не міг знайти для цього джерела. parentElementне реалізується для Nodeдобре відомо ( developer.mozilla.org/en-US/docs/Web/API/Node/… ), але для SVGElement? Я також не міг цього відтворити document.createElement('svg').parentElementв IE 11.737.17763.0. Це, можливо, тим часом було виправлено?

— epsilon

14

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

— Pacerier
джерело

6

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

— Буксі
джерело

1

так, але на відміну від зв’язків із текстом чи коментарями, не можуть бути батьківськими.

— Ясен

0

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

— математичні включення
джерело

1

Я думаю, що це undefinedне так null.

— Брайан Ді Пальма