नंबर वाले ID के साथ querySelector का उपयोग करना

Question 1

एचटीएमएल 5 युक्ति जो मुझे समझ में आती है उससे आप उन आईडी का उपयोग कर सकते हैं जो इस तरह की संख्याएँ हैं।

<div id="1"></div>
<div id="2"></div>

मैं इन बारीकियों का उपयोग कर सकता हूं getElementByIdलेकिन साथ नहीं querySelector। अगर मैं निम्नलिखित करने की कोशिश करता हूं तो मुझे सिंटैक्सएर्रर मिलता है : कंसोल में डोम एक्सेप्शन 12 ।

document.querySelector("#1")

मैं बस उत्सुक हूं कि आईडी के रूप में संख्याओं का उपयोग क्यों नहीं करता है querySelectorजब एचटीएमएल 5 युक्ति कहती है कि ये वैध हैं। मैंने कई ब्राउज़रों की कोशिश की।

Question 2

यह मान्य है, लेकिन कुछ विशेष हैंडलिंग की आवश्यकता है। यहाँ से: http://mathiasbynens.be/notes/css-escapes

प्रमुख अंक

यदि किसी पहचानकर्ता का पहला वर्ण संख्यात्मक है, तो आपको इसके यूनिकोड कोड बिंदु के आधार पर बच निकलने की आवश्यकता होगी। उदाहरण के लिए, वर्ण 1 के लिए कोड बिंदु U + 0031 है, इसलिए आप इसे \ 000031 या 31 के रूप में छोड़ देंगे।

मूल रूप से, किसी भी संख्यात्मक चरित्र से बचने के लिए, बस इसे \ 3 के साथ उपसर्ग करें और अंतरिक्ष वर्ण () जोड़ें। याय यूनिकोड!

तो आपका कोड समाप्त हो जाएगा (CSS पहले, JS दूसरा):

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');

Question 3

क्योंकि जब वे HTML5 युक्ति में मान्य होते हैं, तो वे CSS में मान्य नहीं होते हैं, जो कि "क्वेरी चयनकर्ता " का अर्थ है।

इसके बजाय, आपको यह करना होगा: document.querySelector("[id='1']")जो बहुत लंबी-घुमावदार है, इस पर विचार करते हुए कि आप इसे कुछ या जैसी सार्थक आईडी दे सकते हैं message1;)

Question 4

मुझे एक दृष्टिकोण की आवश्यकता थी जो स्वचालित था। हाल के बदलाव का मतलब था कि उपयोग किए जाने वाले आईडी मूल्य अब सरल वर्णमाला वर्ण नहीं थे और इसमें संख्या और विशेष वर्ण शामिल थे।

मैंने प्रयोग करके समाप्त किया CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/presscape

console.log(CSS.escape('1'));

स्निपेट का विस्तार करें

सबसे पहले, यह विफल मामला है:

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";

<div id="1">Before</div>

स्निपेट का विस्तार करें

और अब उपयोग कर रहे हैं CSS.escape:

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";

<div id="1">Before</div>

स्निपेट का विस्तार करें

देखें कि यह सही ढंग से कैसे बदल जाता है After, चयनकर्ता का प्रदर्शन!

Question 5

W3C प्रलेखन से चयनकर्ताओं सिंटैक्स को अट्रैक्ट करें

गुण मान एक मान्य सीएसएस पहचानकर्ता या स्ट्रिंग होना चाहिए।

इस प्रकार, प्रमुख अंक वाले अंक या अल्फ़ान्यूमेरिक तार एक मान्य पहचानकर्ता के रूप में योग्य नहीं होते हैं।

यदि आप पहचानकर्ता बनाने के लिए आईडी जनरेटर उपयोगिता का उपयोग कर रहे हैं, तो आप प्रमुख अंकों के साथ अल्फा न्यूमेरिक आईडी के साथ समाप्त हो सकते हैं।

जनरेटर के SEED से (या इसे संशोधित किया जा सकता है) या तो एक स्ट्रिंग को ठीक करने के लिए एक त्वरित फिक्स होगा या हमेशा जनरेट किए गए आईडी में एक स्ट्रिंग संलग्न करेगा।

Question 6

यहाँ एक फ़ंक्शन है जिसे मैंने अभी अभी सीएसएस चयनकर्ताओं में अग्रणी नंबर आईडी से निपटने के लिए बनाया है, और यह IE सुरक्षित है क्योंकि CSS.escape नहीं है।

उपयोग करने से पहले इस क्लीनसेलर फ़ंक्शन के माध्यम से चयनकर्ता को पास करें:

var cleanSelector = function(selector){
    (selector.match(/(#[0-9][^\s:,]*)/g) || []).forEach(function(n){
        selector = selector.replace(n, '[id="' + n.replace("#", "") + '"]');
    });
    return selector;
};

var myselector = ".dog #980sada_as div span#aside:hover div.apple#05crab:nth-of-type(2), .ginger #2_green_div, div.cupcake #darwin p#23434-346365-53453";

var clean_myselector = cleanSelector(myselector);

// print to show difference
console.log(myselector);
console.log(clean_myselector);

//use the new selector like normal
var elems = document.querySelectorAll( clean_myselector );