QuerySelector'ı sayı olan kimliklerle kullanma

Anladığım kadarıyla HTML5 spesifikasyonu bunun gibi numaralar olan kimlikleri kullanmanıza izin veriyor.

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

Bunlara iyi kullanarak erişebilirim getElementByIdama ile erişemiyorum querySelector. Aşağıdakileri yapmayı denersem , konsolda SyntaxError: DOM Exception 12 alıyorum .

document.querySelector("#1")

querySelectorHTML5 spesifikasyonu bunların geçerli olduğunu söylediği halde neden kimlik olarak sayıların kullanılmasının işe yaramadığını merak ediyorum . Birden çok tarayıcı denedim.

Bu geçerlidir, ancak bazı özel işlem gerektirir. Buradan: http://mathiasbynens.be/notes/css-escapes

Baştaki rakamlar

Bir tanımlayıcının ilk karakteri sayısal ise, Unicode kod noktasına göre ondan çıkmanız gerekir. Örneğin, 1 karakteri için kod noktası U + 0031'dir, bu nedenle \ 000031 veya \ 31 olarak kaçabilirsiniz.

Temel olarak, herhangi bir sayısal karakterden kaçınmak için, sadece \ 3 önekini ve bir boşluk karakteri () ekleyin. Yaşasın Unicode!

Yani kodunuz şu şekilde biter (önce CSS, JS saniye):

#\31  {
    background: hotpink;
}

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

Çünkü HTML5 spesifikasyonunda geçerli olsalar da, CSS'de geçerli değildirler, bu "sorgu seçici " anlamına gelir.

Bunun yerine, şunu yapmanız gerekir: Bu document.querySelector("[id='1']"), ona anlamlı bir kimlik message1veya benzeri bir şey verebileceğiniz düşünülürse, çok uzun bir süredir ;)

Otomatikleştirilmiş bir yaklaşıma ihtiyacım vardı. Yakın zamanda yapılan bir değişiklik, kullanılan kimlik değerlerinin artık basit alfabetik karakterler olmadığı ve sayılar ve özel karakterler içerdiği anlamına geliyordu.

Sonunda şunu kullandım CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

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

İlk olarak, başarısız durum budur:

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

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

Ve şimdi kullanılıyor CSS.escape:

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

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

AfterSeçicinin çalıştığını göstererek nasıl doğru şekilde değiştiğini görün !

W3C belgelerinden Öznitelik seçiciler sözdizimi

Öznitelik değerleri, geçerli bir CSS tanımlayıcıları veya Dize olmalıdır.

Bu nedenle, basamağı olan basamaklar veya alfanümerik dizeler geçerli bir tanımlayıcı olarak nitelendirilmez.

Bir tanımlayıcı oluşturmak için bir kimlik üretme yardımcı programı kullanıyorsanız, baştaki rakamlara sahip alfanümerik kimliklerle karşılaşabilirsiniz.

Hızlı bir düzeltme, ya jeneratörün SEED'indeki rakamları çıkarmak (eğer değiştirilebiliyorsa) ya da üretilen kimliğe her zaman bir dize eklemek olacaktır.

İşte şimdi CSS seçicilerinde önde gelen numara kimlikleri ile uğraşmak için yaptığım bir işlev ve CSS.escape olmadığı gibi IE güvenli.

Seçiciyi kullanmadan önce bu cleanSelector işlevinden geçirin:

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