Sökning: getElement *, querySelector *

DOM-navigeringsegenskaper är bra när element ligger nära varandra. Vad händer om de inte är det? Hur får man ett godtyckligt element på sidan?

Det finns ytterligare sökmetoder för det.

document.getElementById eller bara id

Om ett element har id attribut, vi kan få elementet med metoden document.getElementById(id), oavsett var det är.

Till exempel :

Det finns också en global variabel med namnet id som refererar till elementet:

… Det är såvida vi inte förklarar en JavaScript-variabel med samma namn, då har det företräde:

querySelectorAll

Överlägset mest mångsidig metod, elem.querySelectorAll(css) returnerar alla element i elem som matchar den givna CSS-väljaren.

Här letar vi efter alla <li> element som är sista barn:

Denna metod är verkligen kraftfull, eftersom valfri CSS-väljare kan användas.

querySelector

Samtalet till elem.querySelector(css) returnerar det första elementet för den givna CSS väljare.

Med andra ord är resultatet detsamma som elem.querySelectorAll(css), men det senare letar efter alla element och väljer en, medan elem.querySelector letar bara efter en. Så det är snabbare och också kortare att skriva.

matchar

Tidigare metoder sökte i DOM.

Elem.matches (css) letar inte efter någonting , det kontrollerar bara om elem matchar den givna CSS-väljaren. Den returnerar true eller false.

Metoden är till nytta när vi itererar över element (som i en array eller något) och försöker filtrera bort de som intresserar oss.

Till exempel:

närmast

Förfäder till ett element är: förälder, förälder till förälder, dess förälder och så vidare. Förfäderna bildar tillsammans kedjan av föräldrar från elementet till toppen.

Metoden elem.closest(css) letar efter närmaste förfader som matchar CSS-väljaren. elem i sig ingår också i sökningen.

Med andra ord går metoden closest upp från element och kontrollerar var och en av föräldrarna. Om den matchar väljaren stoppas sökningen och förfädern returneras.

Till exempel:

getElementsBy *

Det finns också andra metoder att titta på för noder med en tagg, klass etc.

Idag är de mestadels historia, eftersom querySelector är kraftfullare och kortare att skriva.

Så här täcker vi dem främst för fullständighet, medan du fortfarande kan hitta dem i de gamla manusen.

• elem.getElementsByTagName(tag) letar efter element med det givna taggen och returnerar samlingen av dem. Parametern tag kan också vara en stjärna "*" för ”alla taggar”.
• elem.getElementsByClassName(className) returnerar element som har den givna CSS-klassen.
• document.getElementsByName(name) returnerar element med det givna name -attributet, hela dokumentet. Används mycket sällan.

Till exempel:

Låt oss hitta alla input taggar i tabellen:

Letar efter .article -element:

Livesamlingar

Alla metoder "getElementsBy*" returnerar en live-samling. Sådana samlingar återspeglar alltid dokumentets aktuella tillstånd och ”automatisk uppdatering” när det ändras.

I exemplet nedan finns det två skript.

1. Den första skapar en referens till samlingen av <div>. Från och med nu är dess längd 1.
2. De andra skripten körs efter att webbläsaren möter ytterligare en <div>, så dess längd är 2.

Däremot , querySelectorAll returnerar en statisk samling. Det är som en fast grupp av element.

Om vi använder den istället, skickar båda skript ut 1:

Nu kan vi lätt se skillnaden. Den statiska samlingen ökade inte efter att en ny div uppträdde i dokumentet.

Sammanfattning

Det finns 6 huvudmetoder att söka efter noder i DOM:

De överlägset mest använda är querySelector och querySelectorAll, men getElement(s)By* kan vara sporadiskt hjälpsamma eller hittas i gamla skript.

Förutom det:

• Det finns elem.matches(css) för att kontrollera om elem matchar den givna CSS-väljaren.
• Det finns elem.closest(css) att leta efter närmaste förfader som matchar den givna CSS-väljaren. Själva elem kontrolleras också.

Och låt oss nämna ytterligare en metod här för att söka efter förhållandet mellan barn och föräldrar, eftersom det ibland är användbart:

• elemA.contains(elemB) returnerar true om elemB är inuti elemA (en ättling till elemA) eller när elemA==elemB.