Poznaj querySelector i przestań używać getElementsBy...

btw – kod może Cię zaskoczyć!

Spis treści

Wprowadzenie
QuerySelector/querySelectorAll
Dlaczego querySelector jest lepszy od innych metod?
Podsumowanie

Wprowadzenie

Lat temu bardzo dużo główną przewagą jQuery nad czystym JS było to, że ujednolicała i upraszczała zachowanie pomiędzy przeglądarkami. JS jednak zaczął nadrabiać stracone lata, modernizując swoje API, większy nacisk również został położony na kompatybilność między przeglądarkami.

Jedną z rzeczy które najbardziej lubię w jQuery jest możliwość używania selektorów do pobierania elementu, np $('.form .element:not(.inactive)').

I choć JavaScript od wielu lat daje możliwość używania selektorów przy pobieraniu elementów DOM za pomocą querySelector/querySelectorAll, bardzo często widzę użycia innych metod pobierania elementów, jak getElementById czy getElementsByTagName.

W tym wpisie będę chciał przekonać Cię, że querySelector/querySelectorAll to zdecydowanie lepszy wybór

QuerySelector/querySelectorAll

Kilka słów o querySelector

Metoda ta zwraca pierwszy element pasujący do selektora.

Zwrócony element jest typu Element, interfejs ten udostępnia m.in metody:

closest, która zwróci pierwszego rodzica pasującego do selektora
animate, pozwalającą utworzyć oraz uruchomić animację na wybranym elemencie
requestFullscreen, która pokaże wybrany element na pełnym ekranie

Istotnym elementem jest to, że metody querySelector i querySelectorAll można uruchamiać również na obiekcie typu Element – co spowoduje wyszukanie po danym selektorze wewnątrz wybranego elementu. Wiąże się z tym pewna nieścisłość – ale o tym dalej.

Słówko o querySelectorAll

Ponieważ querySelector zwraca tylko pierwszy pasujący element, potrzebujemy metody która zwróci nam wszystkie pasujące elementy. Tą metodą jest querySelectorAll.

Zwraca ona obiekt NodeList – możesz iterować po tym obiekcie jak po tablicy metodą forEach bądź składnią for..of, aczkolwiek jeśli chcesz mieć pełną paletę operacji na tablicach możesz przetransformować obiekt do prawdziwej tablicy:

const array = [...document.querySelector('.items')];

const array = [...document.querySelector('.items')];

Dwa słowa o pewnej nieścisłości

querySelector pozwala stosować selektory a także przeszukiwać DOM relatywnie w stosunku do elementu, jest jednak jedno „ale”.

Jeżeli przeszukujemy DOM relatywnie spodziewalibyśmy się, że znalezione elementy będą musiały spełniać warunek selektora wewnątrz elementu. Brzmi to może dziwnie Ale spójrzmy na kod:

</div>

<div class="parent">
  <div id="element">
    <div class="child"></div>
  </div>
</div>

Mając taki kod JS:

const element = document.querySelector('#element');

const child = element.querySelector('.parent .child');

const element = document.querySelector('#element'); const child = element.querySelector('.parent .child');

const element = document.querySelector('#element');
const child = element.querySelector('.parent .child');

Spodziewałbym się zwrócenia wartości null, ponieważ w divie o id element nie ma elementu z klasą child wewnątrz elementu z klasą parent.

Co zaskakujące jednak, zostanie zwrócony div z klasą child – ponieważ domyślnie cała hierarchia DOM jest brana pod uwagę.

Może to być uznane za nienaturalne – jak więc uzyskać naturalne zachowanie? Poprzez dodanie do selektora pseudoklasy :scope.

Spójrzmy na taki kod HTML:

Parent

Child outer

Child inner

Child

Child but also a parent

Child

</div>

<div class="parent"> Parent <div class="child child-1"> Child outer <div class="child child-2"> Child inner <div class="child child-3"> Child <div class="parent child-1"> Child but also a parent <div class="child child-2"> Child </div> </div> </div> </div> </div> </div>

<div class="parent">
  Parent
  <div class="child child-1">
    Child outer
    <div class="child child-2">
      Child inner
      <div class="child child-3">
        Child
        <div class="parent child-1">
          Child but also a parent
          <div class="child child-2">
            Child
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Powtarza się tam selektor .parent .child, który będziemy chcieli sprawdzić.

