Søker: getElement *, querySelector *

DOM-navigasjonsegenskaper er gode når elementene er nær hverandre. Hva om de ikke er det? Hvordan får du et vilkårlig element på siden?

Det er flere søkemetoder for det.

document.getElementById eller bare id

Hvis et element har id attributt, vi kan få elementet ved hjelp av metoden document.getElementById(id), uansett hvor det er.

For eksempel :

Det er også en global variabel kalt id som refererer til elementet:

… Det er med mindre vi erklærer en JavaScript-variabel med samme navn, så har det forrang:

querySelectorAll

Langt, mest allsidig metode, elem.querySelectorAll(css) returnerer alle elementene i elem som samsvarer med den gitte CSS-velgeren.

Her ser vi etter alle <li> elementer som er siste barn:

Denne metoden er virkelig kraftig, fordi en hvilken som helst CSS-velger kan brukes.

querySelector

Anropet til elem.querySelector(css) returnerer det første elementet for den gitte CSS selector.

Med andre ord, resultatet er det samme som elem.querySelectorAll(css), men sistnevnte leter etter alle elementene og velger en, mens elem.querySelector bare ser etter en. Så det er raskere og også kortere å skrive.

samsvarer

Tidligere metoder søkte i DOM.

Elem.matches (css) ser ikke etter noe , det sjekker bare om elem samsvarer med den gitte CSS-velgeren. Den returnerer true eller false.

Metoden er nyttig når vi itererer over elementer (som i en array eller noe) og prøver å filtrere ut de som interesserer oss.

For eksempel:

nærmest

Forfedre til et element er: foreldre, foreldre til foreldre, foreldre og så videre. Forfedrene sammen danner foreldrekjeden fra elementet til toppen.

Metoden elem.closest(css) ser etter nærmeste forfader som samsvarer med CSS-velgeren. elem i seg selv er også inkludert i søket.

Med andre ord, metoden closest går opp fra element og sjekker hver av foreldrene. Hvis den samsvarer med velgeren, stopper søket og forfedren returneres.

For eksempel:

getElementsBy *

Det er også andre metoder å se på for noder etter en tagg, klasse osv.

I dag er de for det meste historie, da querySelector er kraftigere og kortere å skrive.

Så her dekker vi dem hovedsakelig for fullstendighet, mens du fortsatt kan finne dem i de gamle skriptene.

• elem.getElementsByTagName(tag) ser etter elementer med det gitte tag og returnerer samlingen av dem. tag -parameteren kan også være en stjerne "*" for «eventuelle koder».
• elem.getElementsByClassName(className) returnerer elementer som har den gitte CSS-klassen.
• document.getElementsByName(name) returnerer elementer med det gitte name -attributtet, hele dokumentet. Svært sjelden brukt.

For eksempel:

La oss finne alle input tagger inne i tabellen:

Ser etter .article -elementer:

Live samlinger

Alle metoder "getElementsBy*" returnerer en live samling. Slike samlinger gjenspeiler alltid dokumentets nåværende tilstand og «automatisk oppdatering» når det endres.

I eksemplet nedenfor er det to skript.

1. Den første oppretter en referanse til samlingen av <div>. Per nå er lengden 1.
2. De andre skriptene kjører etter at nettleseren møter en til <div>, så lengden er 2.

I kontrast , querySelectorAll returnerer en statisk samling. Det er som et fast utvalg av elementer.

Hvis vi bruker den i stedet, så skriver begge skriptene ut 1:

Nå kan vi lett se forskjellen. Den statiske samlingen økte ikke etter at en ny div dukket opp i dokumentet.

Sammendrag

Det er 6 hovedmetoder for å søke etter noder i DOM:

Langt mest brukt er querySelector og querySelectorAll, men getElement(s)By* kan være sporadisk nyttig eller finnes i de gamle skriptene.

I tillegg til det:

• Det er elem.matches(css) for å sjekke om elem samsvarer med den gitte CSS-velgeren.
• Det er elem.closest(css) for å se etter nærmeste forfader som samsvarer den gitte CSS-velgeren. Selve elem er også sjekket.

Og la oss nevne en metode til for å se etter forholdet mellom barn og foreldre, da det noen ganger er nyttig:

• elemA.contains(elemB) returnerer sant hvis elemB er inne i elemA (en etterkommer av elemA) eller når elemA==elemB.