Document.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.

Introdução

Retorna uma lista de elementos presentes no documento (usando ordenação em profundidade, pré-ordenada e transversal dos nós do documento) que coincidam com o grupo de seletores especificado. O objeto retornado é uma NodeList.

Sintaxe

elementList = document.querySelectorAll(selectors);

onde

elementList é uma NodeList não-viva (alterações no DOM não refletem na lista) de objetos Element.
selectors é uma string contendo um ou mais seletores CSS separados por vírgulas.

A NodeList retornada irá conter todos os elementos do documento que coincidam com os seletores especificados. Se a string selectors conter um CSS PseudoElements, o retorno será uma NodeList vazia.

Exemplo

Esse exemplo retorna uma lista de todos os elementos div presentes no document que contenham as classes "note" ou "alert":

var matches = document.querySelectorAll("div.note, div.alert");

Notas

Retorna uma NodeList não-viva (alterações no DOM não refletem na lista) de todos os elementos que coincidam com os seletores informados.

Lança uma exceção SYNTAX_ERR se o grupo especificado de seletores for inválido.

querySelectorAll() foi introduzida na WebApps API.

Navegadores baseados em WebKit têm um bug: quando a string seletores contém um pseudo-elemento CSS, a NodeList retornada não esta vazia, neste caso ela contém o elemento <html>.