Hogyan lehet lekérni egy listaelemen belüli horgony azonosítóját JavaScriptben

Hogyan Lehet Lekerni Egy Listaelemen Beluli Horgony Azonositojat Javascriptben



Interaktív weboldalak létrehozásához, mint például azok, amelyek reagálnak, amikor a felhasználó egy gombra kattint, a JavaScript a legjobb választás. Lehetővé teszi a felhasználók számára, hogy kreatív és dinamikus terveket készítsenek. Ezt úgy teszi, hogy a függvényekben a HTML-elemek azonosítóit manipulálja. Egy HTML-elem azonosítója a JavaScript különböző beépített módszereivel szerezhető meg.

Ez a cikk egy listaelemen belüli horgonyelem azonosítójának lekérésének eljárását ismerteti a JavaScriptben.

Hogyan lehet lekérni egy listaelemen belüli horgony azonosítóját JavaScriptben?

Egy elem ID attribútuma egy egyedi azonosító, amely az adott elem manipulálására és használatára használható egy JavaScript-függvényben. A felhasználók különféle módszerekkel juthatnak hozzá az elemhez az azonosítójával. Azonban nehéz lehet egy HTML-elem azonosítójának lekérése. Egy HTML-elem ID attribútumának lekérése azonban kissé bonyolult lehet.







Hasonlóképpen egy „ listaelem ”, a felhasználó nem hívhatja meg közvetlenül a horgonyelemet, és nem kaphatja meg az azonosítóját, mert több horgonyelem lesz, amint jelen vannak egy listában. Ebben a helyzetben az alábbi bemutató bemutatja, hogyan lehet lekérni egy listaelemen belüli horgonyelem azonosítóját:





< html >

< test >

< div >

< ul id = 'lista' >

< hogy >

< a id = 'horgony1' href = '#' > 1. horgonyelem < / a >

< / hogy >

< hogy >

< a id = 'horgony2' href = '#' > 2. horgonyelem < / a >

< / hogy >

< hogy >

< a id = 'horgony3' href = '#' > 3. horgonyelem < / a >

< / hogy >

< / ul >

< / div >

< p > Kattintson az alábbi gombra a horgonyelemek azonosítóinak lekéréséhez a fenti listából! < / p >

< gomb kattintásra = 'myFunction()' > Szerezzen azonosítókat < / gomb >

< p id = 'gyökér' >< / p >

< forgatókönyv >

function myFunction() {

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

for (legyen i = 0; i < listItems.length; i++ ) {

hagyja id = listaelemek [ én ] . id ;

document.getElementById ( 'gyökér' ) .innerHTML + =

'A horgonyelem azonosítója' + ( én + 1 ) + ' ez: ' + id + '
';

}

}

< / forgatókönyv >

< / test >

< / html >

A fenti kód magyarázata a következő:



  • Egy rendezetlen lista azonosítóval ' lista ' létrehozásra kerül és a '' mappában található
    ” címkéket.
  • Három horgonycímke jön létre a listaelemeken belül, és azonosítókkal vannak ellátva ' horgony1 ', ' horgony2 ”, és „ horgony3 ” ill.
  • Ezután egy „

    ” elem jön létre, és tartalmaz némi szöveges tartalmat.

  • Ezután egy gombelem jön létre a „ ” címkéket. A ' kattintásra() A gomb attribútuma egy '' nevű funkcióval van ellátva myFunction() ”.
  • Egy üres '

    ' elem azonosítóval ' számára ' létrehozva.

  • Ezután a „

    Az alábbi kimenetből a horgony elemek listában jelennek meg, és a felhasználó az azonosítóikat a „ Szerezzen azonosítókat ” gombot.



    Ez a listaelemeken belüli horgonyelemek azonosítóinak lekéréséről szól.

    Következtetés

    A listaelemen belüli horgonyelem azonosítójának lekéréséhez a beépített JavaScript ' document.querySelectorAll() ” módszer használható. Ezenkívül ezeknek a horgonyelemeknek a kapott azonosítói a beépített JavaScript segítségével kinyomtathatók a weboldalra. .innerHTML() ” módszerrel. Ez a cikk egy listaelemen belüli horgonyelem azonosítójának lekéréséhez szükséges eljárást ismerteti a JavaScriptben.