Stworzymy selektor który będzie miał formę albo

':scope .parent .child'

':scope .parent .child'

I ten selektor będzie sprawdzany tylko w hierarchii wewnątrz elementu, oraz selektor z zachowaniem domyślnym:

'.parent .child'

'.parent .child'

Elementem w stosunku do którego będziemy przeszukiwać dom będzie element z tekstem

Child outer

Child outer. Kliknięcie na przycisk będzie wywoływać funkcję, która do pasujących elementów dodawać będzie czarne tło:

const child1 = document.querySelector('.child-1');

document.querySelector('#select').addEventListener('click', () => {

const scoped = document.querySelector('#scoped').checked;

const selector = `${scoped ? ':scope ' : ''}.parent .child`;

const elements = [...child1.querySelectorAll(selector)];

elements.forEach(element => element.classList.add('black'));

});

const child1 = document.querySelector('.child-1'); document.querySelector('#select').addEventListener('click', () => { const scoped = document.querySelector('#scoped').checked; const selector = `${scoped ? ':scope ' : ''}.parent .child`; const elements = [...child1.querySelectorAll(selector)]; elements.forEach(element => element.classList.add('black')); });

const child1 = document.querySelector('.child-1');
    
document.querySelector('#select').addEventListener('click', () => {
  const scoped = document.querySelector('#scoped').checked;
  const selector = `${scoped ? ':scope ' : ''}.parent .child`;
  const elements = [...child1.querySelectorAll(selector)];
  elements.forEach(element => element.classList.add('black'));
});

Jaki będzie efekt dla wywołania funkcji bez zaznaczonego checkboxa scoped? Zaznaczonych zostanie wiele elementów, ponieważ pod uwagę wzięta będzie klasa parent będąca poza elementem w stosunku do którego szukamy:

Natomiast gdy zaznaczymy checkbox zaznaczy się tylko jeden element:

Ponieważ dodana pseudoklasa wymusza branie pod uwagę tylko hierarchię wewnątrz elementu.

Kod przykładu na Github

Pełny kod przykładu można znaleźć pod adresem:

https://github.com/radek-anuszewski/queryselector-scope-demo

Klikalny przykład na Github Pages

Możesz przeklikać przykład pod adresem:

https://radek-anuszewski.github.io/queryselector-scope-demo/index.html

Dlaczego querySelector jest lepszy od innych metod?

Moim zdaniem oczywiście A więc czemu tak uważam?

Po pierwsze, mamy bardziej czytelne i jednorodne API. Istnieje jedna metoda zamiast kilku:

getElementById
getElementsByClassName
getElementsByTagName

Pierwsza z powyższych zwraca pojedynczy element – co jest oczywiście logiczne biorąc pod uwagę, że id powinno być unikalne, pozostałe 2 zwracają listę elementów.
Uważam że zachowanie querySelector i querySelectorAll jest czytelniejsze – chcesz pierwszy pasujący do selektora element? Użyj tego pierwszego. Chcesz listę elementów? Użyj drugiego.

Używanie selektorów pozwala nam reużywać wiedzy którą nabyliśmy przy nauce / pracy w CSS. I odwrotnie – jeśli poznajemy selektory pod kątem metody querySelector wiedza ta będzie mieć również zastosowanie przy stylowaniu aplikacji.

No i najważniejsze na koniec, coś co jest oczywiste – selektory Dzięki temu, bez konieczności użycia jQuery bądź innej biblioteki czy konieczności odfiltrowywania elementów w kodzie, możemy bardzo szczegółowo przeszukiwać DOM.

Podsumowanie

Oczywiście dużą rolę w wyborze sposobu odpytywania DOM będą odgrywać osobiste preferencje. Niektórzy uznają dedykowane metody za lepsze – jako bardziej ekspresyjne niż querySelector, którego nazwa na pierwszy rzut oka niewiele mówi.
Osobiście uważam, że querySelector ma znacznie większe możliwości niż inne metody a także jest bardziej minimalistyczna. Zamiast 3 metod mamy 2, które dodatkowo używają zasad znanych z CSS – dlatego myślę, że powinny być preferowanym sposobem dostępu po DOM.

Poznaj querySelector i przestań używać getElementsBy…