Menggunakan querySelector dengan ID berupa angka

98

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.

Berry Biru
sumber
1
Menurut saya spesifikasi HTML5 tidak menyatakan valid. Saya akan memeriksa ulang ...
beautifulcoder
3
@beautifulcoder Mereka valid
dsgriffin
1
Tidak masalah, menurut validator.w3.org/check valid menggunakan angka. Mungkin browser modern belum menerapkan standar tersebut?
beautifulcoder

Jawaban:

111

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 ');
Dennis
sumber
Apa sintaksnya untuk nilai yang lebih besar dari 9? Saya tidak bisa membuat ini berfungsi dengan ID seperti 10.
Berry Blue
5
Anda memerlukan spasi setelah karakter pertama: #\\31 0- Anda dapat merujuk ke mothereffingcssescapes.com
Dennis
Terima kasih atas tindak lanjutnya dan tautannya!
Berry Blue
1
Perhatikan bahwa spasi hanya diperlukan jika karakter yang merupakan digit hex segera mengikuti urutan escape, untuk membedakan karakter tersebut dari escape sequence. Lihat w3.org/TR/CSS21/syndata.html#characters untuk detail selengkapnya.
BoltClock
85

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

Niet the Dark Absol
sumber
1
Anda tidak "harus" - ada cara untuk menggunakan pemilih id dengan digit terdepan. Saya setuju bahwa lebih baik memiliki id yang berarti.
Dennis
9
UUID bisa dimulai dengan angka.
Alfonso Nishikawa
24

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!

Glavin001
sumber
Pada hari ini, ketika Anda perlu berurusan dengan beberapa id aneh yang tidak Anda kendalikan, ini solusi paling bersih, juga karena ini didukung oleh semua browser modern.
LasaleFamine
Solusi hebat, menggunakan ini dalam produksi.
LoopsGod
3

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.

vikash Mishra
sumber
2

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


Per
sumber