Element.querySelectorAll()

Sumário

Retorna uma NodeList de todos os elementos descendentes do elemento que foi invocado que sejam compatíveis com o grupo de seletores CSS especificados.

Sintaxe

elementList = baseElement.querySelectorAll(selectors);

Onde

  • elementList é uma lista não-viva de objetos element.
  • baseElement é um objeto elemento.
  • selectors é um grupo de seletores que serão procurados.

Exemplos

Este exemplo retorna uma lista de todos os elementos p no corpo do HTML:

js
var matches = document.body.querySelectorAll("p");

Este exemplo retorna uma lista de elementos p que estejam contidos em outro elemento, o qual é uma div que tem a classe 'highlighted':

js
var el = document.querySelector("#test");
var matches = el.querySelectorAll("div.highlighted > p");

Este exemplo retorna uma lista de elementos iframe que contenham um atributo data 'src':

js
var matches = el.querySelectorAll("iframe[data-src]");

Notas

Joga uma excessão SYNTAX_ERR se o grupo especificado de seletores for inválido.

querySelectorAll() foi introduzida na WebApps API.

A string passada como argumento para querySelectorAll deve seguir a sintaxe do CSS. veja document.querySelector para um exemplo concreto.

Lembre-se que o valor retornado é uma NodeList, então não é recomendado o uso de recursões for...in, nem de nenhum método de array. Se realmente houver a necessidade de usar métodos de uma array, então o NodeList deve ser convertido em uma array antes de ser usado.

Especificações

Specification
DOM Standard
# ref-for-dom-parentnode-queryselectorall①

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também