Verwenden von querySelector mit IDs, die Zahlen sind

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.

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

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

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!

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.

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