Dziudek's jogger

Plik Element.Selectors.js oddaje nam do dyspozycji kilka metod i funkcji do selekcji elementów z drzewa dokumentu. Zawarte w nim metody i funkcje pozwalają na selekcję zarówno pojedynczych elementów jak i grup elementów. Zawartość tego pliku możemy podzielić na dwie części : samodzielne funkcje i metody klasy Element. Do pierwszej grupy zaliczamy funkcje:

• $E
• $ES

natomiast do drugiej grupy metody:

• getElements
• getElement
• getElementsBySelector
• getElementsByClassName
• getElementById

$E

Funkcja $E zwraca pierwszy element typu podanego jako pierwszy argument i znajdujący sie wewnątrz elementu posiadającego identyfikator podany jako drugi argument tej funkcji (domyślnie wyszukiwanie elementu danego typu odbywa się w całym dokumencie).

Na przykład:

$E('a');

zwróci pierwszy link w dokumencie, ale już:

$E('a','linki');

zwróci pierwszy link znajdujący się w elemencie posiadającym id "linki".

$ES

Funkcja $ES podobnie jak funkcja $E służy do selekcji elementów na podobnej zasadzie, z tą różnicą, że zwraca tablicę elementów spełniających warunki podane w argumentach jakie pobiera ta funkcja. Przykładowo zapis:

$ES('a');

zwróci tablicę zawierającą wszystkie linki z dokumentu, a zapis:

$ES('a','linki');

zwróci tablicę wszystkich linków zawartych w elemencie posiadającym id "linki".

getElements

Metoda getElements służy do bardziej szczegółowej selekcji wielu elementów. Metoda ta należy do klasy Elements, zatem jej metody dołączamy do elementów dokumentu. Metoda ta ma podobne działanie do funkcji $ES jednak jej składnia wygląda zupełnie inaczej ze względu na powiązanie z klasą Element - najpierw określony zostaje element w którym chcemy wyselekcjonować elementy potomne, a następnie do tegoż elementu dodajemy metodę getElements z odpowiednim argumentem:

$('id_elementu').getElements(selektor);

Składnia tej metody pozwala nie tylko określić typ poszukiwanych elementów, ale także pozwala określić jakie wartości atrybutów, dany element ma posiadać.

Wszystko zależy od tego jak zapiszemy atrybut, który w zapisie składni oznaczyłem jako selektor.

Aby wyselekcjonować wszystkie obrazki z danego elementu zapiszemy:

$('id_elementu').getElements('img');

Ponadto możemy zaraz po nazwie typu selekcjonowanych elementów zapisać nawias kwadratowy, a w nim umieścić regułę jaką musi spełniać dany atrybut by element został wyselekcjonowany.

Zapis ten ma postać następującą:

typ_elementu[nazwa_atrybutaOPERATORciąg_znaków]

Przykładowo reguła:

a[id=test]

pozwoli na selekcję tylko linków posiadających id "test".

Z kolei reguła:

a[id!=test]

pozwoli na selekcję wszystkich linków poza tymi, które posiadają id "test".

Mamy do dyspozycji jeszcze dwa operatory - ^= oraz $=:

a[id^=test]

pozwoli na selekcję wszystkich linków, których id zaczyna się od ciągu znaków "test", natomiast reguła:

a[id$=test]

pozwoli na selekcję tych linków, których id kończy się ciągiem znaków "test".

getElement

Metoda getElement działa na takiej samej zasadzie jak metoda getElements (bo wykorzystuje ją w czasie działania) jednak zwraca tylko pierwszy element. Skoro już znamy zasady selekcji elementów na podstawie metody getElements więc tylko dla formalności podaję składnie metody getElement:

$('id_elementu').getElement(selektor);

getElementsBySelector

Metoda getElementsBySelector to kolejna metoda działająca na podstawie metody getElements jednak w odróżnieniu od niej pozwala nam na rozdzielanie selektorów średnikiem, a co za tym idzie pozwala na wybór elementów kilku typów naraz.

Przykładowo aby otrzymać tablicę zawierającą wszystkie linki i obrazki z dokumentu zapiszemy:

document.getElementsBySelector('a,img');

getElementsByClassName

Metoda getElementsByClassName służy do selekcji elementów według atrybutu class. Gdybyśmy chcieli wyselekcjonować wszystkie elementy przypisane do klasy "test" to zapiszemy:

document.getElementsByClassName('test');

co jest równoznaczne z zapisami:

document.getElements('.test');

oraz:

$$('.test');

getElementById

