Używanie queryselectora z identyfikatorami będącymi liczbami

Z tego, co rozumiem, Specyfikacja HTML5 pozwala używać identyfikatorów, które są liczbami takimi jak ten.

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

Mogę uzyskać do nich dostęp za pomocą getElementById, ale nie za pomocą querySelector. Jeśli spróbuję wykonać następujące czynności, otrzymuję SyntaxError: Dom Exception 12 w konsoli.

document.querySelector("#1")

Jestem po prostu ciekaw, dlaczego używanie numerów jako identyfikatorów nie działa querySelector Kiedy Specyfikacja HTML5 mówi, że są one ważne. Próbowałem wielu przeglądarek.

Author: BoltClock, 2013-12-01
Source

2 answers

Jest ważny, ale wymaga specjalnej obsługi. Stąd: http://mathiasbynens.be/notes/css-escapes

Cyfry wiodące

Jeśli pierwszy znak identyfikatora jest numeryczny, musisz go usunąć na podstawie jego kodu Unicode. Na przykład, punktem kodowym dla znaku 1 jest U + 0031, więc można go uniknąć jako \000031 lub \31 .

Zasadniczo, aby uniknąć dowolnego znaku numerycznego, wystarczy przedrostek \3 i dodać znak spacji ( ). Yay Unicode!

Więc Twój kod skończy się jako (CSS pierwszy, js drugi): 

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');
 69
Author: Dennis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-18 13:44:23

Ponieważ chociaż są ważne w specyfikacji HTML5, nie są ważne w CSS, co oznacza "query selector".

Zamiast tego musisz zrobić to: document.querySelector("[id='1']"), co jest bardzo długie, biorąc pod uwagę, że możesz nadać mu wymowny id jak message1 Czy coś;)

 49
Author: Niet the Dark Absol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-30 22:08:45