एक ही आईडी विशेषता वाले दो HTML तत्व: यह वास्तव में कितना बुरा है?

122

बस Google नक्शे स्रोत कोड ब्राउज़ कर रहा है। उनके हेडर में, उनके पास आईडी के साथ 2 डीवी = "खोज" है जिसमें एक में दूसरा है, और इसमें jstrack = "1" विशेषता भी है। उन्हें अलग करने वाला एक रूप है:

<div id="search" jstrack="1">
    <form action="/maps" id="...rest isn't important">
        ...
        <div id="search">...

चूंकि यह Google है, इसलिए मैं मान रहा हूं कि यह कोई गलती नहीं है।

तो इस नियम का उल्लंघन करना वास्तव में कितना बुरा हो सकता है? जब तक आप अपने सीएसएस और डोम चयन में सावधान रहते हैं, तब तक आईडी की कक्षाओं का पुन: उपयोग क्यों नहीं करते? क्या कोई उद्देश्य पर ऐसा करता है, और यदि ऐसा है, तो क्यों?

programming-practices html specifications

— danludwig
स्रोत

102

"चूंकि यह Google है, इसलिए मैं मान रहा हूं कि यह कोई गलती नहीं है।" -> Google अचूक नहीं है। वे हमसे बाकी लोगों की तरह गलती करते हैं।

— जोएरी सेबर्ट्स

43

वास्तव में Google के लोगों के दिमाग में SEARCH है, इसलिए वे किसी अन्य आईडी के बारे में नहीं सोच सकते हैं: P

— पंकज उपाध्याय

10

मुझे लगता है कि उस पेज को अलग-अलग html टुकड़ों से प्रस्तुत किया गया है, इसलिए उस टुकड़े में एक डेवलपर ने उस आईडी का उपयोग किया, और दूसरे टुकड़े में अन्य डेवलपर के साथ भी ऐसा ही हुआ।

— लुसियानो

10

"यह वास्तव में कितना बुरा है" का पूरा सवाल बस मुझे इस बात की याद दिलाता है: xkcd.com/292

— डैनियल रोसमैन

3

@DanielRoseman xkcd इसे भी करती है: what-if.xkcd.com/23/#question

— SQB

140

विशिष्टता का कहना है कि अद्वितीय

HTML 4.01 विनिर्देशन कहता है कि ID को दस्तावेज़-व्यापी अद्वितीय होना चाहिए।

HTML 5 विनिर्देश एक ही बात कहता है लेकिन दूसरे शब्दों में। यह कहता है कि आईडी को अपने घर के सबट्री में अद्वितीय होना चाहिए , जो मूल रूप से दस्तावेज है यदि हम इसकी परिभाषा पढ़ते हैं ।

दोहराव से बचें

लेकिन जब से HTML रेंडर करने वाले HTML रेंडरर्स बहुत क्षमा करते हैं, तो वे डुप्लिकेट आईडी की अनुमति देते हैं। यदि जावास्क्रिप्ट में आईडी द्वारा प्रोग्रामिक रूप से एक्सेस करने पर सभी संभव और सख्ती से बचा जाता है तो इसे टाला जाना चाहिए । मुझे यकीन नहीं है कि getElementByIdजब कई मिलान तत्व पाए जाते हैं तो किस फ़ंक्शन को वापस लौटना चाहिए? इसे होना चाहिए:

कोई त्रुटि है?
पहले मिलान तत्व लौटें?
पिछले मिलान तत्व वापस?
मिलान तत्वों का एक सेट लौटाएं?
कुछ नहीं लौटाया?

लेकिन भले ही ब्राउज़र इन दिनों मज़बूती से काम करें, लेकिन भविष्य में कोई भी इस व्यवहार की गारंटी नहीं दे सकता है क्योंकि यह विनिर्देश के खिलाफ है। इसलिए मैं आपको सलाह देता हूं कि एक ही दस्तावेज़ के भीतर कभी भी डुप्लिकेट आईडी न बनाएं ।

— रॉबर्ट कोरिटनिक
स्रोत

1

@missingno: मैंने HTML 5 विनिर्देश के लिए एक लिंक जोड़ा है जो एक ही चीज़ के बारे में बात करता है लेकिन विभिन्न शब्दों में।

