2

Tenho o seguinte nav:

<nav>
  <ul>
     <li><a href="">1</a></li>
     <li><a href="">2</a></li>
     <li><a href="">3</a></li>
  </ul>
</nav>

e o código JavaScript:

var linkElement = document.querySelector('nav a');

linkElement.classList.add('blue');

Mas ao fazer isso ele adiciona a classe apenas no primeiro elemento.

Se eu faço assim:

var linkElement = document.querySelectorAll('li a');

ou

var linkElement = document.getElementsByTagName('a');

Ele me retorna o seguinte erro:

Uncaught TypeError: Cannot read property 'add' of undefined

Como faço para adicionar a classe em todos os links ?

1 Resposta 1

3

Na sua primeira tentativa você só conseguiu alterar do primeiro elemento da lista porque o querySelector obtém apenas o primeiro elemento encontrado do documento.

Para obter todos os elementos você deve utilizar a função querySelectorAll. O que essa função faz é retornar um Array contendo todos os elementos encontrados. Foi lançado um erro na segunda tentativa onde você chama esta função, justamente porque você tentou utilizar o atributo classList que não existe em arrays.

Na terceira tentativa, o erro também foi lançado pelo mesmo motivo já que a função getElementsByTagName retorna um Array contendo todos os elementos com a tag que você especificou.

Para que o código funcione, você deve percorrer os elementos obtidos do Array através de um laço for, dessa forma:

var linkElement = document.querySelectorAll('nav a');

for (element of linkElement){
    element.classList.add('blue');
}
<nav>
  <ul>
     <li><a href="">1</a></li>
     <li><a href="">2</a></li>
     <li><a href="">3</a></li>
  </ul>
</nav>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .