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
# ref-for-dom-parentnode-queryselectorall①

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
querySelectorAll

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também