Hva er de forskjellige måtene å velge DOM -elementer i JavaScript

Mens de jobber med JavaScript, kan det hende at utviklere må velge DOM -elementer for forskjellige formål. For eksempel å endre nettsidenes innhold eller styling, svare på brukerhendelser, få tilgang til data på websider og så videre. Kort sagt, å velge og manipulere DOM -elementer med JavaScript er avgjørende for å lage dynamiske og interaktive websider.

Denne opplæringen vil demonstrere de forskjellige metodene for å velge DOM -elementer i JavaScript.

Hva er de forskjellige måtene å velge DOM -elementer i JavaScript?

Bruk følgende metoder for å velge DOM -elementer i JavaScript:

• getElementById () -metode
• getElementsByClassName () Metode
• getElementsByTagName () -metode
• QuerySelector () -metode
• querySelectorAll () -metode

Metode 1: Velg DOM -elementer ved å bruke "getElementById ()" -metode

For å velge DOM -elementer, bruk "getElementById ()”Metode basert på elementets tildelte ID. Denne metoden velger et enkelt element av dets unike “id" Egenskap. Det gir en referanse til elementet med den spesifiserte ID og returnerer “null”Hvis ikke noe matchende element blir funnet.

Syntaks

Bruk syntaksen under gitt for getElementById () -metoden:

dokument.getElementById (“Idname”)

Her, "Idname”Er navnet på en ID -attributt tilordnet et element.

Eksempel

I en HTML -fil, lag to overskrifter i et DIV -element ved hjelp av “H4" stikkord. Tilordne ID -er til DIV -elementet og overskrifter “H4” -elementer som heter “div”Og“overskrift”, Henholdsvis. Legg til stilattributtet til Div -elementet for å justere den i sentrum. Tildel også en klasse "seksjon”Til den andre overskriften som endrer fargen:

Få tilgang til DOM -elementer ved hjelp av forskjellige metoder

Velg DOM -elementer i JavaScript ved å bruke 'getElementById ()' -metode

Nå får vi "div”Element som bruker den tildelte ID -en ved hjelp av“getElementById ()”Metode:

var getById = dokument.getElementById ("Div");

Skriv ut elementet mot ID “div”På konsollen:

konsoll.logg (getById);

Det kan sees at det nødvendige HTML -elementet er hentet med hell:

Metode 2: Velg DOM -elementer ved å bruke “GetElementSByClassName ()” -metoden

Du kan også velge DOM -elementet ved å bruke den tildelte klassen ved hjelp av "getElementsByClassName ()”Metode. Den velger en liste over elementer etter klassenavnet deres. Den sender ut et live htmlcollection-objekt, et matrise-lignende objekt som inneholder alle elementene med det spesifiserte klassenavnet.

Syntaks

Følgende syntaks brukes til metoden “getElementSyClassName ()”:

dokument.getElementsByClassName (“ClassName”)

Eksempel

Her vil vi få elementet som inneholder klassen “seksjon”Og skriv ut på konsollen:

var getByClass = dokument.getElementsByClassName ("Seksjon");
konsoll.logg (getbyclass);

Som du kan se i utgangen, returneres en rekke lengde 1 som inneholder et element "H4”Som tilhører klassen”seksjon”:

Metode 3: Velg DOM -elementer ved å bruke "getElementSyTagName ()" -metode

I tilfelle det ikke er noen ID eller klasse tildelt et element, bruk "getElementsByTagName ()”Metode for å få elementet med tagnavnet sitt. Den returnerer også et live htmlCollection-objekt, som er et matrise-lignende objekt som inneholder alle elementene som har det spesifiserte tagnavnet.

Syntaks

Følg den gitte syntaks for valg av elementer basert på tagnavn:

getElementsByTagName (tagname)

Eksempel

Påkalle metoden “getElementsbyTagName ()” ved å passere tagnavnet "H4”. Skriv deretter ut listen over elementer som samsvarer med det spesifiserte tagnavnet på konsollen:

var getBytag = dokument.getElementsByTagName ("H4");
konsoll.logg (getBytag);

Produksjon

Metode 4: Velg DOM -elementer ved å bruke “QuerySelector ()” -metoden

Bruke "QuerySelector ()”Metode for å få DOM -elementet. Den velger et enkelt element som samsvarer med en spesifisert CSS -velger. Det returnerer det første matchende elementet som finnes i dokumentet. Hvis ikke noe element blir matchet, gir det “null”.

Syntaks

Den nedenfor-nevnte syntaks brukes for "QuerySelector ()" -metoden:

dokument.QuerySelector (attributt)

Her er attributtet en CSS -velger, for eksempel en ID eller klasse som "#myid"".klassen min“.

Eksempel

Ring "QuerySelector ()" -metoden og pass ID "#overskrift”For å få elementene som inneholder samme ID:

var getByquery = dokument.QuerySelector ("#Heading");
konsoll.logg (getByquery);

Det gir det første matchede elementet som en utgang:

Metode 5: Velg DOM -elementer ved å bruke "QuerySectorAll ()" -metoden

Hvis du vil velge alle elementene som inneholder den spesifiserte attributtet (ID eller klasse), bruk "QuerySelectorAll ()”Metode. Den velger en liste over elementer som samsvarer med en bestemt definert CSS -velger. Det gir et nodelistobjekt som inneholder alle elementene i dokumentet som matchet den bestemte CSS -velgeren.

Syntaks

Bruk følgende syntaks for å få listen over elementer:

dokument.QuerySelectorAll (attributt)

Eksempel

For å få listen over det matchede elementet som inneholder ID “overskrift" med "QuerySelectorAll ()”Metode og skriv ut på elementer på konsollen:

var getByQueryall = dokument.QuerySelectorAll ("#Heading");
konsoll.logg (getByQueryall);

Produksjon

Det handler om å velge DOM -elementer i JavaScript.

Konklusjon

For å velge DOM -elementene i JavaScript, bruk "getElementById ()”,“getElementsByClassName ()”,“getElementsByTagName ()”,“QuerySelector ()", eller "QuerySelectorAll ()”Metode. Disse metodene gir forskjellige måter å velge elementer fra DOM basert på deres unike identifikatorer, klassenavn, tagnavn eller CSS -velgere. Denne opplæringen demonstrerte de forskjellige metodene for å velge DOM -elementer i JavaScript.