— राबर्ट कोरिटनिक २ Robert

6

DOM के अनुसार , "यदि एक से अधिक तत्व में उस मान के साथ एक ID विशेषता है, तो जो लौटाया गया है वह अपरिभाषित है" (जिसका अर्थ है कि वास्तविक मूल्य के बजाय कोई "सही" परिणाम नहीं है undefined)। अपरिभाषित व्यवहार पर भरोसा करना शायद ही एक अच्छा विचार है।

— लोन्सोमेडाय

1

एचटीएमएल 5 के साथ ध्यान देने योग्य बात यह है कि यह data-विशेषता तब काम आती है जब किसी को एक ही आईडी को एक से अधिक चीजें असाइन करने के लिए लुभाया जा सकता है। इससे आपके पास कई अलग-अलग आईडी हैं, जिनमें से एक में एक सामान्य data-somethingविशेषता है। फिर भी, सभी ब्राउज़र जिन्हें मैं अज्ञात विशेषताओं को अनदेखा करना जानता हूं, इसलिए वे शायद हर आधुनिक-ईश ब्राउज़र में पूर्ण HTML समर्थन की कमी के बारे में सुरक्षित हैं।

— टिम पोस्ट

2

@JoachimSauer: जब आप डेटा विशेषताओं का उपयोग करते हैं तो आपके पास कुंजी-मूल्य जोड़े हो सकते हैं जो कि सीएसएस कक्षाओं का उपयोग करते समय सच नहीं है। उस मामले में वे सभी बूलियन गुणों की तरह हैं। एक तत्व में या तो सीएसएस वर्ग है या नहीं। यदि आप सीएसएस कक्षाओं के साथ मान चाहते हैं तो आपको किसी तरह उन्हें सीएसएस वर्ग के नाम और बाद में पार्स में संयोजित करना होगा। मुझे आशा है कि अब आप dataविशेषताओं का उपयोग करने के लाभ देख सकते हैं । और वे भी सीधे jQuery द्वारा बॉक्स से बाहर का समर्थन कर रहे हैं जब आप बस के data-something="123"साथ विशेषता को देखें $(elem).data("something")।

— रॉबर्ट कोरिटनिक

1

@RobertKoritnik: बेशक! मैंने उस उपयोग-मामले के बारे में नहीं सोचा था। मैं केवल के मामले के बारे में सोचा था id="search"।

— जोआचिम सॉर

30

आपने पूछा "कितना बुरा"। तो मांस बाहर @ रॉबर्टकॉर्निक के (पूरी तरह से सटीक) एक सा जवाब ...

वह कोड गलत है। गलत ग्रे के रंगों में नहीं आता है। यह कोड मानक का उल्लंघन करता है और इसलिए गलत है। यह सत्यापन जाँच को विफल कर देगा, और इसे होना चाहिए।

उस ने कहा, बाजार में वर्तमान में कोई भी ब्राउज़र इसके बारे में शिकायत नहीं करेगा, या इसके साथ कोई समस्या नहीं होगी। ब्राउजर इसके बारे में शिकायत करने के अपने अधिकारों के भीतर होगा , लेकिन वर्तमान में उनमें से कोई भी वर्तमान संस्करण नहीं है। इसका मतलब यह नहीं है कि भविष्य के संस्करण इस कोड को बुरी तरह से व्यवहार नहीं कर सकते हैं।

आपका व्यवहार उस ID को एक चयनकर्ता के रूप में उपयोग करने की कोशिश कर रहा है, या तो css या जावास्क्रिप्ट में, यह अविश्वसनीय है और संभवतः ब्राउज़र से ब्राउज़र में भिन्न होता है। मुझे लगता है कि प्रत्येक ब्राउज़र उस पर कैसे प्रतिक्रिया करता है, यह देखने के लिए एक अध्ययन किया जा सकता है। मुझे लगता है कि सबसे अच्छे मामले में, यह "क्लास =" की तरह ही व्यवहार करेगा, और उनमें से सूची का चयन करेगा। (यह जावास्क्रिप्ट पुस्तकालयों को भ्रमित कर सकता है, हालांकि - अगर मैं jQuery के लेखक थे, तो मैंने अपने चयनकर्ता कोड को अनुकूलित किया हो सकता है ताकि यदि आप "#" के साथ शुरू होने वाले चयनकर्ता के साथ मेरे पास आए, तो मुझे एक ही वस्तु की उम्मीद है, और एक प्राप्त करना सूची मुझे पूरी तरह से परेशान कर सकती है।)

