Element.querySelectorAll()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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