HTML में गुण और विशेषताओं के बीच अंतर क्या है?

Question

JQuery 1.6.1 में किए गए परिवर्तनों के बाद, मैं HTML में गुणों और विशेषताओं के बीच अंतर को परिभाषित करने की कोशिश कर रहा हूं।

JQuery 1.6.1 रिलीज़ नोट (नीचे के पास) पर सूची को देखते हुए , ऐसा लगता है कि कोई HTML गुणों और विशेषताओं को इस प्रकार वर्गीकृत कर सकता है:

• गुण: वे सभी जिनका या तो बूलियन मान है या जिन्हें यूएआई चुना गया है जैसे कि सिलेक्टेडेक्स।

• विशेषताएँ: 'गुण' जिसे एक HTML तत्व में जोड़ा जा सकता है जो न तो बूलियन है और न ही यूए जनरेट किया गया मान है।

विचार?

Comments

.Prop () बनाम .attr ()

— उर्फ नील

Answer 1

HTML स्रोत कोड लिखते समय, आप अपने HTML तत्वों पर विशेषताओं को परिभाषित कर सकते हैं । फिर, एक बार जब ब्राउज़र आपके कोड को पार्स कर देता है, तो एक संबंधित DOM नोड बनाया जाएगा। यह नोड एक ऑब्जेक्ट है, और इसलिए इसमें गुण हैं ।

उदाहरण के लिए, यह HTML तत्व:

<input type="text" value="Name:">

2 विशेषताएँ ( typeऔर value) हैं।

एक बार जब ब्राउज़र इस कोड को पार्स कर देता है, तो एक HTMLInputElement ऑब्जेक्ट बनाया जाएगा, और इस ऑब्जेक्ट में दर्जनों गुण शामिल होंगे: जैसे, स्वीकार करें, AccessKey, align, alt, विशेषताएँ, ऑटोफोकस, आधार, जाँच, चाइल्डइमेंटकाउंट, चाइल्डनॉड्स, बच्चे, क्लासिस्ट, क्लासनेम, क्लाइंटहाइट, आदि

किसी दिए गए DOM नोड ऑब्जेक्ट के लिए, गुण उस ऑब्जेक्ट के गुण हैं, और विशेषताएँ attributesउस ऑब्जेक्ट की संपत्ति के तत्व हैं।

जब किसी दिए गए HTML तत्व के लिए DOM नोड बनाया जाता है, तो इसके कई गुण समान या समान नामों वाले गुणों से संबंधित होते हैं, लेकिन यह एक-से-एक संबंध नहीं है। उदाहरण के लिए, इस HTML तत्व के लिए:

<input id="the-input" type="text" value="Name:">

इसी डोम नोड होगा id, typeऔर valueगुण (दूसरों के बीच):

• idसंपत्ति एक है परिलक्षित संपत्ति के लिए idविशेषता: संपत्ति हो रही विशेषता मान पढ़ता है, और संपत्ति की स्थापना विशेषता मान लिखता है। idएक शुद्ध परिलक्षित संपत्ति है, यह मूल्य को संशोधित या सीमित नहीं करता है।

• typeसंपत्ति एक है परिलक्षित संपत्ति के लिए typeविशेषता: संपत्ति हो रही विशेषता मान पढ़ता है, और संपत्ति की स्थापना विशेषता मान लिखता है। typeयह एक शुद्ध परिलक्षित संपत्ति नहीं है क्योंकि यह ज्ञात मूल्यों (जैसे, इनपुट के मान्य प्रकार) तक सीमित है । अगर आपके पास था <input type="foo">, तो theInput.getAttribute("type")आपको देता है "foo"लेकिन theInput.typeआपको देता है "text"।

