Hvordan 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.