O que os methods querySelectorAll, getElementsByClassName e outros methods getElementsBy * retornam?

Do getElementsByClassName (e funções semelhantes como getElementsByTagName e querySelectorAll ) funcionam da mesma forma que getElementById ou retornam uma matriz de elementos?

A razão pela qual eu pergunto é porque estou tentando alterar o estilo de todos os elementos usando getElementsByClassName . Ver abaixo.

 //doesn't work document.getElementsByClassName('myElement').style.size = '100px'; //works document.getElementById('myIdElement').style.size = '100px'; 

Seu código getElementById() funciona porque os IDs precisam ser únicos e, portanto, a function sempre retorna exatamente um elemento (ou null se nenhum for encontrado).

No entanto, getElementsByClassName() , querySelectorAll() e outros methods getElementsBy* retornam uma coleção de elementos como uma matriz. Iterar sobre isso como você faria com uma matriz real:

 var elems = document.getElementsByClassName('myElement'); for(var i = 0; i < elems.length; i++) { elems[i].style.size = '100px'; } 

Se você preferir algo mais curto, considere usar o jQuery :

 $('.myElement').css('size', '100px'); 

Você está usando uma matriz como um object, a diferença entre getElementbyId e getElementsByClassName é a seguinte:

  • getElementbyId lhe retornará um object.
  • getElementsByClassName retornará uma matriz.

getElementsByClassName

O getElementsByClassName(classNames) usa uma cadeia que contém um conjunto não ordenado de tokens separados por espaços que representam classs. Quando chamado, o método deve retornar um object NodeList ao vivo contendo todos os elementos no documento que possuem todas as classs especificadas nesse argumento, tendo obtido as classs dividindo uma cadeia em espaços. Se não houver tokens especificados no argumento, o método deverá retornar um NodeList vazio.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

O método getElementById () acessa o primeiro elemento com o id especificado.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

no seu código as linhas:

1- document.getElementsByClassName (‘myElement’). Style.size = ‘100px’;

NÃO funcionará como esperado, porque o getElementByClassName retornará uma matriz, e a matriz NÃO terá a propriedade style , você acessará cada element iterando-os.

É por isso que a function getElementById estava funcionando para você, essa function retornará o object direto e, portanto, você poderá acessar a propriedade style .

A seguinte descrição é retirada desta página :

O método getElementsByClassName () retorna uma coleção de todos os elementos no documento com o nome da class especificado, como um object NodeList.

O object NodeList representa uma coleção de nós. Os nós podem ser acessados ​​por números de índice. O índice começa em 0.

Dica: Você pode usar a propriedade length do object NodeList para determinar o número de elementos com um nome de class especificado, então você pode percorrer todos os elementos e extrair as informações desejadas.

Então, como um parâmetro getElementsByClassName aceitaria um nome de class.

Se este é o seu corpo HTML:

     

então var menuItems = document.getElementsByClassName('menuItem') retornaria uma coleção (não uma matriz) das 3

s superiores, já que elas correspondem ao nome da class dada.

Você pode, então, iterar sobre essa coleção de nós (

s neste caso) com:

 for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) { var currentMenuItem = menuItems[menuItemIndex]; // do stuff with currentMenuItem as a node. } 

Por favor, consulte este post para mais informações sobre as diferenças entre elementos e nós.

O ES6 fornece o método Array.from() , que cria uma nova ocorrência de Array a partir de um object semelhante a uma matriz ou iterável.

 let boxes = document.getElementsByClassName('box'); Array.from(boxes).forEach(v => v.style.background = 'green'); console.log(Array.from(boxes)); 
 .box { width: 50px; height: 50px; margin: 5px; background: blue; display: inline-block; } 
 

Retorna a lista do tipo Array.

Você faz disso uma Array como exemplo

 var el = getElementsByClassName("elem"); el = Array.prototype.slice.call(el); //this line el[0].appendChild(otherElem); 

Você poderia obter um único elemento executando

 document.querySelector('.myElement').style.size = '100px'; 

mas vai funcionar para o primeiro elemento com a class .myElement.

Se você gostaria de aplicar isso para todos os elementos com a class eu sugiro que você use

 document.querySelectorAll('.myElement').forEach(function(element) { element.style.size = '100px'; }); 

Em outras palavras

  • document.querySelector() seleciona apenas o primeiro elemento do seletor especificado. Então, não cuspiu uma matriz, é um valor único. Semelhante a document.getElementById() que busca apenas elementos de ID, já que os IDs precisam ser exclusivos.

  • document.querySelectorAll() seleciona todos os elementos com o seletor especificado e os retorna em uma matriz. Semelhante a document.getElementsByClassName() somente para classs e tags document.getElementsByTagName() .

Por que usar o querySelector?

É usado apenas com o único propósito de facilidade e brevidade.

Por que usar getElement / sBy? *

Desempenho mais rápido.

Por que essa diferença de desempenho?

Ambas as formas de seleção têm o objective de criar uma NodeList para uso posterior. O querySelectors gera um NodeList estático com os seletores, portanto, ele deve ser criado primeiro do zero.
getElement / sBy * imediatamente adapta o NodeList existente ao vivo do DOM atual.

Então, quando usar qual método é sua / seu projeto / seu dispositivo.

Infos

Demonstração de todos os methods
Documentação NodeList
Teste de performance

Com o ES5 + (qualquer navegado hoje em dia – 2017) você deve ser capaz de fazer

 [].forEach.call(document.getElementsByClassName('answer'), function(el) { el.style.color= 'red'; }); 
    Intereting Posts