Como um id
deve ser único na página, logo a função getElementById
é no singular, porque você só vai selecionar um único elemento.
Já a função getElementsByName
, que é no plural (no singular não existe), sugere que você irá selecionar uma lista de nós (nodelist) que é a coleção do valor especificado na função (assim como getElementsByTagName
e getElementsByClassName
).
Ao contrário do id
, os name
, class
e tag
podem ter 1 ou mais ocorrências na página, e sendo assim, a função getElementsByName
irá criar um objeto nodelist com todos os elementos que tiverem o name
especificado, criando uma array com os elementos. Para acessar esses elementos você precisa especificar um índice, começando do 0
:
document.getElementsByName("SecColor") // todos os elementos (nodelist)
document.getElementsByName("SecColor")[0] // 1º elemento
document.getElementsByName("SecColor")[1] // 2º elemento
document.getElementsByName("SecColor")[2] // 3º elemento
etc..
Para alterar todos os elementos do nodelist, você deve fazer um loop percorrendo cada um dos elementos, como sugeriu a resposta do Marcel. Porém, vou deixar uma sugestão mais compatível usando o for
tradicional (o forEach
não funciona nos navegadores Microsoft):
for(var x = 0; x < document.getElementsByName("SecColor").length; x++){
els[x].style.backgroundColor = "rgb(111,160,253)";
}