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
Exemplos
Este exemplo retorna uma lista de todos os elementos p
no corpo do HTML:
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':
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':
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