HTML -elementer kan nås ved hjelp av JavaScript -metodene. JavaScript-metodene får tilgang til HTML-elementene fra DOM (logisk trelignende struktur på nettdokumentene). JavaScript gir støtte til fem metoder som bruker navn, ID, klassenavn, tagname eller CSS -velgeren for å få tilgang til objektene. Ved å få tilgang til HTML -elementer ved hjelp av JavaScript, kan du manipulere HTML -elementer. Denne artikkelen gir en demonstrasjon av mulige måter å få tilgang til HTML -elementer ved hjelp av JavaScript -metoder.

Hvordan få tilgang til HTML -elementer ved hjelp av JavaScript -metoder

De fem JavaScript -metodene hjelper til med å få tilgang til HTML -elementene, og disse metodene er beskrevet nedenfor.

Hvordan få tilgang til HTML -elementer etter ID

ID -attributtet identifiserer HTML -elementet unikt, og den følgende JavaScript -metoden vil hjelpe til med å få HTML -elementene etter ID.

IDen refererer til HTML -elementet og brukes av JavaScript for å få tilgang til det HTML -elementet. Objektet (i dom) som samsvarer med ID -en vil bli returnert.

Eksempel:

Koden som er gitt nedenfor utøver getElementById () Metode for JavaScript.

Ovennevnte kode får tilgang til elementet som har ID = UN1, og deretter blir verdien av det elementet manipulert til “Hello World!”.

Produksjon

Fra utgangen observeres det at det opprinnelige innholdet i

har blitt endret til “Hello World!”.

Hvordan få tilgang til HTML -elementer ved navn

Navnetattributtet til elementene kan også brukes av JavaScript for å få tilgang til HTML -elementer. Imidlertid kan et enkelt navn være assosiert med flere HTML -elementer. Koden som følger med bruker getElementsByName () metode.

To avsnitt har de samme navnene; Dermed må vi definere indeksnummeret til hvert avsnitt (på tidspunktet for å bruke metoden). Indeksnummeret til første ledd blir referert til som [0] og andre ledd som [1].

Produksjon

Det observeres fra utgangen at innholdet i avsnittet (ved indeks [1]) er endret.

Hvordan få tilgang til HTML -elementer etter tagname

JavaScript -metoden getElementsByTagName () brukes her for å få tilgang til elementene med tagnavnene deres.

Ovennevnte kode får tilgang til avsnittet (ved indeks [0]) og endrer verdien til "avsnittet er tilgjengelig".

Merk: Et HTML -dokument inneholder forskjellige tagger, og hvis du skal få tilgang til dem ved å bruke JavaScripts getElementsByTagName () Metode, du må nevne indeksnummeret til elementet.

Produksjon

Utgangen viser at innholdet i avsnittet ved indeks 0 er endret.

Hvordan få tilgang til HTML -elementer etter klassenavn

De getElementsByClassName () Metode for JavaScript brukes her for å få tilgang til HTML -elementene.

Ovennevnte kode får tilgang til klassen som heter “to”Og endrer innholdet. Et dokument kan inneholde flere klasser med de samme navnene; Dermed er et indeksnummer også obligatorisk i dette tilfellet.

Produksjon

Utgangen viser at innholdet i klassenavnet (navngitt to) har blitt forandret.

Hvordan få tilgang til HTML -elementer av QuerySelector

Et HTML -element kan ha klasser og ID -er, som kan brukes til å endre stilene til elementene. De QuerySelector () Metode for JavaScript lar deg få elementene som samsvarer med den spesifikke CSS -velgeren. De QuerySelector er videre delt inn i to metoder;

• De QuerySelector () Metoden returnerer det første elementet (som samsvarer med uttrykket)
• De QuerySelectorAll () Metoden returnerer alle de matchende elementene

Merk: For å få tilgang til klasse, må du legge prikken (.) Før klassenavnet og for ID må du bruke (#) -tegnet før ID -navnet.

Eksempel 1: Bruke metoden QuerySelector ()

Koden skrevet nedenfor bruker QuerySelector () metode for å få det første elementet som samsvarer med tilstanden.

I koden ovenfor, QuerySelector () metoden brukes på elementene som har klasse = ”LH”.

Produksjon

Utgangen viser at første ledd (som samsvarer med klassens navn og ID) er tilgjengelig og innholdet er oppdatert.

Eksempel 2: Bruke metoden QuerySectorAll ()

Som diskutert tidligere QuerySelector () Metode får bare tilgang til den første kampen. Du kan bruke QuerySelectorAll () Metode for å få tilgang til elementet du velger som vi har gjort i følgende eksempel.

Ovennevnte kode praktiserer QuerySelectorAll () metode for å få tilgang til elementene som har ID = “un“. Indeksnummeret er obligatorisk å sette, og vi har brukt [1] her.

Produksjon

Det konkluderes fra utdataene at CSS -velgerne som klasse og ID har blitt brukt av QuerySelectorAll () Metode for å få tilgang til/endre innholdet i avsnittet til indeks 1.

Konklusjon

JavaScript kan få tilgang til HTML -elementer ved å bruke Navn, ID, ClassName, TagName og QuerySelector av HTML -elementene. Disse metodene kan også brukes til å manipulere innholdet i et HTML -element. Denne artikkelen demonstrerer de fem JavaScript -metodene som får tilgang til HTML -elementene på forskjellige måter. De id, klassenavn og tagname Metoder har en tendens til å få tilgang til HTML -elementene direkte. Imidlertid QuerySelector ()/QueryStectorAll () Metode bruker CSS -velgere for å få tilgang til og endre HTML -elementene.