ความแตกต่างระหว่าง DOM parentNode และ parentElement

501

ใครบางคนในการอธิบายให้ฉันเข้าใจได้ง่ายที่สุดเท่าที่จะเป็นไปได้ความแตกต่างระหว่างparent DOM รุ่นคลาสสิคและรุ่นใหม่ที่แนะนำใน Firefox 9 parentElement คืออะไร

javascript firefox dom

— shabunc
แหล่งที่มา

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

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

4

parentNodeดูเหมือนจะเป็นมาตรฐาน DOM ดังนั้นจึงปลอดภัยกว่าที่จะใช้แทน parentElement

— TMS

5

@TMS w3school ไม่ได้เป็นผู้มีอำนาจ: w3fools.com

— Guillaume Massé

487

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แต่คุณอาจไม่เคยเจอเลย)

— lonesomeday
แหล่งที่มา

162

กล่าวอีกนัยหนึ่งมันไร้จุดหมายอย่างสมบูรณ์ 99.999999999999% ของเวลา มันเป็นความคิดของใคร?

— Niet the Dark Absolute

25

ต้นฉบับparentElementคือสิ่งที่เป็นกรรมสิทธิ์ของ IE; ผมเชื่อว่าเบราว์เซอร์อื่น ๆ ในเวลานั้น (เช่น Netscape) ได้รับการสนับสนุนแต่ไม่parentNode parentElement(เห็นได้ชัดว่าฉันได้พูดถึง Netscape แล้วฉันกำลังพูดถึงวิธีกลับไปที่ IE5 และก่อนหน้านี้ ... )

— nnnnnn

9

@lonesomeday คุณลืมdocumentfragment.firstChild.parentElement === null

— Raynos

7

@Raynos ที่เป็นจริงสถานการณ์ที่แม่นยำที่ฉันมีในใจกับประโยคสุดท้ายของคำตอบของฉัน ...

— lonesomeday

17

อย่างที่ฉันเพิ่งค้นพบในองค์ประกอบ SVG (เช่นcircleภายในg) ใน IE parentElementจะไม่ถูกกำหนดและparentNodeจะเป็นสิ่งที่คุณกำลังมองหา :(

— Jason Walton

94

ใน Internet Explorer parentElementไม่ได้กำหนดไว้สำหรับองค์ประกอบ SVG ในขณะที่parentNodeกำหนดไว้

— speedplane
แหล่งที่มา

10

สุจริตฉันคิดว่านี่เป็นความคิดเห็นมากกว่าคำตอบ

— shabunc

38

อาจเป็นไปได้ แต่มันเป็นเหตุผลที่ฉันกระแทกหัวของฉันกับโต๊ะเป็นเวลาหนึ่งชั่วโมงหรือมากกว่านั้นจนกระทั่งฉันคิดออก ฉันสงสัยว่าคนอื่น ๆ อีกหลายคนมาที่หน้านี้หลังจากการต่อสู้ที่หัวคล้ายกัน

— speedplane

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>'s .parentNodeเชื่อมโยงไปยังเอกสาร สิ่งนี้ควรถูกพิจารณาว่าเป็น phail การตัดสินใจเนื่องจากเอกสารไม่ใช่โหนดเนื่องจากโหนดถูกกำหนดให้มีเอกสารและเอกสารไม่สามารถมีได้

— 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

— Buksy
แหล่งที่มา

1

ใช่ แต่แตกต่างจากข้อความหรือโหนดความคิดเห็นที่ไม่สามารถเป็นผู้ปกครอง

— Jasen

0

มีอีกหนึ่งความแตกต่าง แต่เฉพาะใน internet explorer มันเกิดขึ้นเมื่อคุณผสม HTML และ SVG ถ้า parent คือ 'other' ของสองตัวนั้น. parentNode จะให้ parent ในขณะที่. parentElement จะให้ undefined

— mathheadinclouds
แหล่งที่มา

1

ฉันคิดว่ามันไม่ได้undefined null

— Brian Di Palma