Este artigo fornece o procedimento para recuperar o ID de um elemento âncora dentro de um item de lista em JavaScript.
Como recuperar o ID de uma âncora dentro de um item de lista em JavaScript?
O atributo ID de um elemento é um identificador exclusivo que pode ser usado para manipular e usar esse elemento em uma função JavaScript. Os usuários podem obter o elemento usando seu ID por meio de vários métodos. No entanto, pode ser difícil recuperar o ID de um elemento HTML. No entanto, pode ser um pouco complexo recuperar o atributo ID de um elemento HTML.
Da mesma forma, no caso de elementos âncora dentro de um “ item da lista ”, o usuário não pode chamar diretamente o elemento âncora e obter seu ID porque haverá vários elementos âncora, pois estão presentes em uma lista. Para esta situação, a demonstração abaixo mostra como recuperar o ID de um elemento Anchor dentro de um item de lista:
< HTML >
< corpo >
< divisão >
< ul eu ia = 'lista' >
< que >
< a eu ia = 'âncora1' href = '#' > Elemento Âncora 1 < / a >
< / que >
< que >
< a eu ia = 'âncora2' href = '#' > Elemento Âncora 2 < / a >
< / que >
< que >
< a eu ia = 'âncora3' href = '#' > Elemento Âncora 3 < / a >
< / que >
< / ul >
< / divisão >
< p > Clique no botão abaixo para obter os IDs dos elementos âncora da lista acima! < / p >
< botão ao clicar = 'minhaFunção()' > Obtenha IDs < / botão >
< p eu ia = 'raiz' >< / p >
< roteiro >
function minhaFunção() {
deixe listItems = document.querySelectorAll('#list a[id]');
para (seja i = 0; i
deixar eu ia = lista de itens [ eu ] . eu ia ;
documento.getElementById ( 'raiz' ) .innerHTML + =
'ID do Elemento Âncora' + ( eu + 1 ) + ' é: ' + eu ia + '
';
}
}
< / roteiro >
< / corpo >
< / HTML >
A explicação do código acima é a seguinte:
- Uma lista não ordenada com um ID “ lista ”É criado e contido em“ ' Tag.
- Três tags âncora são criadas nos itens da lista e são fornecidas com IDs “ âncora1 ',' âncora2 ', e ' âncora3 ”Respectivamente.
- A seguir, um “ ”O elemento é criado e contém algum conteúdo de texto.
- A seguir, um elemento de botão é criado usando o “
' Tag. O ' ao clicar() ”O atributo do botão é fornecido com uma função chamada“ minhaFunção() ”. - Um vazio ' ”elemento com ID“ para ' é criado.
- A seguir, dentro do “
”tags, uma função chamada“ minhaFunção() ' é criado. - Dentro da função, uma constante chamada “ lista de itens ' é criado.
- Esta constante é fornecida com os IDs de todos os elementos âncora usando o “ document.querySelectorAll() ”Método. Este método é fornecido com o id da lista e uma consulta de “ ajuda] ”.
- Então uma ' para ”O loop é criado para percorrer o“ lista de itens ”constante.
- Os IDs dos elementos âncora são então impressos no lugar do “ p ”elemento com ID“ para ”. Isso é feito usando o “ document.getElementById().innerHTML ”Método.
Saída:
Na saída abaixo, os elementos âncora estão presentes em uma lista, e o usuário pode obter seus ids clicando no botão “ Obtenha IDs ' botão.
Trata-se de recuperar os IDs dos elementos âncora dentro dos itens da lista.
Conclusão
Para recuperar o ID de um elemento âncora dentro de um item de lista, o JavaScript integrado “ document.querySelectorAll() ”O método pode ser usado. Além disso, os IDs obtidos desses elementos âncora podem ser impressos na página da web usando o JavaScript integrado “ .innerHTML() ”Método. Este artigo forneceu o procedimento para recuperar o ID de um elemento âncora dentro de um item de lista em JavaScript.