यह पहले वाले का भी चयन कर सकता है, या संभवतः अंतिम वाले का भी, या उनमें से किसी एक का चयन कर सकता है, या ब्राउज़र को पूरी तरह से क्रैश कर सकता है। बिना कोशिश किए बताने का कोई तरीका नहीं।

"कितना बुरा" तो पूरी तरह से इस बात पर निर्भर करता है कि कोई विशेष ब्राउज़र HTML युक्ति को कितनी सख्ती से लागू करता है, और उस युक्ति के उल्लंघन के साथ सामना करने पर यह क्या करता है।

संपादित करें: मैं बस आज इस पार आने के लिए हुआ। मैं इस साइट के लिए एक बड़ी बड़ी ऑल-इन-वन रिपोर्टिंग उपयोगिता का निर्माण करने के लिए विभिन्न प्रकार की संस्थाओं पर खोज रूपों से विभिन्न घटकों में खींच रहा हूं, मैं दूरस्थ पेजों के छिपे हुए रूपों में खोज प्रपत्रों को लोड कर रहा हूं और उन्हें अपने में बदल रहा हूं रिपोर्ट जनरेटर जब उपयुक्त इकाई प्रकार रिपोर्ट के लिए स्रोत के रूप में चुना जाता है। तो फॉर्म का एक छिपा हुआ संस्करण है, और रिपोर्ट जनरेटर में प्रदर्शित एक संस्करण है। जावास्क्रिप्ट, जो सभी मामलों में आया था, आईडी द्वारा तत्वों को संदर्भित करता है, जिनमें से अब पृष्ठ पर दो हैं - छिपे हुए एक, और प्रदर्शित एक।

क्या लगता है कि jQuery मुझे सबसे पहले एक का चयन कर रहा है, जो सभी मामलों में बिल्कुल वही है जो मैं नहीं चाहता।

जिस पृष्ठ को मैं अपना क्षेत्र प्राप्त करना चाहता हूँ, उसका क्षेत्र निर्दिष्ट करने के लिए चयनकर्ता लिखकर इसके चारों ओर काम कर रहा हूँ (अर्थात: $ ('# कंटेनरडिव #specificElement'))। लेकिन आपके प्रश्न का एक उत्तर है - क्रोम पर jQuery निश्चित रूप से इस विशेष उल्लंघन के साथ सामना करने पर एक विशेष तरीके का व्यवहार करता है।

— दान रे
स्रोत

... एक संबंधित प्रश्न: stackoverflow.com/q/29295824/287948 सीएसएस फास्ट प्रोफाइल में आईडी के दायित्व के बारे में।

— पीटर क्रूस

3

"गलत ग्रे के रंगों में नहीं आता है।" मैं इसे बहुत देखता हूं और यह उन चीजों में से एक है जो तकनीकी रूप से सही है लेकिन जीवन में या प्रोग्रामिंग में "सही" नहीं है। आप परोक्ष रूप से अपने उत्तर में बहुत अच्छी तरह से कवर करते हैं और मैं सामने आ सकता है, लेकिन द बिग बैंग थ्योरी का यह दृश्य इतना अच्छा काम करता है कि मैं इसे मेरे लिए बोल दूंगा और किसी को हँसाऊंगा ... स्टुअर्ट बनाम शेल्डन youtube.com/ घड़ी? v = F_1zoX5Ax9U

— रात उल्लू

यह एक 8 साल पुराना उत्तर है, लेकिन मुझे लगता है कि यह बहुत असंतुलित है कि आप ओपी के सवाल पर कैसे हाइपरबोले हैं, फिर भी बार-बार आईडी के बारे में ब्राउज़रों के अनुमति और खतरनाक व्यवहार के बारे में ज्यादा शिकायत नहीं करते हैं, जो ओपी की कोशिश करने की तुलना में बदतर है।

