Soweit ich weiß, können Sie mit der HTML5-Spezifikation IDs verwenden, bei denen es sich um solche Zahlen handelt.
<div id="1"></div>
<div id="2"></div>
Ich kann auf diese gut zugreifen, getElementById
aber nicht mit querySelector
. Wenn ich Folgendes versuche, wird SyntaxError: DOM-Ausnahme 12 in der Konsole angezeigt .
document.querySelector("#1")
Ich bin nur neugierig, warum die Verwendung von Zahlen als IDs nicht funktioniert, querySelector
wenn die HTML5-Spezifikation besagt, dass diese gültig sind. Ich habe mehrere Browser ausprobiert.
javascript
html
css-selectors
selectors-api
Beerenblau
quelle
quelle
Antworten:
Es ist gültig, erfordert jedoch eine besondere Behandlung. Von hier aus: http://mathiasbynens.be/notes/css-escapes
Ihr Code würde also wie folgt enden (CSS zuerst, JS zweitens):
quelle
#\\31 0
- Sie können auf Mothereffingcssescapes.comDenn während sie in der HTML5 - Spezifikation gültig sind, sind sie in CSS nicht gültig, das ist das, was „Abfrage Selektor “ bedeutet.
Stattdessen müssten Sie dies tun:,
document.querySelector("[id='1']")
was sehr langwierig ist, wenn man bedenkt, dass man ihm einen aussagekräftigen Ausweis wiemessage1
oder so geben könnte;)quelle
Ich brauchte einen automatisierten Ansatz. Eine kürzlich vorgenommene Änderung bedeutete, dass die verwendeten ID-Werte keine einfachen alphabetischen Zeichen mehr waren und Zahlen und Sonderzeichen enthielten.
Am Ende habe ich Folgendes verwendet
CSS.escape
: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escapeErstens ist dies der fehlerhafte Fall:
Und jetzt mit
CSS.escape
:Sehen Sie, wie sich die Anzeige korrekt ändert,
After
und demonstrieren Sie, dass der Selektor funktioniert hat!quelle
Aus der W3C-Dokumentation Attributselektorsyntax
Ziffern oder alphanumerische Zeichenfolgen mit führender Ziffer gelten daher nicht als gültige Kennung.
Wenn Sie ein ID-Generator-Dienstprogramm zum Generieren eines Bezeichners verwenden, erhalten Sie möglicherweise alphanumerische IDs mit führenden Ziffern.
Eine schnelle Lösung wäre, entweder Ziffern aus dem SEED des Generators wegzulassen (falls dies geändert werden kann) oder immer eine Zeichenfolge an die generierte ID anzuhängen.
quelle
Hier ist eine Funktion, die ich gerade für den Umgang mit führenden Nummern-IDs in CSS-Selektoren erstellt habe. Sie ist IE-sicher, da CSS.escape dies nicht ist.
Führen Sie den Selektor durch diese cleanSelector-Funktion, bevor Sie ihn verwenden:
quelle