Z tego, co rozumiem, specyfikacja HTML5 umożliwia używanie identyfikatorów, które są liczbami takimi jak ta.
<div id="1"></div>
<div id="2"></div>
Mogę uzyskać dostęp do tych dobrze za pomocą, getElementById
ale nie za pomocą querySelector
. Jeśli spróbuję wykonać następujące czynności, w konsoli pojawi się SyntaxError: DOM Exception 12 .
document.querySelector("#1")
Jestem po prostu ciekawy, dlaczego używanie liczb jako identyfikatorów nie działa, querySelector
gdy specyfikacja HTML5 mówi, że są one prawidłowe. Próbowałem wielu przeglądarek.
javascript
html
css-selectors
selectors-api
Niebieska Jagoda
źródło
źródło
Odpowiedzi:
Jest ważny, ale wymaga specjalnej obsługi. Stąd: http://mathiasbynens.be/notes/css-escapes
Więc twój kod skończy jako (najpierw CSS, potem JS):
#\31 { background: hotpink; } document.getElementById('1'); document.querySelector('#\\31 ');
źródło
#\\31 0
- możesz odnieść się do mothereffingcssescapes.comPonieważ chociaż są prawidłowe w specyfikacji HTML5, nie są poprawne w CSS, co oznacza „ selektor zapytania ”.
Zamiast tego musiałbyś to zrobić:,
document.querySelector("[id='1']")
co jest bardzo rozwlekłe, biorąc pod uwagę, że możesz nadać mu znaczący identyfikatormessage1
lub coś takiego;)źródło
Potrzebowałem podejścia, które byłoby zautomatyzowane. Niedawna zmiana oznaczała, że używane wartości identyfikatorów nie były już prostymi znakami alfabetycznymi i zawierały liczby i znaki specjalne.
Skończyło się na
CSS.escape
: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escapeconsole.log(CSS.escape('1'));
Po pierwsze, jest to przypadek niepowodzenia:
const theId = "1"; document.querySelector(`#${theId}`); const el = document.querySelector(`#${theId}`); el.innerHTML = "After";
<div id="1">Before</div>
A teraz używając
CSS.escape
:const theId = "1"; const el = document.querySelector(`#${CSS.escape(theId)}`); el.innerHTML = "After";
<div id="1">Before</div>
Zobacz, jak poprawnie zmienia się wyświetlanie
After
, demonstrując działanie selektora!źródło
Z dokumentacji W3C Składnia selektorów atrybutów
W związku z tym cyfry lub ciągi alfanumeryczne z cyfrą wiodącą nie kwalifikują się jako prawidłowy identyfikator.
Jeśli używasz narzędzia do generowania identyfikatorów do generowania identyfikatorów, możesz otrzymać identyfikatory alfanumeryczne z początkowymi cyframi.
Szybkim rozwiązaniem byłoby pominięcie cyfr z SEED generatora (jeśli można je zmodyfikować) lub zawsze dołączanie ciągu do wygenerowanego identyfikatora.
źródło
Oto funkcja, którą właśnie stworzyłem, aby radzić sobie z wiodącymi identyfikatorami liczbowymi w selektorach CSS i jest bezpieczna dla IE, tak jak CSS.escape nie.
Przeprowadź selektor przez tę funkcję cleanSelector przed jej użyciem:
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 );
źródło