Perbedaan antara DOM parentNode dan parentElement

501

Adakah yang bisa menjelaskan saya sesederhana mungkin, apa perbedaan antara DOM parentNode klasik dan yang baru diperkenalkan di Firefox 9 parentElement

javascript firefox dom

— shabunc
sumber

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

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

4

parentNode tampaknya standar DOM, jadi lebih aman selalu menggunakannya daripada parentElement.

— TMS

5

@TMS w3school bukan otoritas: w3fools.com

— Guillaume Massé

487

parentElement adalah baru untuk Firefox 9 dan DOM4, tetapi telah ada di semua browser utama lainnya sejak lama.

Dalam kebanyakan kasus, ini sama dengan parentNode. Satu-satunya perbedaan terjadi ketika simpul parentNodebukan elemen. Jika demikian, parentElementadalah null.

Sebagai contoh:

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

Karena <html>elemen ( document.documentElement) tidak memiliki orangtua yang merupakan elemen, parentElementadalah null. (Ada beberapa kasus lain yang lebih tidak parentElementmungkin terjadi null, tetapi Anda mungkin tidak akan pernah menemukannya.)

— lonesomeday
sumber

162

Dengan kata lain, itu sama sekali tidak ada gunanya 99,999999999999% dari waktu. Ide siapa itu?

— Niet the Dark Absol

25

Yang asli parentElementadalah hal yang merupakan hak milik IE; Saya percaya browser lain pada saat itu (misalnya, Netscape) mendukung parentNodetetapi tidak parentElement. (Jelas, mengingat saya telah menyebutkan Netscape, saya sedang berbicara tentang jalan kembali ke IE5 dan sebelumnya ...)

— nnnnnn

9

@lonesomeday kamu lupadocumentfragment.firstChild.parentElement === null

— Raynos

7

@ Raynos Itu sebenarnya keadaan tepat yang ada dalam pikiran saya dengan kalimat terakhir dari jawaban saya ...

— lonesomeday

17

Seperti yang baru saja saya temukan, pada elemen SVG (seperti circledi dalam a g), di IE, parentElementakan tidak terdefinisi, dan parentNodeakan menjadi apa yang Anda cari. :(

— Jason Walton

94

Di Internet Explorer, parentElementtidak ditentukan untuk elemen SVG, sedangkan parentNodedidefinisikan.

— speedplane
sumber

10

Sejujurnya saya pikir ini lebih merupakan komentar daripada jawaban.

— shabunc

38

Mungkin, tapi itu alasan aku membenturkan kepalaku ke meja selama satu jam atau lebih sampai aku menemukan jawabannya. Saya curiga banyak orang lain datang ke halaman ini setelah head-banging serupa

— speedplane

3

@speedplane Senang ini adalah jawaban karena ini tidak masuk akal dan membuat saya bingung untuk sementara waktu ...

— superphonic

1

Itu juga tidak ditentukan untuk node komentar. Di Chrome saya dengan senang hati menerima komentar dari orang tua, tetapi tidak terdefinisi di IE.

— Simon_Weaver

Saya tidak dapat menemukan sumber untuk itu. parentElementtidak diterapkan untuk Nodediketahui ( developer.mozilla.org/en-US/docs/Web/API/Node/… ) tetapi untuk SVGElement? Saya juga tidak bisa mereproduksi ini dengan document.createElement('svg').parentElementIE 11.737.17763.0. Apakah ini mungkin sudah diperbaiki sementara itu?

— epsilon

14

Gunakan .parentElementdan Anda tidak bisa salah asalkan Anda tidak menggunakan fragmen dokumen.

Jika Anda menggunakan fragmen dokumen, maka Anda perlu .parentNode:

let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment

Juga:

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment

<template id="t"><div></div></template>

Luaskan cuplikan

Ternyata <html>itu .parentNodetautan ke Dokumen . Ini harus dianggap sebagai keputusan keputusan karena dokumen bukan node karena node didefinisikan dapat disimpan oleh dokumen dan dokumen tidak dapat dimuat oleh dokumen.

— Pacerier
sumber

6

Sama seperti dengan nextSibling dan nextElementSibling , ingatlah bahwa, properti dengan "elemen" dalam namanya selalu kembali Elementatau null. Properti tanpa dapat mengembalikan jenis simpul lainnya.

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

— Buksy
sumber

1

ya, tapi tidak seperti teks berikutnya atau node komentar tidak bisa menjadi orangtua.

— Jasen

0

ada satu lagi perbedaan, tetapi hanya di internet explorer. Itu terjadi ketika Anda mencampur HTML dan SVG. jika orangtua adalah 'yang lain' dari keduanya, maka .parentNode memberikan induk, sementara .parentElement memberikan yang tidak terdefinisi.

— matematika seperti awan
sumber

1

Saya pikir undefinedtidak null.

— Brian Di Palma