DOM parentNode और parentElement के बीच अंतर

500

मुझे संभव शब्दों के रूप में सरल रूप में से समझाने में कर सकते किसी को, शास्त्रीय डोम के बीच अंतर क्या है parentNode Firefox 9 में शुरू की और नव parentElement

javascript firefox dom

— shabunc
स्रोत

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

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

4

पेरेंटनोड डीओएम मानक के रूप में लगता है, इसलिए यह हमेशा सुरक्षित होता है, इसका उपयोग पेरेंटलीमेंट के बजाय करें।

— टीएमएस

5

@ टीएमएस w3school एक प्राधिकरण नहीं है: w3fools.com

— मास

486

parentElement फ़ायरफ़ॉक्स 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% पूरी तरह से व्यर्थ है। यह किसका विचार था?

— नीट द डार्क एबसोल

25

मूल parentElementएक मालिकाना IE चीज़ थी; मेरा मानना है कि उस समय अन्य ब्राउज़र (जैसे, नेटस्केप) समर्थित थे parentNodeलेकिन नहीं parentElement। (जाहिर है, यह देखते हुए कि मैंने नेटस्केप का उल्लेख किया है, मैं IE5 और पहले के तरीके के बारे में बात कर रहा हूं ...)

— nnnnnn

9

@lonesomeday आप भूल गएdocumentfragment.firstChild.parentElement === null

— Raynos

7

@ रयोनोस वास्तव में मेरे उत्तर के अंतिम वाक्य के साथ मेरे दिमाग में सटीक परिस्थिति थी ...

— lonesomeday

17

जैसा कि मैंने अभी-अभी देखा है, एक एसवीजी तत्व (जैसे circleअंदर g), आईई में, parentElementअपरिभाषित parentNodeहोगा , और वही होगा जो आप देख रहे हैं। :(

— जेसन वाल्टन

94

इंटरनेट एक्सप्लोरर में, parentElementएसवीजी तत्वों के लिए अपरिभाषित है, जबकि parentNodeपरिभाषित किया गया है।

— speedplane
स्रोत

10

ईमानदारी से, मुझे लगता है कि यह एक जवाब के बजाय एक टिप्पणी का अधिक है।

— शबूनक

38

शायद, लेकिन यही कारण है कि मैंने एक घंटे या उससे अधिक समय तक मेज के खिलाफ अपना सिर पीटा, जब तक कि मुझे यह पता नहीं चला। मुझे संदेह है कि इसी तरह की सिर पीटने के बाद कई अन्य लोग इस पेज पर आए।

— स्पीडप्लेन

3

@speedplane खुशी है कि यह एक जवाब है क्योंकि यह कोई तार्किक अर्थ नहीं है और मुझे एक अच्छा समय के लिए स्टम्प्ड किया गया था ...

— सुपरफोनिक

1

यह टिप्पणी नोड्स के लिए भी अपरिभाषित है। क्रोम में मैं खुशी से एक टिप्पणी के जनक हो रहा था, लेकिन यह IE में अपरिभाषित था।

— साइमन_वेक

मुझे उसके लिए कोई स्रोत नहीं मिला। parentElementके लिए लागू नहीं किया जा रहा Nodeहै अच्छी तरह से पता है ( developer.mozilla.org/en-US/docs/Web/API/Node/… ) लेकिन के लिए SVGElement? मैं भी document.createElement('svg').parentElementIE 11.737.17763.0 में इस के साथ पुन: पेश नहीं कर सका । क्या इस बीच शायद तय किया गया था?

— एप्सिलॉन

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

— Buksy
स्रोत

1

हाँ, लेकिन nextsibling पाठ या टिप्पणी नोड के विपरीत माता-पिता नहीं हो सकते।

— जैसन

0

एक और अंतर है, लेकिन केवल इंटरनेट एक्सप्लोरर में। यह तब होता है जब आप HTML और SVG को मिलाते हैं। यदि माता-पिता उन दोनों के 'अन्य' हैं, तो।

— mathheadinclouds
स्रोत

1

मुझे लगता है कि यह undefinedनहीं है null।

— ब्रायन डी पाल्मा