' voor een alinea, '
' voor de kop op het eerste niveau, enz. Deze aanpak is nodig wanneer de gebruiker toegang moet krijgen tot een HTML-element via de tagnaam rechtstreeks in plaats van meerdere regels code te doorzoeken.
Deze gids legt de volledige procedure uit om de tagnaam van een HTML-element op te halen met behulp van JavaScript.
Hoe de tagnaam van een HTML-element ophalen met JavaScript?
JavaScript biedt de alleen-lezen “ tagNaam ” eigenschap die de tagnaam van het overeenkomstige HTML-element weergeeft. Het retourneert een tekenreekswaarde, d.w.z. de tagnaam van het element in HOOFDLETTERS.
Syntaxis
element. tagNaam
In de bovenstaande syntaxis, ' tagNaam ” komt overeen met de tagnamen van het element die moeten worden opgehaald.
Laten we nu verder gaan met de praktische implementatie om te controleren hoe het kan worden gebruikt om de tagnaam van het overeenkomstige HTML-element op te halen.
Voorbeeld: de eigenschap 'tagName' toepassen om de tagnaam van een HTML-element op te halen
In dit voorbeeld kunnen alle tagnamen van het element die in de HTML-code zijn opgegeven, worden opgehaald via de ' tagNaam ' eigendom.
HTML code
Laten we de volgende HTML-code eens bekijken:
< lichaam bij klikken = 'elemNaam()' >< h2 > TagName van HTML-element ophalen in JavaScript < / h2 >
< P > Klik op een element in dit document om de tagnaam te krijgen. < / P >
< knop > Klik Het < / knop >
< P ID kaart = 'demonstratie' >< / P >
In de bovenstaande regels code:
- De '
” tag is geassocieerd met een “ bij klikken 'gebeurtenis omleiden naar de JavaScript-functie' elemNaam() ' die met een klik wordt geactiveerd. - De ' ” tag definieert de subkop.
- De ' ”-tag maakt een alinea-instructie.
- De '
'-tag voegt een knop toe met de naam 'Click It'. - Als laatste de “ ” tag definieert een lege paragraaf met een id “ demo ' om de tagnaam van het HTML-element weer te geven bij de gebeurtenistrigger 'onclick'.
JavaScript-code
Ga vervolgens verder met de onderstaande code:
< script >functie elemNaam ( ) {
const element = evenement. doel ;
document. getElementById ( 'demonstratie' ) . binnenHTML = 'De tagnaam van het HTML-element waarop is geklikt, is: ' + element. tagNaam ;
}
script >
In dit codeblok:
- Definieer een functie met de naam ' elemNaam() ”.
- Verklaar in zijn definitie de variabele ' element ” van gegevenstype “ const ” dat gebruik maakt van de “ doel ” eigenschap om de elementnaam te retourneren wanneer de bijbehorende gebeurtenis wordt geactiveerd.
- Pas ten slotte de ' getElementById() ” methode om toegang te krijgen tot de toegevoegde paragraaf met behulp van zijn id.
- Het zal resulteren in het weergeven van de tagnaam van het corresponderende HTML-element met behulp van de ' tagNaam ' eigenschap wanneer de gebeurtenis 'onclick' wordt geactiveerd.
- Het is zo dat bij het klikken op een van de elementen in de HTML-code, de bijbehorende tagnaam wordt opgehaald.
Uitgang
De uitvoer toont de corresponderende tagnaam van het element waar de 'onclick'-gebeurtenis dienovereenkomstig wordt geactiveerd.
Conclusie
JavaScript biedt de ingebouwde ' tagNaam ” eigenschap voor het verkrijgen van de tagnaam van het HTML-element. Het wordt over het algemeen gebruikt met JavaScript-gebeurtenishandlers zoals 'onclick', 'onmouseover', 'ondblclick' enz. Wanneer de bijbehorende gebeurtenis van het HTML-element wordt geactiveerd, wordt de tagnaam standaard in HOOFDLETTERS geretourneerd. Deze handleiding bevat een korte beschrijving van het ophalen van de tagnaam van een HTML-element met behulp van JavaScript.