数値であるIDでquerySelectorを使用する

Question 1

私が理解していることから、HTML5仕様では、このような数値であるIDを使用できます。

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

を使用してこれらの問題にアクセスできますが、を使用することはできgetElementByIdませんquerySelector。次のようにすると、コンソールにSyntaxError：DOM Exception 12が表示されます。

document.querySelector("#1")

querySelectorHTML5仕様で有効であると記載されているのに、IDとして数値を使用しても機能しないのはなぜですか。複数のブラウザを試しました。

Question 2

有効ですが、特別な処理が必要です。ここから：http : //mathiasbynens.be/notes/css-escapes

先頭の数字

識別子の最初の文字が数値の場合は、Unicodeコードポイントに基づいてエスケープする必要があります。たとえば、文字1のコードポイントはU + 0031なので、\ 000031または\ 31としてエスケープします。

基本的に、数字をエスケープするには、その前に\ 3を付けてスペース文字（）を追加します。ユニコード！

したがって、コードは次のようになります（CSSが最初、JSが2番目）。

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');

Question 3

これらはHTML5仕様では有効ですが、CSSでは無効であるため、「クエリセレクタ」とはそのためです。

代わりに、これを行う必要があります：document.querySelector("[id='1']")、または何かのような意味のある IDを与えることができることを考えると、これは非常に時間がかかりますmessage1;）

Question 4

自動化されたアプローチが必要でした。最近の変更により、使用されたid値は単純なアルファベット文字ではなくなり、数字と特殊文字が含まれるようになりました。

私は最終的に使用しましたCSS.escape：https : //developer.mozilla.org/en-US/docs/Web/API/CSS/escape

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

スニペットを展開

まず、これは失敗したケースです。

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";

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

スニペットを展開

そして今使用していCSS.escapeます：

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";

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

スニペットを展開

どのように正しくshow Afterに変化するかを見て、セレクターが機能したことを示してください！

Question 5

W3Cドキュメントの属性セレクター構文から

属性値は、有効なCSS識別子または文字列である必要があります。

したがって、先行する数字を含む数字または英数字の文字列は、有効な識別子としては認められません。

識別子を生成するためにIDジェネレーターユーティリティを使用している場合は、先頭に数字が付いた英数字のIDになる可能性があります。

簡単な修正は、ジェネレータのSEEDから数字を省略するか（変更できる場合）、または生成されたIDに常に文字列を追加することです。

Question 6

これは、CSSセレクターの先行番号IDを処理するために今作成した関数です。CSS.escapeはそうではないので、IEセーフです。

セレクターを使用する前に、このcleanSelector関数にセレクターを渡します。

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