De JavaScript-methode document.querySelector() retourneert het eerste element in het document (een Element-object) dat overeenkomt met de opgegeven selector of groep selectors. Als er geen overeenkomsten worden gevonden, wordt null geretourneerd.
Houd er rekening mee dat het niet is toegestaan om CSS-pseudo-elementen te gebruiken als selectorwaarde voor het zoeken naar elementen. In dit geval zal de geretourneerde waarde altijd null zijn.
Als u een lijst nodig heeft met alle elementen die overeenkomen met een opgegeven selector of selectors, gebruik dan de methode querySelectorAll() om dit te doen.
De methode .querySelector() is ook gedefinieerd voor het Element-object. Om deze reden kan deze voor elk element worden aangeroepen, niet alleen voor het documentobject. Het element waarop het wordt aangeroepen, wordt gebruikt als het hoofdelement voor de zoekopdracht.
Browserondersteuning JavaScript-syntaxis: document .querySelector( kiezers) kiezers- Stringspecificatiekiezers API-niveau 1 Parameterwaarden| kiezers | Het argument moet overeenkomen met een geldige selectorreeks die een of meer selectors bevat. Wanneer u meerdere selectors opgeeft, moet u de waarden scheiden met komma's. In dit geval wordt het eerste element dat uit de gegeven selectors wordt gevonden, geselecteerd. Als u om de een of andere reden tekens gebruikt in selectornamen die geen deel uitmaken van de standaardsyntaxis CSS, dan moeten dergelijke tekens bij het zoeken worden geëscaped met behulp van het backslash-teken ( "\" ). Omdat de backslash ook een speciaal teken is ( ontsnappen) V JavaScript, dan moet bij het invoeren van een letterlijke string tweemaal een escape worden uitgevoerd. Vereiste parameter. |
In dit voorbeeld roepen we, met behulp van het gebeurtenisattribuut onclick, wanneer op een knop (HTML-element) wordt geklikt, de functie myFunc() aan, die met behulp van JavaScript De document .querySelector() -methode selecteert de volgende elementen:
- Eerst element met de blokklasse in het document en de set zwart achtergrondkleur van het gevonden element.
- Eerst element uit de gegeven selectors (element met klasse eerst, element met klasseblok ) en stel de tekstkleur van het gevonden element in op rood. In dit geval wordt deze geselecteerd Eerst het gevonden element uit de gegeven selectors.
- Het element dat is seconde onderliggende element van het bovenliggende element en ingesteld op het gevonden element groente tekst kleur.
- Het element dat het laatste element is van het bovenliggende element en is ingesteld op het gevonden element blauw tekst kleur.
Het resultaat van ons voorbeeld.
Zoals u weet, komt er bij het ontwikkelen van een grote JS-applicatie die gebruikmaakt van de populaire jQuery-bibliotheek een moment waarop het prestatieprobleem acuut wordt. Alle krachten worden in het gat van de profiler geworpen, elke uitdaging wordt nauwgezet onderzocht, elk functioneel geladen implementatiestuk wordt van alle kanten besnuffeld en gecorrigeerd. Maar het probleem komt niet uit de richting waarin 90% van de ontwikkelaars het verwacht. Selectors - Er zit zoveel in dit woord.
Laten we eens kijken hoe deze magie werkt en waarom het zoeken naar DOM-elementen een daling in de applicatieprestaties kan veroorzaken.
Laat me je een eenvoudig voorbeeld geven:
De twee getoonde selectors zijn praktisch niet verschillend en zullen dezelfde set elementen retourneren. De eerste selector retourneert echter het resultaat van querySelectorAll(), en de tweede retourneert het resultaat van normaal filteren op elementen.
$("#mijn_formulierinvoer")
$("#my_form input") Selector parseren en opzoeken Als querySelectorAll() mislukt, zal Sizzle proberen de normale browserfuncties getElementById(), getElementsByName(), getElementsByTagName() en getElementByClass() te gebruiken. In de meeste gevallen zijn ze voldoende, maar (sic!) in IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
Over het algemeen ontleedt Sizzle een selector van rechts naar links. Om deze functie te illustreren volgen hier enkele voorbeelden:
$(".divs.mijn_klasse")
Het zal eerst .my_class-elementen vinden en vervolgens alleen de elementen filteren die .divs in hun ouders hebben. Zoals we kunnen zien, is dit een vrij dure operatie, en het gebruik van context lost het probleem niet op (we zullen hieronder over context praten).
Zoals ik al zei: in de meeste gevallen zal Sizzle de selector van rechts naar links parseren, maar niet wanneer een element met een ID wordt gebruikt:
$("#divs.mijn_klasse")
In dit geval gedraagt de selector zich zoals verwacht en wordt het element #divs onmiddellijk als context gebruikt. Context De tweede parameter die samen met de selector aan de functie $() wordt doorgegeven, wordt context genoemd. Het is ontworpen om de zoektocht naar elementen te beperken. Tijdens het parseren wordt de context echter aan het begin van de selector vastgezet, wat helemaal geen enkel voordeel oplevert. Een winnende combinatie van het gebruik van context is een geldige selector voor querySelectorAll(), aangezien deze functie niet alleen namens het document kan worden gebruikt, maar ook voor het element. Vervolgens wordt de selector met de context figuurlijk omgezet in de volgende constructie:
$(".divs", document.getElementById("wrapper"));
document.getElementById("wrapper").querySelectorAll(".divs"); // gebruik indien mogelijk querySelectorAll()
Als het in dit voorbeeld niet mogelijk is om querySelectorAll() te gebruiken, filtert Sizzle de elementen met behulp van een eenvoudige iteratie.
Nog een opmerking over de context (we hebben het niet over selectors) - als u een jQuery-object als tweede parameter doorgeeft aan de selector voor de functie.live(), wordt de gebeurtenis opgevangen in document(!), en als het is een DOM-object, dan zal de gebeurtenis alleen naar dit element opborrelen. Ik probeer zulke subtiliteiten niet te onthouden, maar gebruik .delegate() .
$(".root > .child")
Zoals we weten, begint het parseren van de selector en het zoeken met all.child-elementen op de pagina (op voorwaarde dat querySelectorAll() niet beschikbaar is). Deze operatie is vrij duur en we kunnen de selector als volgt transformeren:
$(".child", $(".root")); // Het gebruik van context maakt het zoeken niet eenvoudiger
$(".root").find(".child"); // waarom moeten we alle elementen binnen .root doorlopen?
$(".root").children(".child"); // de meest correcte optie
Als het echter nodig is om filters op attributen te gebruiken (:visible, :eq, etc.) en de selector ziet er als volgt uit:
$(".sommige_afbeeldingen:zichtbaar")
dan wordt het filter als laatste toegepast, d.w.z. We wijken opnieuw af van de ‘van rechts naar links’-regel.
- Gebruik indien mogelijk de juiste selectors die overeenkomen met querySelectorAll()
- Vervang ondergeschiktheid binnen selectors door subquery's (.child(...), etc.)
- Verduidelijk de selectorcontext
- Filter een zo klein mogelijke set elementen
Gebaseerd op de masterclass
JavaScript heeft, net als CSS, functionaliteit waarmee u toegang krijgt tot HTML-elementen om pagina-inhoud te transformeren. In CSS wordt dit bereikt door selectors te schrijven. Er zijn verschillende manieren om deze functionaliteit in JavaScript te organiseren, en hier is er een van:
Var primaireHeadings = document.getElementsByTagName("h1");
Deze code extraheert alle h1-headers en plaatst ze grofweg in de primaireHeadings-variabele. Als er meerdere kopteksten op de pagina staan, worden deze allemaal in een array geplaatst.
Var ou812 = document.getElementById("eddie");
Deze code selecteert het element met id = “eddie”.
Var gitaren = document.getElementsByClassName("assen");
We kunnen ook elementen selecteren op de naam van hun klassen.
Laten we wat Sizzle toevoegenVerschillende JavaScript-frameworks bieden hun eigen opties voor het maken van selectors. Een van de meest succesvolle was Sizzle, dat later jQuery werd. In tegenstelling tot zijn afstammeling kon Sizzle alleen met de DOM werken en deze manipuleren. Als je alle andere jQuery-functionaliteit niet nodig hebt, kun je Sizzle vandaag nog als aparte bibliotheek downloaden.
Met de ontwikkeling van deze bibliotheken is het schrijven van selectors aanzienlijk verminderd en getransformeerd:
$("#dave").css()
Deze code extraheert een html-element met id=”dave” en stelt je in staat om met de CSS-stijlen ervan te werken.
Sizzle is niet de enige JavaScript-bibliotheek voor het manipuleren van HTML-code. Er zijn ook andere opties, bijvoorbeeld rangy. Naar mijn mening is al het bovenstaande echter achterhaald voordat u verder in dit artikel verder gaat.
Volgende niveau van JavaScriptVeel ontwikkelaars begonnen jQuery zo vaak te gebruiken dat ze de dramatische veranderingen in JavaScript zelf niet eens opmerkten.
De “JavaScript Selector API” is een officieel onderdeel van de HTML5-specificatie en kan ook worden gebruikt bij het schrijven van XHTML-pagina’s. De nieuwe syntaxis is heel eenvoudig:
Document.querySelector("#eddie")
Deze code is absoluut gelijk aan document.getElementById("eddie"). Niet indrukwekkend? Hoe zit het met dit:
Document.querySelector("#eddie h1 + p")
Met de nieuwe functionaliteit kunt u de DOM manipuleren met behulp van complexe CSS-expressies.
De querySelector-methode haalt alleen het eerste element op dat het tegenkomt. Om alles op te halen, moet u querySelectorAll gebruiken:
Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")
Deze code haalt elke derde rij uit de tabel met id=”frets”.
Een paar hele belangrijke puntenEr zijn verschillende beperkingen waar u rekening mee moet houden als u de methode querySelector / All gebruikt:
Niet alle browsers ondersteunen de nieuwe functionaliteit. Als je het belangrijk vindt dat de code werkt op IE6-7, dan kun je beter bibliotheken gebruiken die de DOM kunnen manipuleren: Sizzle of jQuery.
Selectors moeten heel zorgvuldig worden geschreven, anders zullen browsers ze niet begrijpen en zullen de bovenstaande methoden nul retourneren. Wees over het algemeen heel voorzichtig, vooral als u CSS3-selectors gebruikt.
In tegenstelling tot getElementsByTagName retourneert de methode querySelectorAll een statische lijst met opgehaalde elementen zoals deze momenteel op de pagina verschijnen. Dit betekent dat wanneer u dynamische wijzigingen in de code aanbrengt (elementen toevoegt of verwijdert via JavaScript), u de methode querySelectorAll opnieuw moet gebruiken.
Probeer nieuwe functionaliteit om te voorkomen dat u verschillende soorten bibliotheken hoeft te downloaden.
Een taak waarmee beginnende JavaScript-ontwikkelaars vaak worden geconfronteerd, is het selecteren van een element op een webpagina op basis van het id-attribuut.
Stel dat er code op de pagina staat.
Inhoud blokkeren.
Hoe kun je een element met id="elem" selecteren en er een reeks acties mee uitvoeren?
Er zijn verschillende opties om het probleem op te lossen. Laten we ze nu bekijken.
Optie 1: Gebruik de Javascript getElementById-methode.
Er is een manier om toegang te krijgen tot een element op basis van zijn ID met behulp van ‘pure’ javascript-code, zonder gebruik te maken van bibliotheken van derden. Bij deze methode wordt de methode ggetElementById(“element_id”) gebruikt. We hebben dus toegang tot het element dat we nodig hebben via de id.
Laten we eens kijken hoe dit werkt met een eenvoudig voorbeeld.
Inhoud blokkeren.
alert(document.getElementById("elem").innerHTML);
Houd er rekening mee dat deze coderegels (script) zich onder het element zelf bevinden. Dit is een voorwaarde voor de werking van dit script, omdat... De Javascript-code wordt uitgevoerd terwijl de pagina wordt geladen. Als we de code hierboven plaatsen, krijgen we toegang tot een element op de pagina dat nog niet is geladen, d.w.z. het zal nog niet in de code staan op het moment dat het script wordt uitgevoerd. Er zijn manieren om dit te voorkomen, maar dit valt buiten het bestek van dit artikel.
Als gevolg hiervan krijgen we, als alles correct werkt, een pop-upvenster. Dit venster toont de tekst die zich in het div-blok bevindt.
Laten we nu kijken hoe we dit probleem op een andere manier kunnen oplossen.
Optie 2. Gebruik van de JQuery-bibliotheek.
De tweede optie voor het selecteren van een element op basis van zijn ID is het gebruik van de JQuery-bibliotheek. In de praktijk wordt deze methode in moderne scripts het vaakst gebruikt. Het is veel handiger en gemakkelijker te onthouden.
Om naar een element te verwijzen op basis van zijn id, moet je de volgende constructie gebruiken:
$("#elem")
Hier is elem de naam in het id-attribuut.
Het is toegevoegd in de sectie. Een van de manieren waarop dit gedaan kan worden is door de volgende regel code toe te voegen:
Om de bibliotheek te kunnen laden, moet er een internetverbinding zijn.
Inhoud blokkeren.
alert($("#elem").html());
Het script zelf moet, net als in het vorige voorbeeld, zich onder de code bevinden van het element waarmee u wilt communiceren.
We hebben dus twee manieren besproken waarop u een element op een webpagina kunt selecteren op basis van het id-attribuut en ermee kunt communiceren. Kies de methode die bij je past en breng deze in de praktijk.
Binnen het document dat overeenkomt met de opgegeven selector of groep selectors. Als er geen overeenkomsten worden gevonden, wordt null geretourneerd.
Opmerking: Het matchen wordt gedaan met behulp van diepte-eerste pre-order doorloop van de knooppunten van het document, beginnend met het eerste element in de opmaak van het document en itererend door opeenvolgende knooppunten in volgorde van het aantal onderliggende knooppunten.Syntaxiselement = document.querySelector(selectors); Parameterselectors Een DOMString die een of meer bijpassende selectors bevat. Deze tekenreeks moet een geldige CSS-selectortekenreeks zijn; Als dit niet het geval is, wordt er een SYNTAX_ERR-uitzondering gegenereerd. Zie DOM-elementen lokaliseren met behulp van selectors voor meer informatie over selectors en hoe u deze kunt beheren.
Opmerking: Tekens die geen deel uitmaken van de standaard CSS-syntaxis moeten worden geëscaped met behulp van een backslash-teken. Omdat JavaScript ook backslash-escaping gebruikt, moet u vooral voorzichtig zijn bij het schrijven van letterlijke tekenreeksen met deze tekens. Zie voor meer informatie.Retourwaarde Uitzonderingen SYNTAX_ERR De syntaxis van de opgegeven selectors is ongeldig. Gebruiksnotities
Als de opgegeven selector overeenkomt met een ID die meerdere keren onjuist in het document wordt gebruikt, wordt het eerste element met die ID geretourneerd.Ontsnappen aan speciale karakters Om te matchen met een ID of selectors die niet de standaard CSS-syntaxis volgen (door bijvoorbeeld een dubbele punt of spatie op ongepaste wijze te gebruiken), moet u het teken laten ontsnappen met een backslash (" \ "). Omdat de backslash ook een escape-teken is in JavaScript, moet u, als u een letterlijke tekenreeks invoert, daaraan ontsnappen tweemaal
console.log("#foo\bar"); // "#fooar" (\b is het backspace-besturingsteken) document.querySelector("#foo\bar"); // Komt met niets overeen console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Match de eerste div document.querySelector("#foo:bar"); // Komt met niets overeen document.querySelector("#foo\\:bar"); // Match de tweede div
Voorbeelden Het vinden van het eerste element dat overeenkomt met een klasseIn dit voorbeeld wordt het eerste element in het document met de klasse " myclass " geretourneerd:
Var el = document.querySelector(".mijnklasse");
Een complexere selectorSelectors kunnen ook heel krachtig zijn, zoals blijkt uit het volgende voorbeeld. Hier wordt het eerste element met de naam "login" () in een waarvan de klasse "user-panel main" () in het document is, geretourneerd:
Var el = document.querySelector("div.user-panel.main input");
Specificaties| DOM De definitie van "document.querySelector()" in die specificatie. |
Levensstandaard |
De compatibiliteitstabel op deze pagina is gegenereerd op basis van gestructureerde gegevens. Als je wilt bijdragen aan de gegevens, ga dan naar https://github.com/mdn/browser-compat-data en stuur ons een pull-verzoek.
Update compatibiliteitsgegevens op GitHub
| Desktop mobiel | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome voor Android Firefox voor Android Opera voor Android Safari op iOS Samsung Internet | |||||||||||
| Chrome Volledige ondersteuning 1 | Rand Volledige ondersteuning 12 | Firefox Volledige ondersteuning 3.5 | IE Volledige ondersteuning 8 | Opera Volledige ondersteuning 10 | Safari Volledige ondersteuning 3.2 | WebView Android Volledige ondersteuning Ja | Chrome Android Volledige ondersteuning Ja | Firefox Android Volledige ondersteuning Ja | Opera Android Volledige ondersteuning 10.1 | Safari iOS Volledige ondersteuning 3.2 | Samsung InternetAndroid? |
