W3C Selectors API - Seletores CSS3 nativos no JavaScript
- Detalhes
- Categoria: JavaScript
- Criado em Domingo, 27 Novembro 2011 10:21
Com o avanço do JavaScript nas páginas WEB para dar mais fluidez, melhor usabilidade, etc. os métodos de selecionar elementos através do DOM vem sendo melhorados.
Para poupar grandes esforços a W3C vem providenciando a API de Seletores, que já está em seu segundo nível, mas que ainda tem muito a melhorar e grandes personalidades do mundo JavaScript vem intercedendo por correções e com sugestões para isso.
Para utilizar é muito simples, ela é rápida e a finalidade é muito boa.
Utiliza o mesmo método que as engines de Seleção do Dojo, Prototype e o Sizzle ( utilizado no jQuery ): pesquisa através de seletores CSS3.
A API tem dois métodos: querySelector e querySelectorAll.
A consulta acima retorna todos "span" do documento que tem como seu pai um elemento "div".
A única diferença entre querySelector e querySelectorAll é o retorno. querySelector retorna apenas o primeiro elemento encontrado e querySelectorAll segunda retorna semrpe um NodeList mesmo que seja encontrado somente um elemento correspondente ao seletor informada.
Muito simples, direto, rápido e reutilizável pois todos elementos possuem as função querySelectorAll e querySelector.
Suporte dos navegadores aos métodos:
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | |
|---|---|---|---|---|---|
| Suporte Básico | 1 | 3.5 (1.9.1) | 8 | 10 | 3.2 (525.3) |
Mas como nem tudo é um mar de rosas no mundo JavaScript, existem problemas, e graves, com a API de Seletores:
- Encadeamento incorreto. Ex. quando utilizado as funções querySelector e querySelectorAll em elementos, que não o "document", ele retorna a pesquisa a partir do elemento raiz;
- Os Exceptions podiam ser mais claros se devolvessem qual parte do seletor está incorreta;