— एरंड्रोस

20

यह वास्तव में कितना बुरा है?

इसने मुझे रुला दिया
यह अमान्य है
कई जावास्क्रिप्ट पुस्तकालय अपेक्षा के अनुरूप काम नहीं करेंगे
यह आपके कोड को भ्रमित करता है

अनुभव का कहना है कि प्रमुख ब्राउज़रों में getElementById दस्तावेज़ में पहला मिलान किया गया तत्व लौटाएगा। लेकिन भविष्य में ऐसा नहीं हो सकता है।

जब jQuery को एक आईडी दिया जाता है जैसे #foo, यह getElementById का उपयोग करता है और उस व्यवहार की नकल करता है। यदि आपको इसके चारों ओर काम करना है (यह दुखद है), तो आप $ (" * #foo") का उपयोग कर सकते हैं जो jQuery को getElementsByTagName का उपयोग करने के लिए मनाएगा और सभी मिलान किए गए तत्वों की सूची लौटाएगा।

मुझे अक्सर अन्य साइटों के लिए कोड लिखना पड़ता है, और मुझे इसके चारों ओर काम करना पड़ता है। एक न्यायिक दुनिया में, मुझे यह पता लगाने के लिए कार्यों को फिर से शुरू नहीं करना होगा कि क्या कोई आईडी अद्वितीय है। आईडी हमेशा अद्वितीय होनी चाहिए। दुनिया क्रूर है और इसलिए मैं रोता हूं।

— ColBeseder
स्रोत

5

इस जवाब ने मुझे रुला दिया ... हँसी का!

— A1run

8

आप बहुत सारी चीजें कर सकते हैं - लेकिन इसका मतलब यह नहीं है कि आपको चाहिए।

एक प्रोग्रामर के रूप में (आम तौर पर बोलते हुए) हम अपने जीवन का निर्माण सटीक और नियमों का पालन करते हुए करते हैं - यहाँ एक नियम है जिसका पालन करना सरल है, जो हम करते हैं उसके लिए काफी मौलिक है - हम (एक निर्भर क्षेत्र में) विशिष्ट पहचानकर्ताओं को पसंद करते हैं ...

नियम को तोड़ना कुछ ऐसा है जो हम कर सकते हैं क्योंकि ब्राउज़र बहुत अधिक व्यवस्थित हैं - लेकिन वास्तव में हम सभी बेहतर होंगे यदि ब्राउज़र अच्छी तरह से गठित और वैध एचटीएमएल की आवश्यकता के बारे में सख्त थे, तो इसकी वजह से होने वाली छोटी मात्रा में दर्द लंबे समय से होगा। चुका दिया गया है!