• इसके विपरीत, गुण विशेषता valueको प्रतिबिंबित नहीं करता है value। इसके बजाय, यह इनपुट का वर्तमान मूल्य है। जब उपयोगकर्ता मैन्युअल रूप से इनपुट बॉक्स का मूल्य बदलता है, तो valueसंपत्ति इस परिवर्तन को प्रतिबिंबित करेगी। इसलिए यदि उपयोगकर्ता "John"इनपुट बॉक्स में इनपुट करता है, तो:

  theInput.value // returns "John"

  जहाँ तक:

  theInput.getAttribute('value') // returns "Name:"

  valueसंपत्ति को दर्शाता है वर्तमान जबकि, पाठ सामग्री इनपुट बॉक्स के अंदर valueविशेषता है प्रारंभिक के पाठ्य-सामग्री valueHTML स्रोत कोड से विशेषता।

  इसलिए यदि आप जानना चाहते हैं कि वर्तमान में टेक्स्ट-बॉक्स के अंदर क्या है, तो संपत्ति पढ़ें। यदि आप, हालांकि, जानना चाहते हैं कि पाठ-बॉक्स का प्रारंभिक मूल्य क्या था, तो विशेषता पढ़ें। या आप defaultValueसंपत्ति का उपयोग कर सकते हैं, जो valueविशेषता का शुद्ध प्रतिबिंब है :

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"

वहाँ कई गुण हैं जो सीधे उनके विशेषता (प्रतिबिंबित कर रहे हैं rel, id), कुछ थोड़ा-अलग नामों के साथ सीधे प्रतिबिंब (हैं htmlForदर्शाता है forविशेषता, classNameदर्शाता classविशेषता), कई कि उनकी विशेषता को प्रतिबिंबित लेकिन प्रतिबंध / संशोधनों (साथ src, href, disabled, multiple), इसलिए और पर। कल्पना विभिन्न प्रकार के प्रतिबिंब को कवर करती है।

Comments

हे Sime, मुझे लगता है कि यह बहुत अस्पष्ट है, खासकर यदि आप यहाँ पर एक नज़र है: w3.org/TR/html4/index/attributes.html , और कोई स्पष्ट जवाब नहीं है। मूल रूप से jQuery ब्लॉग पर सारांश में बताई गई बातों का पालन करने की आवश्यकता है और फिर भी, दूसरे को मैप करना होगा और दोनों ही उदाहरणों में काम करना होगा, जब आपको attr

— schalknebling

@oss आपका लिंक HTML विशेषताओं की एक सूची को संदर्भित करता है। वह सूची अस्पष्ट नहीं है - वे विशेषताएँ हैं।

— 22इमे विद्या

क्या संबंध के बारे में कुछ दस्तावेज हैं? @'ImeVidas

— SKING7

मैं संपत्तियों के लिए विशेषताओं की पूरी सूची (जैसे for-> htmlFor) प्राप्त कर सकता हूं और इसी तरह गुणों की एक सूची जो किसी विशेषता से अपना प्रारंभिक मूल्य लेती है, फिर भी इसे प्रतिबिंबित नहीं करती ( input.value)। मुझे उम्मीद है कि यह github.com/Matt-Esch/virtual-dom जैसी लाइब्रेरी के स्रोत में होगा, लेकिन यह वास्तव में प्रलेखित नहीं है।

— sstur

@ मैं इसे खुद नहीं पढ़ता, लेकिन यह 4-भाग लेख श्रृंखला एक महान संसाधन की तरह लगता है: twitter.com/addyosmani/status/1082177515618295808

— Vidime Vidas

Answer 2

Sime Vidas के उत्तर को पढ़ने के बाद , मैंने और खोज की और कोणीय कोनों में एक बहुत ही सीधा-आगे और आसानी से समझने वाला स्पष्टीकरण पाया ।

HTML विशेषता बनाम DOM प्रॉपर्टी

---

विशेषताएँ HTML द्वारा परिभाषित की गई हैं। गुण DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) द्वारा परिभाषित किए गए हैं।

• कुछ HTML विशेषताओं में गुणों के लिए 1: 1 मैपिंग है। idएक उदाहरण है।

• कुछ HTML विशेषताओं में संबंधित गुण नहीं हैं। colspanएक उदाहरण है।

• कुछ DOM प्रॉपर्टीज में इसके समान गुण नहीं होते हैं। textContent एक उदाहरण है।

• कई HTML विशेषताएँ गुणों के मानचित्र में दिखाई देती हैं ... लेकिन उस तरीके से नहीं, जैसा आप सोच सकते हैं!

यह अंतिम श्रेणी भ्रामक है जब तक आप इस सामान्य नियम को समझ नहीं लेते:

गुण डोम गुण को इनिशियलाइज़ करते हैं और फिर उन्हें किया जाता है। संपत्ति मूल्य बदल सकते हैं; विशेषता मान नहीं हो सकते।

