Voor zover ik heb begrepen, kun je met de HTML5-specificatie ID’s gebruiken die op dit soort nummers lijken.
<div id="1"></div>
<div id="2"></div>
Ik heb toegang tot deze boetes met getElementByIdmaar niet met querySelector. Als ik het volgende probeer, krijg ik SyntaxError: DOM Exception 12in de console.
document.querySelector("#1")
Ik ben gewoon benieuwd waarom het gebruik van getallen als ID’s niet werkt querySelectorals de HTML5-specificatie zegt dat deze geldig zijn. Ik heb meerdere browsers geprobeerd.
Antwoord 1, autoriteit 100%
Het is geldig, maar vereist een speciale behandeling. Vanaf hier: http://mathiasbynens.be/notes/css-escapes
Voorloopcijfers
Als het eerste teken van een identifier numeriek is, moet je het escapen op basis van het Unicode-codepunt. Het codepunt voor het teken 1 is bijvoorbeeld U+0031, dus u zou er aan ontsnappen als \000031 of \31 .
Als je een willekeurig numeriek teken wilt escapen, voeg je er gewoon \3 aan toe en voeg je een spatie ( ) toe. Yay Unicode!
Dus je code zou eindigen als (CSS eerst, JS tweede):
#\31 {
background: hotpink;
}
document.getElementById('1');
document.querySelector('#\\31 ');
Antwoord 2, autoriteit 87%
Omdat hoewel ze geldig zijn in de HTML5-specificatie, ze niet geldig zijn in CSS, wat “query selector” betekent.
In plaats daarvan zou je dit moeten doen: document.querySelector("[id='1']"), wat erg langdradig is aangezien je het een betekenisvolle ID zoals message1of zoiets 😉
Antwoord 3, autoriteit 33%
Ik had een aanpak nodig die geautomatiseerd was. Een recente wijziging betekende dat de gebruikte ID-waarden niet langer eenvoudige alfabetische tekens waren en cijfers en speciale tekens bevatten.
Ik heb uiteindelijk CSS.escapegebruikt: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
console.log(CSS.escape('1'));Antwoord 4, autoriteit 5%
Hier is een functie die ik zojuist heb gemaakt voor het omgaan met voorloopnummer-ID’s in CSS-kiezers, en het is IE-veilig zoals CSS.escape dat niet is.
Laat de selector door deze cleanSelector-functie gaan voordat u deze gebruikt:
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 );
Antwoord 5, autoriteit 2%
Uit de W3C-documentatie syntaxis voor kenmerkselectors
Kenmerkwaarden moeten geldige CSS-ID’s of String zijn.
Dus cijfers of alfanumerieke tekenreeksen met voorloopcijfer komen niet in aanmerking als een geldige identificatie.
Als u een hulpprogramma voor het genereren van ID’s gebruikt voor het genereren van een ID, kunt u eindigen met alfanumerieke ID’s met voorloopcijfers.
Een snelle oplossing zou zijn om ofwel cijfers uit de SEED van de generator weg te laten (als deze kan worden gewijzigd) of altijd een string toe te voegen aan de gegenereerde id.
Antwoord 6, autoriteit 2%
Om dynamische id’s in de zoekopdrachtselector te gebruiken, heeft u eenvoudige code gebruikt.
this.template.querySelector("[id='"+divId+"']");
Als je aan de iteraties werkt en toegang wilt hebben op id, check dan deze code.
Ik had een herhaling op het accountobject en gebruikte een klikbare gebeurtenis op LWC:
<template for:each={accounts.data} for:item="acc">
<div key={acc.Id} id={acc.Id} class="box" onclick={handleClick}>
{acc.Name}
</div>
</template>
Ik wilde toegang krijgen tot div-gegevens door de ID ervan te gebruiken bij het aanroepen van de onclick-gebeurtenis op de div.
handleClick(event){
event.dataTransfer.setData("divId", event.target.id);
var divId = event.dataTransfer.getData("divId");
//Using the divId in querySelector
var Element = this.template.querySelector("[id='"+divId+"']");
}