Výběr elementů querySelectorem

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;
}