JavaScript: Relacje między elementami

0:00W tej lekcji pomówimy trochę o relacjach

0:02między elementami w Obiektowym Modelu Dokumentu

0:05i mam na myśli takie relacje jak w rodzinie,

0:07czyli dzieci, czyli rodzice, czyli rodzeństwo.

0:11I teraz jak sobie rzucimy okiem na tę listę ul, to powiedzmy dla tego elementu

0:16li jego rodzeństwem będą wszystkie te elementy, które znajdują się obok niego,

0:20natomiast jego rodzicem będzie ten element ul.

0:23Dla tego elementu ul rodzeństwem będzie h1

0:26a rodzicem będzie ten element container,

0:28z kolei section będzie jakimś przodkiem.

0:31Dlaczego to jest istotne?

0:32Otóż dlatego, że mając uchwyt do jakiegoś

0:35elementu powiedzmy jak sobie wyszukamy ten element ul w drzewie DOM

0:39i zrobiłem to już tutaj możemy się odwołać właśnie do jego dzieci, rodzeństwa itd.

0:44Będę chciał Ci pokazać na czym to polega.

0:47Najpierw będę chciał się odwołać do wszystkich dzieci tego elementu ul.

0:51Więc utworzymy sobie taką stałą children i mając już odwołanie do tej listy

0:55napiszemy childNodes. I teraz wyświetle sobie to w konsoli.

0:59W zasadzie możemy to od razu zrobić w

1:01przeglądarce, children, bo chcę Ci pokazać co tam się znajdzie.

1:05Mamy jakąś kolekcję NodeList.

1:07Jeżeli to jest kolekcja to jest to obiekt tablicopodobny, gdzie możemy po prostu w

1:10ten sposób się odwoływać do elementów, czyli użyć tego w pętli for i tak dalej.

1:15Ale jak sobie podejrzymy co dokładnie tam jest to zauważ, że dziwnie to wygląda, bo mamy

1:19jakiś tekst, potem li, potem znowu tekst itd.

1:23Tutaj na przykład mamy komentarz. Chcę Ci powiedzieć dlaczego tak jest.

1:27Otóż tak naprawdę my tego nie widzimy, ale wewnątrz tego elementu

1:32ul mamy tekst i tym tekstem jest choćby tego się nawet nie da zaznaczyć,

1:37ale tutaj ten odstęp, ten tabulator.

1:40Gdybyśmy zrobili tak, to nie byłoby tutaj tego pierwszego dziecka,

1:44natomiast jak ja zapiszę, to edytor mi to reformatuje.

1:47Czyli można powiedzieć, że childNodes zwraca nam kolekcję wszystkich dzieci, nie tylko

1:52elementów HTML, ale także węzłów tekstowych czy np.

1:55komentarz.

1:57To nie jest zbyt przydatne w takiej

1:58codziennej pracy, ale warto wiedzieć, że komentarz też jest swego rodzaju węzłem w

2:03Obiektowym Modelu Dokumentu, na którym moglibyśmy wykonywać jakieś czynności.

2:08Nam to nie będzie potrzebne,

2:09ale widzisz już teraz, że childNodes

2:12zwraca nam wszystkie dzieci danego elementu, no i w tym przypadku

2:17może to dla nas nie być jakby pożądana akcja, czyli to, co chcemy uzyskać.

2:22Dlatego możemy zrobić również podobną rzecz i napisać elementChildren

2:27i odwołamy się do tej listy i następnie do children.

2:31To się różni od tego zapisu tym, że zwraca nam tylko elementy HTML, czyli tylko te

2:36dzieci, które są prawdziwymi elementami HTML a więc będą to te elementy li.

2:42Zobaczmy teraz, element children zwraca nam HTML Collection.

2:47To znowu jest taki obiekt tablicopodobny i mamy tutaj tylko elementy li.

2:51Więc to może być w wielu sytuacjach po prostu to, czego potrzebujesz.

2:56Mamy jeszcze kilka ciekawych skrótów, które chciałbym Ci pokazać.

