O webu
JS querySelector

Chceme-li na stránce najít pomocí JS nějaký element, existuje několik možností.

  • Procházet DOM metodami typu getElementsByTagName.
  • Cílovému elementu přidat ID a najít ho přes:
    var element = document.getElementById("idecko");
  • Použít JS knihovnu jQuery/Zepto, kde se dá používat běžné CSS selektory:
    var element = $("#id");
    var odkazyVTabulkach = $("table a");
  • Použít právě querySelector/querySelectorAll, který umí od IE 8 totéž bez nutnosti natahovat několik desítek kB velkou knihovnu.
    var element = document.querySelector("#id");
    var odkazyVTabulkach = document.querySelectorAll("table a");

Podpora

Funguje částečně (nebo spíš neúplně) už v IE 8. Částečně v tom smyslu, že zná jen ty selektory, co fungují ve stejném prohlížeči i v CSS. Tedy jen částečně funguje třeba i v IE 9, kde nebude znát např. pseudotřídu :valid (test).

Nicméně většina CSS selektorů už v IE 8 funguje. Proto je i třeba querySelectorAll výhodnější než metoda getElementsByClassName, která funguje až od IE 9.

Zápis

Použití je obdobné jako getElement(s)By* metody. Rozdíl mezi querySelector a querySelectorAll spočívá v tom, že:

  1. document.querySelector(".trida") — vrátí první element s třídou trida.
  2. document.querySelectorAll(".trida") — vrátí kolekci všech elementů s třídou trida.

Procházet pole elementů je možné klasickým způsobem (ukázka):

var znacky = document.querySelectorAll(".trida");
for (var i = 0; i < znacky.length; i++) {
  // znacky[i]
}

Zápis $("element")

S využitím querySelectoru je možné docílit dolarového zápisu, který se stal populární v JS frameworcích (ukázka).

function $(selektor, el) {
  if (!el) el = document;
  var elementy = el.querySelectorAll(selektor);
  return elementy;
}