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é

Jawaban:

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