by 0 comments on "Søgning: getElement *, querySelector *"

Søgning: getElement *, querySelector *

DOM-navigationsegenskaber er gode, når elementer er tæt på hinanden. Hvad hvis de ikke er det? Hvordan får man et vilkårligt element på siden?

Der er yderligere søgemetoder til det.

document.getElementById eller bare id

Hvis et element har id -attribut, vi kan hente elementet ved hjælp af metoden document.getElementById(id), uanset hvor det er.

For eksempel :

Der er også en global variabel navngivet af id, der refererer til elementet:

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

Brug ikke id-navngivne globale variabler til at få adgang til elementer

Denne adfærd er beskrevet i specifikationen, så det er en slags standard. Men det understøttes hovedsageligt for kompatibilitet.

Browseren prøver at hjælpe os ved at blande navneområder for JS og DOM. Det er fint for enkle scripts, indføjet i HTML, men generelt er det ikke en god ting. Der kan være navngivningskonflikter. Når man læser JS-kode og ikke har HTML i visningen, er det ikke tydeligt, hvor variablen kommer fra.

Her i tutorial bruger vi id at henvise direkte til et element for kortfattethed, når det er tydeligt, hvor elementet kommer fra.

I det virkelige liv er document.getElementById den foretrukne metode.

id skal være entydigt

id skal være unik. Der kan kun være et element i dokumentet med det givne id.

Hvis der er flere elementer med den samme id, så er opførslen af metoder, der bruger den, uforudsigelig, f.eks document.getElementById kan returnere ethvert af sådanne elementer tilfældigt. Så hold dig til reglen, og hold id unik.

Kun document.getElementById, ikke anyElem.getElementById

Metoden getElementById kan kun kaldes til document objekt. Det ser efter den givne id i hele dokumentet.

querySelectorAll

Langt den mest alsidig metode, elem.querySelectorAll(css) returnerer alle elementer inden for elem der matcher den givne CSS-vælger.

Her ser vi efter alle <li> elementer, der er sidste børn:

Denne metode er virkelig effektiv, fordi enhver CSS-vælger kan bruges.

Kan bruge også pseudoklasser

Pseudoklasser i CSS-vælgeren som :hover og :active er også understøttet. For eksempel returnerer document.querySelectorAll(":hover") samlingen med elementer, som markøren er over nu (i nestende rækkefølge: fra den yderste <html> til den mest indlejret).

querySelector

Opkaldet til elem.querySelector(css) returnerer det første element for den givne CSS vælger.

Med andre ord, resultatet er det samme som elem.querySelectorAll(css), men sidstnævnte leder efter alle elementer og vælger en, mens elem.querySelector ser bare efter en. Så det er hurtigere og også kortere at skrive.

matcher

Tidligere metoder søgte i DOM.

Elem.matches (css) ser ikke efter noget , det kontrollerer kun, om elem matcher den givne CSS-vælger. Den returnerer true eller false.

Metoden er praktisk, når vi gentager elementerne (som i en array eller noget) og forsøger at filtrere dem, der interesserer os.

For eksempel:

tættest

Forfædre til et element er: forælder, forælder til forælder, dets forælder og så videre. Forfædrene danner sammen kæden af forældre fra elementet til toppen.

Metoden elem.closest(css) søger den nærmeste forfader, der matcher CSS-vælgeren. Selve elem er også inkluderet i søgningen.

Med andre ord går metoden closest op fra element og kontrollerer hver af forældrene. Hvis det matcher vælgeren, stopper søgningen, og forfædren returneres.

For eksempel:

getElementsBy *

Der er også andre metoder at se på for noder efter et tag, klasse osv.

I dag er de for det meste historie, da querySelector er mere kraftfuld og kortere at skrive.

Så her dækker vi dem hovedsageligt for fuldstændighed, mens du stadig kan finde dem i de gamle scripts.

  • elem.getElementsByTagName(tag) søger efter elementer med det givne tag og returnerer samlingen af dem. Parameteren tag kan også være en stjerne "*" for “alle tags”.
  • elem.getElementsByClassName(className) returnerer elementer, der har den givne CSS-klasse.
  • document.getElementsByName(name) returnerer elementer med den givne name -attribut, hele dokumentet. Meget sjældent brugt.

For eksempel:

Lad os finde alle input tags inde i tabellen:

Glem ikke "s" bogstav!

Nybegynderudviklere glemmer undertiden brevet "s". Det vil sige, de prøver at kalde getElementByTagName i stedet for getElementsByTagName.

"s" bogstavet er fraværende i getElementById, fordi det returnerer et enkelt element. Men getElementsByTagName returnerer en samling af elementer, så der er "s" indeni.

Det returnerer en samling, ikke et element!

En anden udbredt uerfaret fejl er at skrive:

Det fungerer ikke, fordi det tager en samling af input og tildeler værdien til det snarere end til elementer inde i det.

Vi skal enten gentage over samlingen eller få et element ved dets indeks og derefter tildele sådan:

Leder du efter .article -elementer:

Live samlinger

Alle metoder "getElementsBy*" returnerer en live samling. Sådanne samlinger afspejler altid dokumentets aktuelle tilstand og “automatisk opdatering”, når det ændres.

I eksemplet nedenfor er der to scripts.

  1. Den første opretter en henvisning til samlingen af <div>. Fra nu af er længden 1.
  2. De andet scripts kører efter browseren møder endnu en <div>, så dens længde er 2.

I modsætning hertil , querySelectorAll returnerer en statisk samling. Det er som et fast element af elementer.

Hvis vi bruger det i stedet, så udskriver begge scripts 1:

Nu kan vi let se forskellen. Den statiske samling steg ikke efter udseendet af en ny div i dokumentet.

Oversigt

Der er 6 hovedmetoder til at søge efter noder i DOM:

Metode Søgninger efter … Kan kal Jeg på et element? Live?
querySelector CSS-vælger ✔ –
querySelectorAll CSS-vælger ✔ –
getElementById id – –
getElementsByName name – ✔
getElementsByTagName tag eller "*" ✔ ✔
getElementsByClassName klasse ✔ ✔

Langt den mest anvendte er querySelector og querySelectorAll, men getElement(s)By* kan være sporadisk nyttigt eller findes i de gamle scripts.

Derudover:

  • Der er elem.matches(css) for at kontrollere, om elem matcher den givne CSS-vælger.
  • Der er elem.closest(css) for at lede efter den nærmeste forfader, der matcher den givne CSS-vælger. Selve elem kontrolleres også.

Og lad os nævne endnu en metode her for at kontrollere forholdet mellem barn og forældre, da det nogle gange er nyttigt:

  • elemA.contains(elemB) returnerer sandt, hvis elemB er inde i elemA (en efterkommer af elemA) eller når elemA==elemB.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *