Javascript Element ophalen op id
exp |
find |
JavaScript |
open |
sin
Michael Zippo
Dus u wilt een element op een webpagina in JavaScript selecteren? Dit is de specialiteit van de getElementById-methode, de zogenaamde koning van getters-elementen in JavaScript.
getElementById stelt u in staat om een element te selecteren op basis van zijn ID. Het is een vrij zelfverklarende methodenaam als je erover nadenkt.
In deze gids zullen we het hebben over wat getElementById is, hoe het werkt en wanneer je zou het in je code moeten gebruiken. We zullen een voorbeeld bekijken van een "Toon / Verberg"-knoptekst in onze document.getElementById-demo.
Laten we een duik nemen in Let!
Wat is getElementById?
getElementById () is een documentmethode die een HTML DOM-element op een pagina selecteert op basis van het opgegeven Element ID-kenmerk.
Beschouw de volgende code:
In onze HTML-code hebben we een Vind uw Bootcamp-match
Je kunt ervoor kiezen om deze methode te gebruiken als je een ID aan een artikel hebt toegewezen. In plaats van een grotere getter zoals querySelector of getElementByClass te gebruiken, die het eerste elementobject retourneert dat aan een bepaald criterium voldoet, kunt u een element verkrijgen met getElementById ().
getElementById () is een veelgebruikte methode om een element op een webpagina op te halen.
Wat u moet weten over getElementById
Voordat we ingaan op een voorbeeld, laten we het hebben over de fouten die beginners vaak maken bij het gebruik van deze methode.
het is altijd frustrerend als u leer iets nieuws en het werkt niet, dus laten we het hebben over de veelvoorkomende fouten die je zou kunnen maken tijdens het leren getElementById ( ) .
Eerst , getElementById () is hoofdlettergevoelig. Hoewel de term ID meestal in hoofdletters wordt gebruikt bij het programmeren, moet je bij deze methode de kameel Id gebruiken. Anders werkt deze methode niet
Ten tweede , de ID u specificeert, mag geen hashtag bevatten. Overweeg deze code:
Dit voorbeeld kan de indruk wekken dat het het element met de id mainButton krijgt, maar dat is niet zo. Specificeer gewoon de ID van de item dat u wilt ophalen:
Nu het uit de weg is, kunnen we een voorbeeld bekijken.
Hoe getElementById te gebruiken
Als u op internet surft, kunt u tags tegenkomen met de tekst "Lees meer". Een webpagina kan een paar zinnen van een stuk tekst weergeven, dus u bent wordt gevraagd om op deze knop te drukken zodat u de rest van de tekst kunt zien.
We zullen deze functie bouwen met behulp van getElementB yId () getter. Je kunt de definitieve code voor deze tutorial bekijken op GitHub .
creatie van de front-end
Laten we beginnen met het maken van een eenvoudige front-end met HTML en CSS. Maak een nieuw bestand met de naam index. html en plak de volgende code:
JavaScript getElementById ()
Wilt u meer weten over getElementById ()? U bent hier aan het juiste adres.
Meer informatie getElementById () is een JavaScript-methode waarmee u een element kunt selecteren op een paginaband. Deze methode wordt gewoonlijk een "getter" genoemd omdat het een element van een pagina "haalt".
