Få elementer etter ID, tagnavn eller klasse til kode med JavaScript

I getElementBy-metodene gir getElementBy-metoder enkel tilgang til ethvert element eller grupper av elementer i et dokument uten å stole på foreldre / barns forhold til noder. De tre mest brukte måtene for å få tilgang til elementer er

• getElementById

• getElementsByTagName

• getElementsByClassName

getElementById

Langt den mest brukte metoden for å velge elementer, er getElementById viktig for moderne webutvikling. Med dette praktiske lille verktøyet kan du finne og arbeide med ethvert element ved å referere til et unikt id-attributt. Uansett hva som skjer i HTML-dokumentet, vil getElementById alltid være der for deg og vil pålidelig velge det eksakte elementet du vil ha.

Dette eksemplet demonstrerer den fantastiske kraften til getElementById, slik at du kan holde alle JavaScript sammen i dokumentet eller modulere koden din. Ved å bruke getElementById, kan du jobbe med et hvilket som helst element, hvor som helst i dokumentet ditt så lenge du kjenner sitt ID.

Bruke getElementById-funksjonen calculateMPG (miles, gallons) {dokument. getElementById (“displayMiles”). innerHTML = parseInt (miles); dokument. getElementById (“displayGallons”). innerHTML = parseInt (gallons); dokument. getElementById (“displayMPG”). innerHTML = miles / gallons;}
Du kjørte ___ 
miles.







Du brukte ___ 
gallon gass.
Din MPG er ___. var milesDriven = prompt ("Enter miles driven"); var gallonsGas = prompt ("Skriv inn gassene som brukes"); calculateMPG (milesDriven, gallonsGas);

getElementsByTagName

Metoden getElementsByTagName returnerer en nodeliste over alle elementene med det angitte tagnavnet. For eksempel blir getElementsByTagName brukt til å velge alle h1-elementene og endre sine innerHTML-egenskaper til sekvensielle tall.

Bruke getElementsByTagName funksjon nummerElements (tagName) {var getTags = 

dokument. getElementsByTagName (TagNavn); for (i = 0; i 
denne teksten vil gå bort

dette vil bli overskrevet

JavaScript vil slette dette
numberElements ("h1");

getElementsByClassName

Metoden getElementsByClassName fungerer på omtrent samme måte som getElementsByTagName, men den bruker verdiene til klassetributtet til å velge elementer. Denne funksjonen velger elementer med en klasse av "feil" og vil endre verdien av deres indreHTML-egenskap.

Bruk getElementsByClassName-funksjonen checkMath (result) {var userMath = 

dokument. getElementById (“Svar: 1”). verdi; var feil = 
dokument. getElementsByClassName (“feil”); hvis (parseInt (userMath)! = parseInt (resultat)) {feil [0]. innerHTML = "Det er galt. Du skrev inn "+ userMath +". Svaret er "+ resultat;} annet {feil [0]. innerHTML = "Riktig! ";}} 4 + 1 = Sjekk din matte!(fortsettelse)

Resultatet av å kjøre denne koden i en nettleser og angi feil svar er vist her.

getElementsByClassNa

Bruk getElementsByClassName til å velge et element for å vise en feilmelding.

Legg merke til at koden ovenfor bruker en onclick-attributt inne i knappelementet. Dette er et eksempel på en DOM-hendelsesbehandlerattributt.