Kawałek Kodu

A może by tak nie ściągać na stronę całej biblioteki jQuery, MooTools, DoJo, czy też innej, której używasz, jeśli potrzebujesz tylko możliwości selekcji elementów w drzewie DOM?

Jeśli wykorzystanie przez Ciebie jednej ze wspomnianych bibliotek ogranicza się wyłącznie (lub prawie) do wybierania elementów na podstawie zadanego selektora, to ta biblioteka jest Ci zupełnie niepotrzebna.

Chcesz wybrać grupę elementów?
W jQuery robiłeś to pewnie tak:

var linki = $('#sekcja1 div.blok a');

aby wybrać wszystkie linki zawarte w div(ach) z klasą blok, zawarty/e w elemencie o id=sekcja1.

A jak to zrobić w czystym JavaScript? A tak:

var linki = document.querySelectorAll('#sekcja1 div.blok a');

Jeśli chciałbyś pobrać tylko jeden element na podstawie tego selektora, to zapewne robiłeś tak:

var link = $('#sekcja1 div.blok a:first');

lub:

var link = $('#sekcja1 div.blok a:eq(0)');

lub jeszcze inaczej.

A bez frameworka JS?

W JavaScript zrobisz to w ten sposób:

var link = document.querySelector('#sekcja1 div.blok a');

Ten sam wynik osiągniesz też poprzez (ale po co?):

var linki = document.querySelectorAll('#sekcja1 div.blok a')[0];

czyli trochę jak selektor :eq(0) z jQuery.

Jeśli masz natomiast do czynienia z potrzebą wyboru elementu bezpośrednio poprzez jego id, to z pomocą przychodzi:

var link = document.getElementById('link1'); //Tu nie używamy #

Oczywiście można użyć metody querySelector lub też querySelectorAll i wybrać pierwszy element z tablicy, ale znów rodzi się pytanie: po co?

Długaśne to jakieś.

Prawie fajnie, bo jednak nazwy metod są długie, a w połączeniu z obiektem, na którym są wywoływane, stanowią niemały fragment kodu (szczególnie w dużej ilości).

Jak sobie uprościć życie? Może tak?

function $$(selector){
    return document.querySelectorAll(selector);
}

function $$1(selector){
    return document.querySelector(selector);
}

function $(id){
    return document.getElementById(id);
}

Przykłady użycia z powyższymi selektorami:

var linki = $$('#sekcja1 div.bloki a');

var link = $$1('#sekcja1 div.bloki a');

var link = $('link1');