So rufen Sie die ID eines Ankers in einem Listenelement in JavaScript ab

So Rufen Sie Die Id Eines Ankers In Einem Listenelement In Javascript Ab



Um interaktive Webseiten zu erstellen, die beispielsweise reagieren, wenn der Benutzer auf eine Schaltfläche klickt, ist JavaScript die beste Wahl. Es ermöglicht Benutzern, kreative und dynamische Designs zu erstellen. Dies geschieht durch die Manipulation der IDs von HTML-Elementen in Funktionen. Die ID eines HTML-Elements kann mithilfe verschiedener integrierter Methoden in JavaScript ermittelt werden.

Dieser Artikel beschreibt das Verfahren zum Abrufen der ID eines Ankerelements in einem Listenelement in JavaScript.

Wie rufe ich die ID eines Ankers in einem Listenelement in JavaScript ab?

Das ID-Attribut eines Elements ist eine eindeutige Kennung, die zur Manipulation und Verwendung dieses Elements in einer JavaScript-Funktion verwendet werden kann. Benutzer können das Element mithilfe seiner ID auf verschiedene Weise abrufen. Allerdings kann es schwierig sein, eine ID eines HTML-Elements abzurufen. Allerdings kann es etwas komplex sein, das ID-Attribut eines HTML-Elements abzurufen.







Ähnlich verhält es sich im Fall von Ankerelementen innerhalb eines „ Listenpunkt “, kann der Benutzer das Ankerelement nicht direkt aufrufen und seine ID abrufen, da es mehrere Ankerelemente gibt, da diese in einer Liste vorhanden sind. Für diese Situation zeigt die unten bereitgestellte Demonstration, wie die ID eines Ankerelements innerhalb eines Listenelements abgerufen wird:





< html >

< Körper >

< div >

< ul Ausweis = 'Liste' >

< Das >

< A Ausweis = „Anker1“ href = „#“ > Ankerelement 1 < / A >

< / Das >

< Das >

< A Ausweis = „Anker2“ href = „#“ > Ankerelement 2 < / A >

< / Das >

< Das >

< A Ausweis = „Anker3“ href = „#“ > Ankerelement 3 < / A >

< / Das >

< / ul >

< / div >

< P > Klicken Sie auf die Schaltfläche unten, um IDs der Ankerelemente aus der obigen Liste abzurufen! < / P >

< Taste onclick = „meineFunktion()“ > Holen Sie sich Ausweise < / Taste >

< P Ausweis = 'Wurzel' >< / P >

< Skript >

Funktion myFunction() {

let listItems = document.querySelectorAll('#list a[id]');

für (sei i = 0; i < listItems.length; i++ ) {

lassen Ausweis = listItems [ ich ] . Ausweis ;

document.getElementById ( 'Wurzel' ) .innerHTML + =

'ID des Ankerelements' + ( ich + 1 ) + ' Ist: ' + Ausweis + '
';

}

}

< / Skript >

< / Körper >

< / html >

Die Erklärung des obigen Codes lautet wie folgt:



  • Eine ungeordnete Liste mit einer ID „ Liste „wird erstellt und ist in „ enthalten
    ' Stichworte.
  • Innerhalb der Listenelemente werden drei Ankertags erstellt und mit IDs versehen „ Anker1 ',' Anker2 ', Und ' Anker3 ' jeweils.
  • Als nächstes ein „

    ”-Element wird erstellt und enthält Textinhalt.

  • Als nächstes wird ein Schaltflächenelement mit dem „ ' Stichworte. Der ' onclick() Das Attribut der Schaltfläche ist mit einer Funktion namens „ meineFunktion() “.
  • Ein leeres '

    „Element mit ID“ für ' geschaffen.

  • Als nächstes innerhalb des „ ”-Tags, eine Funktion namens „ meineFunktion() ' geschaffen.
  • Innerhalb der Funktion gibt es eine Konstante mit dem Namen „ listItems ' geschaffen.
  • Diese Konstante wird mit den IDs aller Ankerelemente über das „ document.querySelectorAll() ' Methode. Diese Methode wird mit der ID der Liste und einer Abfrage von „ Hilfe] “.
  • Dann ein ' für ”-Schleife wird erstellt, um die Schleife zu durchlaufen. listItems ” konstant.
  • Anstelle des „“ werden dann die IDs der Ankerelemente gedruckt. P „Element mit ID“ für “. Dies geschieht mit dem „ document.getElementById().innerHTML ' Methode.

Ausgabe:





In der folgenden Ausgabe sind die Ankerelemente in einer Liste vorhanden, und der Benutzer kann ihre IDs abrufen, indem er auf „ Holen Sie sich Ausweise ' Taste.



Dabei geht es darum, die IDs der Ankerelemente innerhalb der Listenelemente abzurufen.

Abschluss

Um die ID eines Ankerelements innerhalb eines Listenelements abzurufen, muss das integrierte JavaScript „ document.querySelectorAll() ”-Methode kann verwendet werden. Darüber hinaus können die erhaltenen IDs dieser Ankerelemente mithilfe des integrierten JavaScript auf der Webseite gedruckt werden. .innerHTML() ' Methode. In diesem Artikel wurde das Verfahren zum Abrufen der ID eines Ankerelements in einem Listenelement in JavaScript beschrieben.