Menggunakan querySelector dengan ID berupa angka

Dari apa yang saya pahami, spesifikasi HTML5 memungkinkan Anda menggunakan ID yang berupa angka seperti ini.

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

Saya dapat mengakses ini dengan baik menggunakan getElementByIdtetapi tidak dengan querySelector. Jika saya mencoba melakukan hal berikut, saya mendapatkan SyntaxError: DOM Exception 12 di konsol.

document.querySelector("#1")

Saya hanya ingin tahu mengapa menggunakan angka sebagai ID tidak berfungsi querySelectorketika spesifikasi HTML5 mengatakan ini valid. Saya mencoba beberapa browser.

Ini valid, tetapi membutuhkan penanganan khusus. Dari sini: http://mathiasbynens.be/notes/css-escapes

Digit awal

Jika karakter pertama pengenal adalah numerik, Anda harus menghindarinya berdasarkan titik kode Unicode-nya. Misalnya, titik kode untuk karakter 1 adalah U + 0031, jadi Anda akan meloloskannya sebagai \ 000031 atau \ 31.

Pada dasarnya, untuk keluar dari karakter numerik apa pun, cukup awali dengan \ 3 dan tambahkan karakter spasi (). Hore Unicode!

Jadi kode Anda akan berakhir sebagai (CSS pertama, JS kedua):

#\31  {
    background: hotpink;
}

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

Karena meskipun valid di spesifikasi HTML5, mereka tidak valid di CSS, yang artinya " pemilih kueri ".

Sebaliknya, Anda harus melakukan ini:, document.querySelector("[id='1']")yang sangat bertele-tele mengingat Anda dapat memberikan ID yang berarti seperti message1atau sesuatu;)

Saya membutuhkan pendekatan yang otomatis. Perubahan baru-baru ini berarti nilai id yang digunakan bukan lagi karakter alfabet sederhana dan termasuk angka dan karakter khusus.

Saya akhirnya menggunakan CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

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

Pertama, ini kasus yang gagal:

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

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

Dan sekarang menggunakan CSS.escape:

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

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

Lihat bagaimana itu berubah dengan benar untuk menunjukkan After, mendemonstrasikan selektor bekerja!

Dari sintaks pemilih atribut dokumentasi W3C

Nilai atribut harus berupa pengidentifikasi CSS atau String yang valid.

Dengan demikian, angka atau string alfanumerik dengan digit terdepan tidak memenuhi syarat sebagai pengenal yang valid.

Jika Anda menggunakan utilitas pembuat ID untuk membuat pengenal, Anda mungkin mendapatkan id alfa numerik dengan digit di depan.

Perbaikan cepat adalah dengan menghilangkan digit dari SEED generator (jika dapat dimodifikasi) atau selalu menambahkan string ke id yang dihasilkan.

Berikut adalah fungsi yang baru saja saya buat untuk menangani ID nomor terdepan di pemilih CSS, dan ini aman untuk IE karena CSS.escape tidak.

Lewati selektor melalui fungsi cleanSelector ini sebelum menggunakannya:

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