সংখ্যাযুক্ত আইডি সহ ক্যোয়ারী নির্বাচনকারী ব্যবহার করে

Question 1

এইচটিএমএল 5 স্পেকটি যা বুঝি সেখান থেকে আপনাকে এই জাতীয় সংখ্যাগুলি আইডি ব্যবহার করতে দেয়।

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

আমি এই জরিমানা ব্যবহার করে অ্যাক্সেস করতে পারি getElementByIdতবে না দিয়ে querySelector। আমি যদি নিম্নলিখিতটি করার চেষ্টা করি তবে আমি সিন্ট্যাক্সেরর পেয়েছি : কনসোলে DOM ব্যতিক্রম 12 ।

document.querySelector("#1")

querySelectorএইচটিএমএল 5 অনুমানগুলি বৈধ বলে যখন আইডি হিসাবে নম্বর ব্যবহার করা কার্যকর হয় না তখন আমি কেবল আগ্রহী work আমি একাধিক ব্রাউজার চেষ্টা করেছি।

Question 2

এটি বৈধ, তবে কিছু বিশেষ হ্যান্ডলিং প্রয়োজন। এখান থেকে: http://mathiasbynens.be/notes/css-escapes

শীর্ষস্থানীয় সংখ্যা

সনাক্তকারীটির প্রথম অক্ষরটি যদি সংখ্যাসূচক হয় তবে আপনাকে এর ইউনিকোড কোড পয়েন্টের ভিত্তিতে এড়াতে হবে। উদাহরণস্বরূপ, 1 অক্ষরের কোড পয়েন্টটি ইউ + 0031, সুতরাং আপনি এটিকে \ 000031 বা \ 31 হিসাবে এড়িয়ে যাবেন।

মূলত, যে কোনও সংখ্যাসূচক অক্ষরটি থেকে বাঁচতে কেবল এটি 3 ডলার দিয়ে উপসর্গ করুন এবং একটি স্পেস অক্ষর যুক্ত করুন ()। ইয়া ইউনিকোড!

সুতরাং আপনার কোড (সিএসএস প্রথম, জেএস দ্বিতীয়) হিসাবে শেষ হবে:

#\31  {
    background: hotpink;
}

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

Question 3

কারণ তারা এইচটিএমএল 5 স্পেসে বৈধ থাকাকালীন, তারা সিএসএসে বৈধ নয়, যা "কোয়েরি নির্বাচক " এর অর্থ।

পরিবর্তে, আপনাকে এটি করতে হবে: document.querySelector("[id='1']")এটি খুব দীর্ঘায়িত যা আপনি এটির মতো অর্থবহ আইডি message1বা কোনও কিছু দিতে পারেন তা বিবেচনা করে ;)

Question 4

আমার একটি অ্যাপ্রোচ দরকার ছিল যা স্বয়ংক্রিয় হয়েছিল। সাম্প্রতিক পরিবর্তনের অর্থ হ'ল ব্যবহৃত আইডি মানগুলি আর সরল বর্ণমালা এবং আর সংখ্যা এবং বিশেষ অক্ষর অন্তর্ভুক্ত ছিল না।

আমি ব্যবহার করে শেষ করেছি CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

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

ডাব্লু 3 সি ডকুমেন্টেশন থেকে অ্যাট্রিবিউট সিলেক্টর সিনট্যাক্স

গুণ মান অবশ্যই একটি বৈধ সিএসএস শনাক্তকারী বা স্ট্রিং হওয়া উচিত।

সুতরাং, শীর্ষস্থানীয় অঙ্ক সহ অঙ্কগুলি বা আলফানিউমেরিক স্ট্রিং কোনও বৈধ শনাক্তকারী হিসাবে যোগ্যতা অর্জন করে না।

আপনি যদি সনাক্তকারী তৈরির জন্য কোনও আইডি জেনারেটর ইউটিলিটি ব্যবহার করে থাকেন তবে আপনি আলফা সংখ্যাসূচক আইডির সাথে শীর্ষস্থানীয় অঙ্কগুলি সহ শেষ করতে পারেন।

দ্রুত সমাধান হ'ল হয় হয় জেনারেটরের এসইড থেকে অঙ্কগুলি বাদ দেওয়া (যদি এটি সংশোধন করা যায়) অথবা সর্বদা উত্পন্ন আইডিতে একটি স্ট্রিং যুক্ত করুন।

Question 6

সিএসএস নির্বাচকদের শীর্ষস্থানীয় নম্বর আইডির সাথে ডিল করার জন্য আমি এখনই তৈরি করেছি এমন একটি ফাংশন এবং CSS.escape না হওয়ায় এটি IE নিরাপদ।

এটি ব্যবহারের পূর্বে নির্বাচকটিকে এই ক্লিনসিলেক্টর ফাংশনটির মাধ্যমে পাস করুন:

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 );