Verwenden von querySelector mit IDs, die Zahlen sind

94

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, getElementByIdaber 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, querySelectorwenn die HTML5-Spezifikation besagt, dass diese gültig sind. Ich habe mehrere Browser ausprobiert.

Beerenblau
quelle
1
Ich glaube nicht, dass die HTML5-Spezifikation besagt, dass sie gültig sind. Ich werde es noch einmal überprüfen ...
Beautifulcoder
3
@beautifulcoder Sie sind gültig
dsgriffin
1
Trotzdem ist es laut validator.w3.org/check gültig, Zahlen zu verwenden. Vielleicht haben moderne Browser den Standard nicht ganz implementiert?
Beautifulcoder

Antworten:

107

Es ist gültig, erfordert jedoch eine besondere Behandlung. Von hier aus: http://mathiasbynens.be/notes/css-escapes

Führende Ziffern

Wenn das erste Zeichen eines Bezeichners numerisch ist, müssen Sie ihn basierend auf seinem Unicode-Codepunkt maskieren. Der Codepunkt für das Zeichen 1 ist beispielsweise U + 0031, sodass Sie ihn als \ 000031 oder \ 31 maskieren würden.

Um einem numerischen Zeichen zu entkommen, müssen Sie ihm einfach \ 3 voranstellen und ein Leerzeichen () anhängen. Yay Unicode!

Ihr Code würde also wie folgt enden (CSS zuerst, JS zweitens):

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');
Dennis
quelle
Wie würde die Syntax für Werte größer als 9 lauten? Ich kann das nicht mit IDs wie 10 zum Laufen bringen.
Berry Blue
5
Sie benötigen ein Leerzeichen nach dem ersten Zeichen: #\\31 0- Sie können auf Mothereffingcssescapes.com
Dennis
Vielen Dank für das Follow-up und den Link!
Berry Blue
1
Beachten Sie, dass das Leerzeichen nur erforderlich ist, wenn ein Zeichen, das eine hexadezimale Ziffer ist, unmittelbar auf die Escape-Sequenz folgt, um dieses Zeichen von der Escape-Sequenz zu unterscheiden. Weitere Informationen finden Sie unter w3.org/TR/CSS21/syndata.html#characters .
BoltClock
83

Denn 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 wie message1oder so geben könnte;)

Niet the Dark Absol
quelle
1
Sie müssen nicht - es gibt eine Möglichkeit, einen ID-Selektor mit einer führenden Ziffer zu verwenden. Ich stimme jedoch zu, dass es besser ist, einen aussagekräftigen Ausweis zu haben.
Dennis
9
UUIDs können mit einer Zahl beginnen.
Alfonso Nishikawa
19

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/escape

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

Erstens ist dies der fehlerhafte Fall:

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>

Und jetzt mit CSS.escape:

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>

Sehen Sie, wie sich die Anzeige korrekt ändert, Afterund demonstrieren Sie, dass der Selektor funktioniert hat!

Glavin001
quelle
Wenn Sie sich heute mit einer seltsamen ID befassen müssen, die Sie nicht kontrollieren, ist dies die sauberste Lösung, auch weil dies von allen modernen Browsern unterstützt wird.
LasaleFamine
3

Aus der W3C-Dokumentation Attributselektorsyntax

Attributwerte müssen gültige CSS-Bezeichner oder Zeichenfolgen sein.

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.

Vikash Mishra
quelle
2

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:

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

Pro
quelle