2:59Na przykład możemy powiedzieć first

3:01i w tej liście ul wyszukać sobie firstChild

3:04i to nam zwróci znowu pierwsze dziecko, którym w tym przypadku będzie

3:08jakiś tekst, który tutaj jest taki nowy wiersz i tabulator,

3:13my tego tutaj nie widzimy, ale dokładnie to będzie to.

3:16Natomiast możemy powiedzieć firstElement

3:18i wtedy odwołujemy się do tej listy i mówimy firstElementChild.

3:24Więc też zazwyczaj to jest to, czego byśmy oczekiwali.

3:27Oczywiście moglibyśmy również zrobić coś

3:28takiego, czyli list.querySelector i podać CSS -owy selektor taki jak first-child.

3:35To nam zwróci dokładnie to samo co taki zapis.

3:37To jest tylko po prostu skrót

3:39i jest to zapis, który istniał po prostu wcześniej.

3:41Ja czasami z niego korzystam.

3:43Podobnie będzie w przypadku last.

3:44Możemy się odwołać do listy i powiedzieć lastChild.

3:48W tym przypadku będzie to chyba komentarz, który tutaj dodaliśmy.

3:51A może jeszcze jakiś tekst zanim się znajduje,

3:53natomiast jeżeli powiemy lastElement,

3:57to możemy skorzystać z właściwości, która nazywa się lastElementChild.

4:03Oczywiście nie tylko na elemencie li można z

4:05tego korzystać czy na elemencie ul, ale na dowolnym węźle, który się tutaj

4:10znajduje, czyli na dowolnym elemencie HTML

4:12możemy się w ten sposób odwoływać do jego dzieci.

4:14Oczywiście, jeżeli takiego dziecka nie będzie, to tutaj zostanie zwrócone null.

4:19Pokażę Ci teraz, że możemy również się odwoływać do rodzeństwa.

4:22Powiedzmy, że mamy już pobrany ten

4:23pierwszy element i chcielibyśmy zobaczyć, jaki jest jego następny

4:28można powiedzieć brat czy jakieś jego

4:30rodzeństwo, a więc kolejny element, który się za nim znajduje.

4:33Skoro firstElement tutaj już nam zwróciło to pierwsze li

4:38to możemy powiedzieć coś takiego jak second i odwołamy się do firstElement.

4:42Czyli na dowolnym elemencie możesz się

4:44odwołać do nextSibling, czyli następne rodzeństwo.

4:49I znowu nextSibling może nam zwrócić

4:51element, ale równie dobrze może zwrócić textNode.

4:55Natomiast jeżeli będziemy chcieli

4:58pobrać sobie konkretnie element, to wtedy mówimy nextElementsSibling.

5:04Czyli jak widzisz to jest taka konwencja,

5:05że wszędzie tutaj dodajemy element i wtedy mamy pewność, że nie zostanie zwrócony np.

5:09węzeł tekstowy czy komentarz, ale konkretny element.

5:12I zazwyczaj właśnie o to nam chodzi.

5:14Podobnie możemy się odwołać do poprzedniego elementu.

5:17Czyli powiedzmy będziemy chcieli się

5:19odwołać do przedostatniego elementu, a więc napiszemy lastButOne,

5:24coś takiego i odwołamy się tutaj, tym

5:27razem do lastElement i do previousSiblingling

5:34i teraz zrobimy lastButOneElement,

5:36bo to previousSibling znowu tak jak wcześniej może nam zwrócić np.

5:39węzeł tekstowy,

5:41natomiast previousElementSibling zawsze zwróci nam poprzedni element.

5:46A zatem jak odwołaliśmy się do ostatniego

5:48li, czyli do tego i powiedzieliśmy previousElementSibling

5:52zwróci nam to właśnie takie li.

5:55No i na koniec pokażę Ci jeszcze, że możemy odwołać się do rodzica.

5:58Więc mając uchwyt do jakiegoś elementu li, np.

