Skip to main content
adicionou 191 caracteres ao conteúdo
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38

Se for preciso realizar a seleção de múltiplos elementos, utilize querySelectorAll que irá retornar um objeto NodeList., para aplicar os estilos em todos, basta aplicar um loop como no exemplo abaixo:

//selecionando todos os elementos span e p
let obj = document.querySelectorAll('span, p'); 

console.log("tipo: " + typeof obj);
console.log("Quantidade: " +obj.length); 

//aplicando o estilo em todos os elementos selecionados
for(let i of obj) {  
    i.style.color= "blue";
}
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui também será aplicado </span> 
<p>[p] -  Aqui também será aplicado </p>

Se for preciso realizar a seleção de múltiplos elementos, utilize querySelectorAll que irá retornar um objeto NodeList.

let obj = document.querySelectorAll('span, p'); 

console.log("tipo: " + typeof obj);
console.log("Quantidade: " +obj.length);

for(let i of obj) {  
    i.style.color= "blue";
}
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui também será aplicado </span> 
<p>[p] -  Aqui também será aplicado </p>

Se for preciso realizar a seleção de múltiplos elementos, utilize querySelectorAll que irá retornar um objeto NodeList, para aplicar os estilos em todos, basta aplicar um loop como no exemplo abaixo:

//selecionando todos os elementos span e p
let obj = document.querySelectorAll('span, p'); 

console.log("tipo: " + typeof obj);
console.log("Quantidade: " +obj.length); 

//aplicando o estilo em todos os elementos selecionados
for(let i of obj) {  
    i.style.color= "blue";
}
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui também será aplicado </span> 
<p>[p] -  Aqui também será aplicado </p>
adicionou 4 caracteres ao conteúdo
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38

OuQue tal uma seleção mais avançada?:

Ou uma seleção mais avançada?:

Que tal uma seleção mais avançada?

adicionando mais exemplos
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38

Além da performance envolvida (getElementById é um pouco mais performático, irei citar testealguns testes mais abaixo) podemos considerar:

document.querySelector('span, p').style.color='lightblue';
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui não será aplicado </span>  

<p>[p] -  Aqui não será aplicado </p>

Se for preciso realizar a seleção de múltiplos elementos, utilize querySelectorAll que irá retornar um objeto NodeList.

let obj = document.querySelectorAll('span, p'); 

console.log("tipo: " + typeof obj);
console.log("Quantidade: " +obj.length);

for(let i of obj) {  
    i.style.color= "blue";
}
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui também será aplicado </span> 
<p>[p] -  Aqui também será aplicado </p>

Além da performance envolvida (getElementById é mais performático, irei citar teste mais abaixo) podemos considerar:

document.querySelector('span, p').style.color='lightblue';
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui não será aplicado </span>  

<p>[p] -  Aqui não será aplicado </p>

Além da performance envolvida (getElementById é um pouco mais performático, irei citar alguns testes mais abaixo) podemos considerar:

document.querySelector('span, p').style.color='lightblue';
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui não será aplicado </span>  

<p>[p] -  Aqui não será aplicado </p>

Se for preciso realizar a seleção de múltiplos elementos, utilize querySelectorAll que irá retornar um objeto NodeList.

let obj = document.querySelectorAll('span, p'); 

console.log("tipo: " + typeof obj);
console.log("Quantidade: " +obj.length);

for(let i of obj) {  
    i.style.color= "blue";
}
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui também será aplicado </span> 
<p>[p] -  Aqui também será aplicado </p>
adicionando exemplos e correções aplicadas
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38
Carregando
adicionando exemplos e correções aplicadas
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38
Carregando
adicionou 113 caracteres ao conteúdo
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38
Carregando
acrescentando novo exemplo
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38
Carregando
Fonte Link
Jorge Nunes
  • 2,8mil
  • 1
  • 15
  • 38
Carregando