उदाहरण के लिए, जब ब्राउज़र रेंडर करता है <input type="text" value="Bob">, तो यह value"बॉब" के लिए प्रारंभिक संपत्ति के साथ एक संबंधित डोम नोड बनाता है ।

जब उपयोगकर्ता इनपुट बॉक्स में "सैली" में प्रवेश करता है, तो डोम तत्व value संपत्ति "सैली" बन जाती है। यदि आप उस विशेषता के बारे में इनपुट तत्व पूछते हैं तो HTML value विशेषता अपरिवर्तित बनी रहती है: input.getAttribute('value')"बॉब"।

HTML विशेषता प्रारंभिक मूल्य को valueनिर्दिष्ट करती है ; DOM प्रॉपर्टी वर्तमान मूल्य है।value

---

disabledविशेषता एक और अजीब उदाहरण है। एक बटन की disabledसंपत्ति falseडिफ़ॉल्ट रूप से होती है इसलिए बटन सक्षम होता है। जब आप disabledविशेषता जोड़ते हैं , तो इसकी उपस्थिति बटन की disabledसंपत्ति को प्रारंभिक करती है trueताकि बटन अक्षम हो।

disabledविशेषता जोड़ने और हटाने से बटन अक्षम होता है और सक्षम होता है। विशेषता का मान अप्रासंगिक है, यही कारण है कि आप लिखकर एक बटन को सक्षम नहीं कर सकते हैं<button disabled="false">Still Disabled</button>.

बटन की disabled संपत्ति को निष्क्रिय करना या बटन को सक्षम करना। संपत्ति का मूल्य मायने रखता है।

HTML विशेषता और DOM प्रॉपर्टी एक ही चीज़ नहीं है, भले ही उनका नाम समान हो।

Comments

यह उदाहरण सही नहीं है: colspanविशेषता में colSpanसंपत्ति है। ... तो, किस गुण के पास संबंधित संपत्ति नहीं है?

— रॉबर्ट सिएमर

Answer 3

जवाब पहले से ही बताते हैं कि कैसे विशेषताओं और गुणों को अलग-अलग तरीके से संभाला जाता है, लेकिन मैं वास्तव में यह बताना चाहता हूं कि यह पूरी तरह से पागल कैसे है। भले ही यह कुछ हद तक कल्पना है।

यह पागल है, डोम में केवल एक प्रकार के मूल्य को बनाए रखने के लिए कुछ विशेषताओं (जैसे आईडी, वर्ग, फू, बार ) है, जबकि दो विशेषताओं को बनाए रखने के लिए कुछ विशेषताओं (उदाहरण के लिए , चेक किए गए, चयनित ); वह है, "मूल्य जब इसे लोड किया गया था" और "गतिशील राज्य" का मूल्य। (क्या डॉम को दस्तावेज़ की स्थिति का पूर्ण सीमा तक प्रतिनिधित्व नहीं करना चाहिए ?)

यह नितांत आवश्यक है, कि दो इनपुट फ़ील्ड , जैसे एक पाठ और एक चेकबॉक्स एक ही तरह से व्यवहार करते हैं । यदि पाठ इनपुट फ़ील्ड "मान लोड किए जाने पर" और "वर्तमान, गतिशील" मान लोड करने के लिए एक अलग "" नहीं रखता है, तो चेकबॉक्स क्यों करता है? यदि चेकबॉक्स में चेक किए गए विशेषता के लिए दो मान हैं , तो इसके वर्ग और आईडी विशेषताओं के लिए दो क्यों नहीं हैं ? यदि आप किसी पाठ * इनपुट * फ़ील्ड के मान को बदलने की अपेक्षा करते हैं , और आप इस परिवर्तन को प्रतिबिंबित करने के लिए DOM (अर्थात "क्रमांकित प्रतिनिधित्व") की अपेक्षा करते हैं, और इस परिवर्तन को प्रतिबिंबित क्यों करते हैं, तो आप पृथ्वी के इनपुट क्षेत्र से उसी की अपेक्षा नहीं करेंगे चेकबॉक्स टाइप करें जाँच की विशेषता पर?

"यह एक बूलियन विशेषता है" का विभेदीकरण, मेरे लिए कोई मतलब नहीं है, या कम से कम इसके लिए पर्याप्त कारण नहीं है।

