Deze zelfstudie demonstreert de verschillende methoden voor het selecteren van DOM-elementen in JavaScript.
Wat zijn de verschillende manieren om DOM-elementen in JavaScript te selecteren?
Gebruik de volgende methoden om DOM-elementen in JavaScript te selecteren:
- getElementById() methode
- getElementsByClassName() methode
- getElementsByTagName() methode
- querySelector() methode
- querySelectorAll() methode
Methode 1: Selecteer DOM-elementen met de methode 'getElementById()'.
Gebruik voor het selecteren van DOM-elementen de ' getElementById() ” methode op basis van de toegewezen id van het element. Deze methode selecteert een enkel element op basis van zijn unieke ' ID kaart ” attribuut. Het geeft een verwijzing naar het element met de opgegeven id en retourneert ' nul ” als er geen overeenkomend element wordt gevonden.
Syntaxis
Gebruik de onderstaande syntaxis voor de getElementById() methode:
document. getElementById ( 'idNaam' )
Hier de ' idNaam ” is de naam van een id-attribuut dat aan een element is toegewezen.
Voorbeeld
Maak in een HTML-bestand twee koppen in een div-element met behulp van de h4 ' label. Wijs id's toe aan het div-element en kopjes 'h4'-elementen met de naam ' div ' En ' rubriek ”, respectievelijk. Voeg het style-attribuut toe aan het div-element om het in het midden uit te lijnen. Wijs ook een klasse toe ' sectie ” naar de tweede kop die van kleur verandert:
< div ID kaart = 'div' stijl = 'tekst uitlijnen: centreren;' >< h4 ID kaart = 'kop' > Toegang tot DOM-elementen met behulp van verschillende methoden < / h4 >
< h4 klas = 'sectie' ID kaart = 'kop' > Selecteer DOM-elementen in JavaScript met de methode 'getElementById()'
< / h4 >
< / div >
Nu krijgen we de ' div ” element met behulp van de toegewezen id met behulp van de “ getElementById() ” methode:
was getById = document. getElementById ( 'div' ) ;Print het element tegen de id ' div ” op de console:
troosten. loggen ( getById ) ;U kunt zien dat het vereiste HTML-element succesvol is opgehaald:
Methode 2: Selecteer DOM-elementen met de methode 'getElementsByClassName()'.
U kunt het DOM-element ook selecteren met behulp van de toegewezen klasse met behulp van ' getElementsByClassName() ” methode. Het selecteert een lijst met elementen op basis van hun klassenaam. Het voert een live HTMLCollection-object uit, een array-achtig object dat alle elementen met de opgegeven klassenaam bevat.
Syntaxis
De volgende syntaxis wordt gebruikt voor de methode 'getElementsByClassName()':
document. getElementsByClassName ( 'naam van de klasse' )Voorbeeld
Hier krijgen we het element dat de klasse ' sectie ” en print op de console:
was getByClass = document. getElementsByClassName ( 'sectie' ) ;troosten. loggen ( getByClass ) ;
Zoals u in de uitvoer kunt zien, is een array met lengte 1 geretourneerd die een element ' h4 ” wie behoort tot de klas “ sectie ”:
Methode 3: Selecteer DOM-elementen met de methode 'getElementsByTagName()'.
Als er geen id of klasse aan een element is toegewezen, gebruik dan de ' getElementsByTagName() '-methode om het element op hun tagnaam te krijgen. Het retourneert ook een live HTMLCollection-object, een array-achtig object dat alle elementen bevat die de opgegeven tagnaam hebben.
Syntaxis
Volg de gegeven syntaxis voor het selecteren van elementen op basis van tagnaam:
getElementsByTagName ( tagNaam )Voorbeeld
Roep de methode 'getElementsByTagName()' aan door de tagnaam ' h4 ”. Druk vervolgens de lijst met elementen af die overeenkomen met de opgegeven tagnaam op de console:
was getByTag = document. getElementsByTagName ( 'h4' ) ;troosten. loggen ( getByTag ) ;
Uitgang
Methode 4: DOM-elementen selecteren met de methode 'querySelector()'.
Gebruik de ' vraagSelector() ” methode om het DOM-element te krijgen. Het selecteert een enkel element dat overeenkomt met een opgegeven CSS-kiezer. Het retourneert het eerste overeenkomende element dat in het document is gevonden. Als er geen element overeenkomt, geeft het ' nul ”.
Syntaxis
De onderstaande syntaxis wordt gebruikt voor de methode 'querySelector()':
document. querySelector ( attribuut )Hier is het attribuut een CSS-kiezer, zoals een id of klasse als ' #Mijn ID ” “ .mijn klas “.
Voorbeeld
Roep de methode 'querySelector()' aan en geef de id ' #rubriek ” om de elementen te krijgen die dezelfde id bevatten:
was getByquery = document. querySelector ( '#kop' ) ;troosten. loggen ( getByquery ) ;
Het geeft het eerste overeenkomende element als uitvoer:
Methode 5: DOM-elementen selecteren met de methode 'querySelectorAll()'.
Als u alle elementen wilt selecteren die het opgegeven attribuut (id of klasse) bevatten, gebruikt u de ' querySelectorAll() ” methode. Het selecteert een lijst met elementen die overeenkomen met een bepaalde gedefinieerde CSS-kiezer. Het geeft een NodeList-object dat alle elementen in het document bevat die overeenkomen met de specifieke CSS-selector.
Syntaxis
Gebruik de volgende syntaxis om de lijst met elementen op te halen:
document. querySelectorAll ( attribuut )Voorbeeld
Om de lijst te krijgen van het overeenkomende element dat de id ' rubriek ' met de ' querySelectorAll() ” methode en print op elementen op de console:
was getByqueryAll = document. querySelectorAll ( '#kop' ) ;troosten. loggen ( getByqueryAll ) ;
Uitgang
Dat is alles over het selecteren van DOM-elementen in JavaScript.
Conclusie
Gebruik voor het selecteren van de DOM-elementen in JavaScript de ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ vraagSelector() ', of de ' querySelectorAll() ” methode. Deze methoden bieden verschillende manieren om elementen uit de DOM te selecteren op basis van hun unieke identifiers, klassenamen, tagnamen of CSS-selectors. Deze tutorial demonstreerde de verschillende methoden voor het selecteren van DOM-elementen in JavaScript.