तो, क्या यह वास्तव में बुरा है? एक प्रोग्रामर के रूप में आप भी कैसे पूछ सकते हैं? इसकी सभ्यता के खिलाफ अपराध (-:

परिशिष्ट:

आप लिखते हैं कि ब्राउज़र बहुत अधिक समायोजित कर रहे हैं जैसे कि यह बुरी बात है

मैं करता हूं, क्योंकि यह है - हम जटिल नियमों के बारे में बात नहीं कर रहे हैं, हम चीजों को अच्छी तरह से बनाने और अन्यथा नियमों को लागू करने के बारे में पर्याप्त रूप से बात कर रहे हैं, जिन्हें यंत्रवत् परीक्षण किया जा सकता है और जो परिणामस्वरूप यांत्रिक रूप से संसाधित होने के लिए आसान बनाते हैं। यदि ब्राउज़र सख्त थे, तो उपकरण बहुत तेजी से समर्थन करने के लिए अनुकूलित हो जाते हैं - ऐसा नहीं था, इसलिए वे कुछ हद तक इसके बजाय उनका शोषण करते थे। जरा इस पर विचार करें - यदि एमएस और नेटस्केप ने अप्रतिबंधित एचटीएमएल की अनुमति नहीं दी होती तो बहुत अच्छा माध्यम होता, जब उद्धृत पाठ के लिए स्पष्ट समर्थन के साथ एक बहुत कम जटिल "ईमेल मार्कअप भाषा" ने हमें एक बेहतर उपकरण दिया होता। ... लेकिन वह जहाज रवाना हुआ और इसी तरह हम कर सकते हैं 'होना चाहिए ) लेकिन हम नहीं कर सकते

— Murph
स्रोत

आप लिखते हैं कि ब्राउज़र बहुत अधिक समायोजित कर रहे हैं जैसे कि यह बुरी बात है, लेकिन निश्चित रूप से आप ऐसा नहीं मानते हैं?

— KaptajnKold

4

मैं मर्फ़ के लिए नहीं बोल सकता, लेकिन मुझे यकीन है कि यह वाकई बहुत बुरी बात है। फिर, माफी के इस स्तर के बिना, वेब को बढ़ने का आवेग नहीं था जैसा कि हम जानते हैं।

— एंड्रिया

1

@Andrea: जैसा कि हम जानते हैं कि इंटरनेट विकसित नहीं हुआ होगा। यह अधिक धीरे-धीरे विकसित होता। लेकिन इसका एक ठोस आधार यह भी होगा कि यह सही कोड नहीं है। फास्ट-लेकिन-मैला काम कर सकता है, लेकिन मैं बहुत धीमी-लेकिन-सही पसंद करता हूं। खासकर जब से यह नहीं है हम केवल विकास के कुछ वर्षों के बारे में बात करेंगे।

— निकोल बोलस

3

@ और मैं शर्त लगाता हूं कि यह लगभग जल्दी से बढ़ेगा - उपकरण समस्या से निपटने के लिए विकसित होंगे। जबकि कई मामलों में उपकरण खराब मार्कअप का मूल कारण थे। तथ्य यह है कि लोग कम से कम आवश्यक करते हैं - "अच्छी तरह से गठित" करने के लिए कदम एक अपेक्षाकृत छोटा है और इसे लागू करने और लागू करने के लिए काफी आसान है और लोगों ने माना होगा कि महत्वपूर्ण तनाव के बिना

— मर्फ़

1

यह भयानक नहीं है कि ब्राउज़र समायोजित कर रहे हैं। यह भयानक है कि वे सभी अलग-अलग तरीकों से मिल रहे हैं ।

— दान रे

7

स्क्रिप्टिंग में: getElementByIDकेवल पहला मैच लौटाएगा। CSS में: #idउस ID के साथ सभी तत्वों को प्रभावित करेगा। ब्राउज़र रेंडर में कोई प्रभाव नहीं होगा।

यह w3c मानक का व्यवहार है। एक संभव नहीं है, यह एक परिभाषित है।

https://dom.spec.whatwg.org/#interface-nonelementparentnode

— बार्ट कैलिक्सो
स्रोत

7

यह एक संभव व्यवहार है। getElementByIdकिसी भी तत्व, या यहां तक कि एक अशक्त वस्तु को पूरी तरह से वापस कर सकता है। सीएसएस प्रभाव किसी भी तत्व, या कोई भी या उन सभी पर हो सकता है। या ब्राउज़र क्रैश हो सकता है। मानक से बाहर, व्यवहार अपरिभाषित है

— rds

2

यह मानक से बाहर नहीं है क्योंकि मानक निर्दिष्ट करता है कि उन स्थितियों में क्या करना है। तो नहीं, getElementById किसी भी तत्व को वापस नहीं कर सकता है, मानक स्पष्ट रूप से कहता है कि मैं पहला मैच लौटाऊंगा। मैं मानता हूं कि मानक से बाहर का व्यवहार अपरिभाषित है, आप जो नहीं समझते हैं, वह यह है कि वे सभी मामले मानक का हिस्सा हैं।

— बार्ट कैलिक्सो

1

यह उत्तर कुछ बेहतर होगा यदि यह वास्तव में शामिल हो, एक संदर्भ के रूप में, मानक के प्रासंगिक भाग का एक उद्धरण (या कम से कम एक खंड संख्या)।

— yoniLavi

2

@yoniLavi अपडेट किया गया।

— बार्ट कैलिक्सो

2

धन्यवाद @ बर्ट। आप बिलकुल सही कह रहे हैं :) मानक कहता है " नोड के वंशजों के भीतर पहला तत्व लौटाता है जिसकी आईडी एलिमेंट आइडी है।"

— yoniLavi