Metoder for å få tilgang til/få elementer i DOM | forklart med eksempler

JavaScript er det mest brukte skriptspråket for å endre elementene på en webside, Sannhet blir fortalt, ingen skriptspråk kan direkte samhandle med HTML -elementene. Skriptspråket samhandler med Dom (Dokumentobjektsmodell) og DOM samhandler med HTML-elementene fordi DOM er et språknøytralt applikasjonsgrensesnitt (API).

I dette innlegget skal vi lære om forskjellige metoder som vi kan bruke i JavaScript som vil hjelpe oss å endre HTML -elementene ved hjelp av DOM -grensesnittet.

Tilgang \ få metoder

JavaScript gir oss 5 forskjellige metoder som vi kan samhandle med DOM for å få tilgang til et element på websiden. Disse metodene er nemlig:

• getElementById (ID)
• getElementsByClassName (ClassName)
• getElementsByTagName (tagname)
• QuerySelector (CSS_Selector)
• QuerySelectorAll (CSS_Selector)

Bruk av tilgang \ få metoder

For å demonstrere bruken av disse Get \ Access-metodene må vi først sette opp en HTML-fil og koble en JavaScript-fil ved å bruke følgende linje:

Nå må vi sette opp elementer i HTML-filen vår, vi kan gjøre det ved å bruke følgende linjer:

Jeg har ID "demoid"


Jeg har klassen "test"
Jeg har også klassen "test"


Jeg har taggen "Artikkel"
Jeg har også taggen "Artikkel"


Jeg har spørringen som "QuerySelect"


Jeg har spørringen som "querySelectall"

Jeg har også spørringen som "querySelectall"

Som du ser har vi noen med id, noen med klasser Og vi har brukt en Tag også. Å utføre denne HTML -filen vil gi oss følgende utdata:

Få tilgang til et element ved å bruke ID -en

Den første metoden som vi skal teste er getElementById (), Vi kommer til å få tilgang til elementet med IDen “Demoid” Og vi kommer til å endre stilen sin ved å bruke følgende kodelinjer i vår JavaScript -fil:

var demoid = dokument.getElementById ("demoid");
demoid.stil.BakgrunnColor = "Gul";

Etter å ha kjørt filen får vi følgende utdata på nettleseren vår:

Som du ser kunne vi få tilgang til elementet ved å bruke det Id og endre stilen til elementet ved å bruke JavaScript.

Få tilgang til elementer ved hjelp av klassenavnet

Metoden GetElementByClassName () Returnerer flere elementer med samme klassenavn. Vi kan få tilgang til elementer ved å bruke klassenavnet deres med følgende kodelinje:

var testclass = dokument.getElementsByClassName ("Test");

Siden vi har to elementer med klassenavnet "Test", er det derfor vår variabel “Testklasse” er av typen matrise, og hvis vi ønsker å endre attributter for elementene i matrisen, må vi henvise til dem ved å bruke deres matriseindekser som

Testklasse [0].stil.Border = "2px solid grønn";
Testklasse [1].stil.Border = "2px solid brun";

Når vi utfører får vi følgende utdata:

Få tilgang til elementer ved hjelp av tagnavnet

For å velge elementer ved hjelp av tagnavnet bruker vi metoden getElementBytagName (), I vårt eksempel, for å velge elementene med tagnavnet "artikkel" Vi bruker følgende linje:

var tagSelekt = dokument.getElementsByTagName ("Artikkel");

Igjen, vi har to elementer med samme tagnavn "artikkel" Derfor kommer vi til å endre attributtene deres manuelt ved å bruke sine matriseindekser:

TagSelect [0].indrehtml = 'Jeg har endret teksten min';
TagSelect [1].indrehtml = 'Jeg har også endret teksten min';

Hvis vi kjører filen nå, får vi følgende utdata på nettleseren vår:

Som du ser har vi endret teksten til elementene med Tagnavn “Artikkel”.

Få tilgang til et element ved hjelp av spørringsvelgeren

Vi kan velge elementer ved å bruke en spørringsvelger, for å gjøre at vi bruker metoden dokument.QuerySelector (), og hvis vi vil velge et element med et spesifikt id, Vi bruker “#” -Symbol i spørringsvelgeren som

var querySelect = dokument.QuerySelector ("#querySelect");

Etter at vi har fått tilgang til elementet, kan vi endre grensen til følgende linje:

QuerySelect.stil.Border = "1px fast rød";

Du får følgende resultat i nettleseren din:

Få tilgang til et element ved hjelp av alle spørringsutvalgere

Vi kan velge alle elementene med samme spørring ved hjelp av QuerySelectorAll () -metoden. Legg til følgende linje i JavaScript -filen:

const demoqueryall = dokument.QuerySelectorAll (".querySelectAll ");

For å endre attributtene til begge elementene som er tilgang til av denne spørringen (), bruk følgende kodelinjer:

Demoqueryall.foreach ((spørring) =>
spørsmål.stil.Border = "1px Solid Green";
);

Du får følgende resultater i nettleseren din:

Det er det for tilgang til elementer ved å bruke alle metodene som tilbys av JavaScript.

Konklusjon

Det er 5 hovedmetoder levert av JavaScript som hjelper oss å få tilgang til \ Get Elements of a HTML Webside ved hjelp av DOM -grensesnittet. I dette innlegget lærte vi om alle de 5 metodene, implementerte alle disse metodene ved å endre attributtene til elementene som vi fikk tilgang til. Vi trenger DOM -grensesnittet for å gjøre alle disse endringene fordi ingen skriptspråk direkte kan få tilgang til HTML -elementene, snarere DOM fungerer som et API for skriptspråket.