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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Procházení elementů v JS

Procházení značek v JavaScriptu

Jak cyklem procházet značky v JavaScriptu. Popis různých možností.

Funkce getElementById a getElementsByTagName

Metody getElementByIdgetElementsByTagName

Vybírání elementů v JavaScriptu metodami getElementById, getElementsByTagName a getElementsByClassName.

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Úprava libovolného textu na stránce

Úprava textu stránky pomocí designMode

Jednoduchý bookmarklet pro okamžité přepsání libovolného textu na stránce.

Zablokování kláves

Zablokování některých kláves

Zablokování určitých kláves (šipek) pomocí JavaScriptu.

Komentáře