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 ⁨julho de 2015⁩.

Sumário

Retorna umaNodeList 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 objetoselement.
baseElement é um objetoelemento.
selectors é um grupo deseletores que serão procurados.

Exemplos

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

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

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

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

Este exemplo retorna uma lista de elementosiframe que contenham um atributodata 'src':

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

Notas

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

querySelectorAll() foi introduzida na WebApps API.

Astring passada como argumento paraquerySelectorAll deve seguir a sintaxe do CSS. vejadocument.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 dearray. Se realmente houver a necessidade de usar métodos de umaarray, então o NodeList deve ser convertido em umaarray antes de ser usado.