Comments

यह उत्तर नहीं है, लेकिन मैं आपसे सहमत हूं; यह पूरी तरह से पागल है।

— शमूएल

हाँ यह अवधारणा बेकार है और इसे इतनी बुरी तरह मानकीकृत नहीं किया जाना चाहिए। यह उन मामलों में से एक था (जैसे कि उदाहरण के लिए आंतरिक HTML) जो पुराने IE में अच्छा था और इसे मानकों द्वारा अपनाया जाना चाहिए था। गुण और विशेषताएँ जहाँ भी संभव हो, यहां तक ​​कि कस्टम विशेषताओं को भी सिंक्रनाइज़ किया गया था, जो बहुत अच्छा पठनीय js डॉट सिंटैक्स बनाता है। HTML5 कस्टम HTML टैग को प्रथम श्रेणी का नागरिक बनाता है, कस्टम विशेषताएँ भी होनी चाहिए। पुराने IE के बाद से हटाए जा रहे इस फीचर को अभी भी एक वास्तविक मुद्दा है - हम केवल बहुत से कॉरपोरेट्स को देख रहे हैं जो परंपरागत रूप से IE के साथ पुराने सिस्टम के साथ चिपके हुए हैं अब उन्हें IE10 में टूटने का पता चल रहा है।

— माइक नेल्सन

यह पागलपन नहीं है। आपने गलत समझा है। checkedविशेषता का प्रतिनिधित्व करती है defaultCheckedसंपत्ति (वैसे ही एक पाठ इनपुट के लिए valueविशेषता का प्रतिनिधित्व करती है defaultValueसंपत्ति)। एक दूसरी संपत्ति, checkedयह दर्शाने के लिए आवश्यक है कि क्या चेकबॉक्स की जांच की गई है क्योंकि यह चेकबॉक्स की कार्यक्षमता का एक आंतरिक हिस्सा है: यह इंटरैक्टिव है और इसे उपयोगकर्ता द्वारा बदला जा सकता है (और डिफ़ॉल्ट पर रीसेट कर दिया जा सकता है, यदि कोई फॉर्म रीसेट बटन मौजूद है)। , इस तरह से एक और विशेषता के रूप idमें नहीं है। यह इस तथ्य से कोई लेना-देना नहीं है कि यह एक बूलियन विशेषता है।

— टिम डाउन

@ टिमडाउन - धन्यवाद। यह वास्तव में मुझे डब्ल्यूटीएफ पर मिला है? कूबड़।

— पेड

@ टिमडाउन मुझे अभी भी लगता है कि यह "पागल" है क्योंकि कोई भी तार्किक दृष्टिकोण संपत्ति का नाम और विशेषता नाम मैच बना देगा, या कम से कम एक विशेषता नाम और संपत्ति का नाम मैच नहीं होगा जो संबंधित नहीं हैं (यानी चेक किया गया गुण डिफ़ॉल्ट रूप से संदर्भित है संपत्ति की जाँच की गई संपत्ति असंबंधित है)। वास्तव में, तार्किक दृष्टिकोण जो हर कोई मानता है, शुरू में ऐसा होता है कि विशेषताओं और गुणों को बिल्कुल अलग न करें। विशेषताएँ अपरिवर्तनीय नहीं होनी चाहिए, लेकिन हमेशा संपत्ति के मूल्यों को प्रतिबिंबित करना चाहिए। दोनों के बीच अंतर नहीं होना चाहिए।

— dallin

Answer 4

अच्छी तरह से ये w3c द्वारा निर्दिष्ट किए गए हैं कि एक विशेषता क्या है और एक संपत्ति क्या है http://www.w3.org/TR/SVGTiny12/attributeTable.html

लेकिन वर्तमान में attr और प्रोप इतने अलग नहीं हैं और लगभग समान हैं

लेकिन वे कुछ चीजों के लिए सहारा पसंद करते हैं

पसंदीदा उपयोग का सारांश

.Prop () पद्धति का उपयोग बूलियन विशेषताओं / गुणों के लिए और उन गुणों के लिए किया जाना चाहिए जो HTML में मौजूद नहीं हैं (जैसे कि window.location)। अन्य सभी विशेषताएँ (जिन्हें आप html में देख सकते हैं) को .attr () विधि के साथ जोड़-तोड़ करते रहना चाहिए।

