HTML attributes और DOM properties के बीच का अंतर

HTML attributes और DOM properties के बीच का अंतर

HTML attributes और DOM properties मूल रूप से अलग चीज़ें हैं। एक ही नाम वाले attribute और property हो सकते हैं, लेकिन उन्हें अलग-अलग values पर सेट किया जा सकता है।

• attribute और property के मुख्य अंतर

  • HTML serialization: attributes को HTML में serialize किया जाता है, लेकिन properties को नहीं
  • value type: attribute की value हमेशा string होती है, जबकि property किसी भी type की हो सकती है
  • case sensitivity: attribute names case-insensitive होते हैं, जबकि property names case-sensitive होते हैं। लेकिन attribute values case-sensitive होती हैं

• Reflection

  • सुविधा के लिए, ज़्यादातर specs हर defined attribute के लिए एक property equivalent बनाते हैं
  • जब कोई property किसी attribute को reflect करती है, तब attribute data का source होता है। attribute को सेट करने पर property update होती है, और property से पढ़ने पर attribute पढ़ा जाता है
  • लेकिन कुछ reflectors अधिक जटिल होते हैं। कभी-कभी property name और जिस attribute को वह reflect करती है उसका नाम अलग होता है

• validation, type coercion और default values

  • properties में validation और default values होती हैं, लेकिन attributes में नहीं
  • कुछ properties type coercion भी करती हैं

• input field का value

  • value attribute और value property दोनों होते हैं, लेकिन value property, value attribute को reflect नहीं करती। इसके बजाय defaultValue property, value attribute को reflect करती है
  • value property किसी भी attribute को reflect नहीं करती। यह दुर्लभ बात नहीं है; offsetWidth, parentNode जैसी कई properties भी ऐसी ही हैं
  • value property शुरुआत में defaultValue property का अनुसरण करती है। उसके बाद जब JavaScript या user interaction के ज़रिए value property सेट हो जाती है, तो यह internal value पर switch हो जाती है

• attributes configuration के लिए होने चाहिए

  • attributes configuration के लिए होने चाहिए, और properties में state होनी चाहिए
  • light-DOM tree का एक ही owner होना चाहिए
  • <details> और <dialog> elements open state को open attribute से दिखाते हैं, और browser user interaction के जवाब में इस attribute को खुद जोड़ता/हटाता है। इसे design की गलती माना गया है

• frameworks इन अंतरों को कैसे संभालते हैं

  • Preact और VueJS में अगर propName in element सच हो, तो prop को property के रूप में सेट किया जाता है, नहीं तो attribute सेट किया जाता है। वे attribute की तुलना में property को प्राथमिकता देते हैं
  • React इसका उल्टा करता है। वह attribute को प्राथमिकता देता है, सिवाय पहले से defined उन मामलों के जहाँ property को प्राथमिकता दी जाती है
  • lit-html attribute और property के भेद को बनाए रखता है, और attribute की जगह property सेट करने के लिए नाम के आगे . लगाना पड़ता है

GN⁺ की राय

• HTML attributes और DOM properties के बीच का अंतर समझना low-level DOM काम करते समय महत्वपूर्ण है। ज़्यादातर मामलों में बड़ा फर्क नहीं पड़ता, लेकिन framework इस्तेमाल करते समय सावधानी ज़रूरी है

• attributes को configuration और properties को state के रूप में अलग करना बेहतर लगता है। हाल के कुछ HTML elements में इसका पालन नहीं किया जा रहा, यह थोड़ा खटकता है

• खास तौर पर React में custom elements इस्तेमाल करते समय सावधान रहना चाहिए। React custom elements की properties को property की बजाय attribute के रूप में सेट करता है, इसलिए जो चीज़ें केवल property-based हैं वे काम नहीं कर सकतीं। इसे React 19 में बेहतर किया जाएगा

• Preact, Vue, React, lit-html जैसे प्रमुख frameworks attribute और property को कैसे संभालते हैं, इसकी तुलना करना भी दिलचस्प है। इसमें हर framework की philosophy और design decisions झलकती हैं

• web standards और browsers का implementation हमेशा developer-friendly नहीं होता। <input> element की value attribute और property इसका प्रतिनिधि उदाहरण है। backward compatibility की वजह से इसे आसानी से बदला नहीं जा सकता, लेकिन आगे चलकर डिज़ाइन अधिक consistent हो तो बेहतर होगा

[superwoou]

https://emewjin.github.io/html attribute (Attributes) और DOM property (Properties) के बीच का अंतर

[superwoou]

attribute और property, दोनों का अनुवाद एक ही "गुण" के रूप में कर दिया गया है..