6:01do tego pierwszego elementu, jeżeli z

6:03niego chcielibyśmy się odwołać do rodzica czy do ul, to moglibyśmy powiedzieć tak

6:07parent równa się firstElement.parentNode.

6:13Jak się możesz domyślić, gdybym tutaj

6:14znowu napisał parentNode to odwołał bym się do kolejnego rodzica.

6:17Czyli będąc już na ul dostałbym tego diva.

6:21Czyli będę miał wtedy do niego odwołanie

6:22dokładnie takie samo jak byśmy go znaleźli np. z użyciem querySelector.

6:26Czyli wszystkie operacje na nim możesz normalnie wykonywać.

6:29Nazwijmy sobie to może parentElement żeby

6:31wiedzieć, że tutaj zawsze otrzymamy element taki HTML -owy.

6:35I teraz na początku nauki tego obiektowego

6:37modelu dokumentu możesz sobie zadawać pytanie kiedy z tego skorzystam?

6:41Po co jest mi to potrzebne?

6:42Oczywiście przede wszystkim chciałem Ci to wszystko pokazać, żebyś wiedział jakie są

6:45możliwości przeskakiwania po tym drzewie DOM,

6:48natomiast chcę Ci szybko podać taki

6:50praktyczny przykład, gdzie mogłoby się to przydać, którego ja tutaj nie tworzyłem,

6:54żeby nie tracić czasu, ale myślę, że jesteś w stanie sobie go wyobrazić.

6:58Zobacz, mamy tutaj elementy listy i wyobraź sobie, że są to gwiazdki.

7:01Jak mamy czasami takie systemy oceny,

7:03piszemy jakiś komentarz i możemy zaznaczyć np.

7:06od 1 do 5 gwiazdek.

7:07Wyobraź sobie, że są to gwiazdki koło

7:08siebie i będziemy chcieli przypisać zdarzenie po najechaniu myszą.

7:12O zdarzeniach jeszcze powiem później w tym kursie, ale będziemy mogli zrobić tak, że

7:16po najechaniu myszą na jakiś konkretny element wywoła się nasza funkcja.

7:20I teraz w tej funkcji będziemy mieli dostęp do tego elementu.

7:22Więc wyobraź sobie, że najechaliśmy na czwartą gwiazdkę,

7:25jeżeli to byłyby gwiazdki i mam odwołanie do tego konkretnego elementu li. To na tym

7:30elemencie mógłbym w pętli while zrobić sobie coś takiego while

7:34previousSibling czyli tak długo jak jest zwracany previousSibling to będziemy chcieli

7:39ten previousSibling, czyli takie li dodać sobie do jakiejś tablicy.

7:42Pętla while znowu się wykona na tym jakby

7:44elemencie, previousSibing znowu dodamy do tablicy i znowu dodamy.

7:47W ten sposób po najechaniu na czwarty element moglibyśmy ten element oraz

7:51wszystkie jego previousSibling dodać do jakiejś tablicy i w następnym kroku na

7:56wszystkich tych elementach dodali byśmy np.

7:58klasę isActive, która by sprawiła, że gwiazdki byłyby zaznaczone np.

8:02na żółto.

8:03Mam nadzieję, że jesteś sobie w stanie to wyobrazić.

8:05Więc to byłby jeden z takich praktycznych

8:07przykładów jak po najechaniu na czwartą gwiazdkę zaznaczyć tą czwartą i trzy

8:12poprzednie dodając im jakieś klasy.

8:15Więc właśnie w ten sposób byśmy to zrobili.

8:16previousElementSibling i w takiej pętli while, czyli tak długo jak są poprzednie elementy

8:22dodajemy sobie je do jakiejś tablicy, a potem na tej tablicy wykonujemy pętle i każdemu z tych

8:26elementów dodajemy jakąś klasę, która podświetli taką gwiazdkę.

8:30To zatem tyle, jeżeli chodzi o takie

8:32najważniejsze właściwości obiektów, które pozwalają nam przeczesywać drzewo DOM.