Metoda getElementById z pewnością wielu kojarzy się jako podstawowa metoda związana z obiektem document. Na czym polega różnica ? Otóż tą metodę możemy zastosować z każdym elementem dokumentu (nie tylko z obiektem document) i zawęzić krąg poszukiwań elementów do danego elementu. Jaką mamy z tego korzyść ? Czasami może się zdarzyć, że w dokumencie znajdują się dwa lub więcej elementów posiadające ten sam id - wtedy możemy wyselekcjonować jeden z nich na podstawie różniącego ich elementu nadrzędnego. Oczywiście powtarzające się identyfikatory elementów to błąd, ponieważ powinny być to nazwy unikalne, ale kto wie co nas spotka podczas pisania skryptu dla nie swojego dokumentu ? Dobra te 2 ostatnie zdania to oczywiście mały joke (choć czasami może mieć związek z brutalną rzeczywistością :P ) ;] Tak naprawdę korzyść z używania tej metody jest taka, że możemy sprawdzić czy element o danym identyfikatorze znajduje się wewnątrz określonego elementu. Dzięki temu mamy ułatwione zadanie w wypadku selekcji danego elementu pod warunkiem, że znajduje się w określonym miejscu drzewa dokumentu (wewnątrz pożądanego dokumentu).

$('id_elementu').getElementById('id_szukanego');

Na podsumowanie przykład zbiorczy dla wszystkich prezentowanych powyżej metod, gdzie prezentuję także kilka bardziej skomplikowanych sposobów ich użycia:

PRZYKŁAD

Apropo powyższego linka - wyselekcjonowane elementy są zaznaczane czerwonym obramowaniem w chwili najechania na dany "przycisk" wykonujący daną funkcję i są odznaczane po przesunięciu kursora znad obszaru "przycisku".

Internet Explorer jak zwykle nie zawiódł i ma lekkie problemy z kilkoma metodami, a dokładniej ich argumentami. W sumie to może nie tyle problemy to są co dziwne zachowanie - przy metodzie getElementById gdy dany element nie znajdował się w wymaganym miejscu wszystko ok - pojawia się alert itd. ale już gdy powinno pojawić się zaznaczenie (przedostatni button) IE wywala błąd o nieobsługiwanej metodzie, a żeby było fajniej to gdy najedziemy na "przycisk" z napisem $ES('li') nagle wspomniana metoda zaczyna działać O.o (i nie wywala błędu). Z innych ciekawych zjawisk zaobserwowałem jeszcze problemy z niektórymi operatorami - brak reakcji na $('obrazki').getElements('img[src=av.gif]') i zaznaczenie wszystkich obrazków mimo reguły img[src!=av.gif]. IE olał też sobie $('obrazki').getElements('img[src^=av]'), za to bezbłędnie zadziałał w przypadku $('structure').getElements('li[id=pierwszy] li[class=drugi]'), a przecież wcześniej operator = sobie olewał... Poprawnie też zadziałał w wypadku $('linki1').getElementsByClassName('link[rel=page]') O.o

No cóż IE zawsze potrafił zaskoczyć czymś i tym razem także nie zawiódł ;)

Na pocieszenie wszystkich testujących i tych, którzy zaraz zaczną pisać jaki ten mootools zły dodam, że z wymienionych wyżej błędów w mootools 1.11 został tylko jeden - ten zagadkowy z getElementById, która raz zwraca błąd, a raz działa poprawnie ;] Reszta błędów w najnowszej wersji mootools nie występuje ;] I na niej też oparłem ten przykład, ale dzięki temu co napisałem macie mały pogląd na to co się ulepszyło pomiędzy mootools 1.1, a mootools 1.11 ;]

Tak jeszcze dodam tylko, że właśnie sobie pobrałem najnowszą wersję mootools z SVN i ciepło mi się zrobiło jak zobaczyłem, że w mootools rev.676 rozbili opisywany tu przeze mnie plik na nową grupę Selectors i umieścili w niej dwa plik , ale z tego co obejrzałem w kodzie zmiany są duże ;] W każdym razie trzeba poczekać na wydanie stabilne (mootools 1.2 lub mootools 2.0) zobaczymy wtedy jak daleko pójdą zmiany w tej grupie funkcji (ale tak jak pisałem zmiany wyglądają na duże zwłaszcza, że sporo bugów powstawało gdy testowałem przykład na najnowszym mootools ;) ). W następnej części kursu opiszę plik Element.Filters.js, który rozszerzy funkcję $$ o możliwość filtrowania zwracanych przez nią elementów...