Hvordan finne og få HTML -elementer i JavaScript

Som en JavaScript -programmerer kan det hende du må manipulere de ekstra HTML -elementene uten å endre HTML -koden. I dette tilfellet kan du finne, få og deretter oppdatere HTML -elementene uten å overskrive dem. HTML Document Object Model (DOM) tilbyr forskjellige måter å finne og få HTML -elementer i JavaScript.

Denne oppskrivningen vil diskutere prosedyrene for å finne og få HTML-elementer i JavaScript. Videre vil eksemplene relatert til getElementById (), getElementsByTagName (), GetElementSByClassName () og QuerySectorAll () metoder bli demonstrert i denne artikkelen. Så la oss starte!

Hvordan finne og få HTML -elementer etter ID i JavaScript

De fleste av JavaScript -utviklerne benyttet seg av getElementById () Metode for å finne og få HTML -elementer som har unike ID -er. Hvis du har passert en ID som ikke tilhører noe HTML -element, vil metoden GetElementById () vise nullverdien.

Syntaks av getElementById () -metode

dokument.getElementById (ElementId)

Her, "ElementId”Representerer den unike IDen til HTML -elementet som du vil finne og få i JavaScript -koden din.

Eksempel: Finn og få HTML -elementer etter ID i JavaScript

Vi vil legge til HTML -elementer som en overskrift med

tag og tre avsnittselementer med

Tag i følgende eksempel. Merk at vi også har lagt til “ids”Med avsnittelementene:

Dette er Linuxhint.com

Finn og få HTML -elementer etter ID i JavaScript

Dette er et JavaScript -program som bruker metoden "getElementsById"

I neste trinn vil vi finne og få elementet som har ID “P1”Ved å bruke“dokument.getElementById ()”Metode. Etter ding så vil vi endre innholdet i det hentede HTML -elementet:

Utfør ovennevnte program i din favorittkodeditor eller en hvilken som helst online kodende sandkasse; Imidlertid vil vi bruke JSBIN til dette formålet:

Utførelse av det ovennevnte JavaScript-programmet vil vise følgende utgang:

Hvordan finne og få HTML -elementer av tagname i JavaScript

Du kan bruke "getElementsByTagName ()”JavaScript -metode for å finne og få et spesifikt HTML -element med tagnavnet.

Syntaks av getElementsByTagName () -metode

dokument.getElementsByTagName (tagname)

Her representerer tagnavnet tagnavnet til HTML -elementet du vil hente.

Eksempel: Finn og få HTML -elementer av tagname i JavaScript

Det undergitte eksemplet vil finne og få alle HTML-elementer som har tagnavnet "p”Bruke metoden getElementsbyTagName (). Etter det vil den vise innholdet i HTML som er til stede ved den første indeksen for objektsamlingen:

Dette er Linuxhint.com

Finn og få HTML -elementer med tagnavn i JavaScript

Dette er et JavaScript -program som bruker metoden "getElementsbytagname"

Som du kan se, vises teksten til første ledd i vårt JavaScript -program vellykket:

Hvordan finne og få HTML -elementer etter klassenavn i JavaScript

“getElementsByClassName ()”Metode brukes til å finne og få HTML -elementer som har samme klasse. Ved å bruke klassenavnet, når du prøver å få et HTML -element, vil JavaScript -tolken returnere alle objekter som tilhører samme klasse. Etter det kan du utføre spesifikke operasjoner på disse HTML -elementene.

Syntaks av getElementsByClassName () -metode

dokument.getElementsByClassName (ClassName)

Her, "klassenavn”Representerer klassenavnet på HTML -elementene som du må finne og få i programmet ditt.

Eksempel: Finn og få HTML -elementer av ClassName i JavaScript

I det følgende eksempel har vi lagt til en overskrift og noen avsnittelementer med klassenavnet "C1”:

Dette er Linuxhint.com

Finn og få HTML -elementer etter klassenavn i JavaScript

Tekst i første paragrpah

Tekst i andre ledd

Deretter vil vi søke etter HTML -elementene som har “C1”Som deres klasse ved å bruke metoden GetElementSByClassName () og lagre samlingene til objektene i“en”:

Her er utdataene vi fikk fra å utføre det ovennevnte JavaScript-programmet:

Hvordan finne og få HTML -elementer av CSS -velgeren i JavaScript

I HTML, The QuerySelectorAll () Metode returnerer et statisk nodelistobjekt som omfatter en samling av barneelementene i et element matchet med de spesifiserte CSS -velgerne. Indeksnumre brukes til å finne og få nodene, og starter 0.

Syntaks av QuerySelectorAll () -metoden

element.QuerySelectorAll (Selectors)

QuerySelectorAll () -metoden tar “velgere”Som et argument omfatter en DOM -streng en eller flere gyldige CSS -velgere.

Eksempel: Finn og få HTML -elementer av CSS -velgeren i JavaScript

I det undergitte JavaScript-programmet har vi brukt QuerySelectorAll () -metoden for å finne og få avsnitt HTML-elementene som har “C1”Som deres klassenavn:

Dette er Linuxhint.com

Finn og få HTML -elementer etter klassenavn i JavaScript

Tekst i første paragrpah

Tekst i andre ledd

Sjekk ut utdataene fra JavaScript QuerySectorAll () -metoden:

Konklusjon

getElementById (), getElementsByTagName (), getElementsByClassName () og QuerySelectorAll () er de vanligste JavaScript -metodene som brukes til å finne og få elementer i et JavaScript -program. Du kan bruke hvilken som helst av den nevnte metoden for å søke etter et spesifikt HTML -element i koden. Denne oppskrivningen diskuterte prosedyrene for å finne og få HTML-elementer i JavaScript. Dessuten er eksemplene relatert til getElementById (), getElementsByTagName (), GetElementsByClassName () og QuerySelectorAll () metoder også demonstrert i denne artikkelen.