वास्तव में आपको कुछ बदलने की जरूरत नहीं है अगर आप attr या प्रोप या दोनों का उपयोग करते हैं, दोनों काम करते हैं, लेकिन मैंने अपने स्वयं के आवेदन में देखा कि प्रोप ने काम किया जहां atrr didnt तो मैंने अपने 1.6 ऐप प्रोप = में लिया

Comments

हे डैनियल, मैंने वह पढ़ा। बस लगता है कि दोनों को अलग करने के लिए स्पष्ट कट परिभाषा है, उदाहरण के लिए, नीचे दिए गए कुछ सीम HTML तत्व में भी जोड़े जा सकते हैं। HTML के कुछ स्पेक्स को पढ़ना जारी रखेंगे और देखेंगे कि क्या वास्तव में व्यवहार में दोनों को स्पष्ट रूप से अलग करने का कोई तरीका है।

— schalkneethling

वह दस्तावेज़ SVG से संबंधित है HTML नहीं।

— लूजादो

Answer 5

अंतर HTML गुण और विशेषताएँ:

HTML में क्या अंतर है, इसका मूल्यांकन करने से पहले आइए पहले इन शब्दों की परिभाषा देखें।

अंग्रेजी परिभाषा:

• विशेषताएँ किसी वस्तु की अतिरिक्त जानकारी का उल्लेख कर रही हैं।
• गुण किसी वस्तु की विशेषताओं का वर्णन कर रहे हैं।

HTML संदर्भ में:

जब ब्राउज़र HTML को पार्स करता है, तो यह ट्री डेटा स्ट्रक्चर बनाता है जो मूल रूप से HTML की मेमोरी प्रतिनिधित्व में होता है। यह ट्री डेटा संरचना में नोड हैं जो HTML तत्व और पाठ हैं। गुण और गुण इससे संबंधित हैं, निम्नलिखित तरीके हैं:

• विशेषताएँ अतिरिक्त जानकारी हैं जो हम कुछ DOM गुणों को आरंभ करने के लिए HTML में डाल सकते हैं।
• गुण तब बनते हैं जब ब्राउज़र HTML को पार्स करता है और डोम उत्पन्न करता है। DOM में प्रत्येक तत्व के पास गुणों का अपना सेट है जो ब्राउज़र द्वारा सभी सेट किए गए हैं। इनमें से कुछ गुण HTML विशेषताओं द्वारा अपना प्रारंभिक मूल्य निर्धारित कर सकते हैं। जब भी DOM प्रॉपर्टी में बदलाव होता है, जो रेंडर पेज पर प्रभाव डालता है, तो पेज को तुरंत रेंडर कर दिया जाएगा

यह महसूस करना भी महत्वपूर्ण है कि इन संपत्तियों की मैपिंग 1 से 1. नहीं है। दूसरे शब्दों में, प्रत्येक विशेषता जो हम एचटीएमएल तत्व पर देते हैं, उनके समान डोम संपत्ति होगी।

इसके अलावा अलग डोम तत्व अलग गुण हैं। उदाहरण के लिए, एक <input>तत्व में एक मूल्य संपत्ति है जो एक <div>संपत्ति पर मौजूद नहीं है।

उदाहरण:

आइए निम्नलिखित एचटीएमएल दस्तावेज़ लें:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

फिर हम <div>जेएस कंसोल में निरीक्षण करते हैं :

 console.dir(document.getElementById('foo'));

हम निम्नलिखित DOM प्रॉपर्टीज को देखते हैं (क्रोम डैटूल, सभी प्रॉपर्टीज नहीं दिखाए गए हैं):

• हम देख सकते हैं कि HTML में विशेषता आईडी अब DOM में भी एक आईडी प्रॉपर्टी है। आईडी को HTML द्वारा प्रारंभ किया गया है (हालांकि हम इसे जावास्क्रिप्ट के साथ बदल सकते हैं)।
• हम देख सकते हैं कि HTML में वर्ग विशेषता के पास कोई वर्ग गुण नहीं है ( classJS में आरक्षित कीवर्ड है)। लेकिन वास्तव में 2 गुण, classListऔर className।