JavaScript: Wstawianie i usuwanie elementów ze strony
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
Powoli zaczynamy łączyć ze sobą wszystkie te elementy, które po kolei poznajesz i poznałeś już jak tworzyć
elementy.
Teraz pokażę ci jak możemy je na stronę wstawiać lub też ze strony usuwać, przy okazji od razu przygotowałem
takie dwie listy.
Jak widzisz, mamy tu kilka elementów.
Tutaj również jest osobna lista i kilka elementów w kodzie HTML wygląda to następująco, listy mają identyfikatory
i od razu pobrałem je do zmiennych, list1,
list2,
jak widzisz poprzez querySelector pobrałem je sobie
tutaj bez problemu, czyli mamy tutaj referencje do takiej listy i do listy drugiej pod spodem zrobiłem
już od razu to co pokazałam ci w poprzedniej, więc utworzyłem nowy element li.
Jak wspominałem zmienna ma dowolną nazwę, nie ma nic wspólnego z tym, document.createElement li,
czyli mamy nowy element, który nigdzie nie jest jeszcze wstawiony, a pod spodem otworzyłem tekst poprzez
createTextNode i mamy tutaj treść i teraz będę chciał ci pokazać, jak możemy do tego elementu li wstawić
sobie ten oto tekst.
Wspominałem ci, że taki tekst jest to obiekt, więc ma również różne właściwości czy metody.
Ale na razie nie będziemy się nimi zajmować.
Natomiast odwołamy się do li, który ma metodę appendChild.
Każdy element HTML również takie elementy jak body, do których się możemy odwołać np. przez document
kropka body, będą miały taką metodę, czyli appendChild.
Dzięki tej metodzie możemy tutaj dodać sobie dowolny element jako dziecko tego elementu li.
Może to być element utworzony w taki oto sposób, czy jakiś element HTML lub na przykład węzeł tekstowy.
Dlatego właśnie możemy tworzyć takie węzły tekstowe poprzez createTextNode, żebyśmy mogli je później poprzez
appendChild dodwać.
Czyli jeżeli teraz wpiszę tutaj tekst i odświeżymy, a w konsoli wpiszę li, to okaże się że ten li nie
jest pusty ale ma wewnątrz treść.
Właśnie, dlatego że ją sobie poprzez appendChild dodaliśmy i teraz będę chciał ten element li,
który ma już w sobie tą treść, dodać na stronę, aby był on dla nas widoczny.
Możliwości jest kilka.
I być może się domyślasz, że skoro li ma taką metodę jak appendChild, no to taka lista ul, którą tutaj zapisaliśmy
ta lista, też jak najbardziej powinna mieć taką metodę.
No i oczywiście tak jest, więc możemy się odwołać do list1.appendChild i podamy tutaj li, czyli tak naprawdę
podajemy referencje do tego co to zostało utworzone. Cały czas bazujemy na tych referencjach już powinneś
w tym kursie wiedzieć na czym to polega.
No i ten element zostanie wstawiony na stronę do tej pierwszej listy, zobaczymy. Jak widzisz na sam koniec
taki element li został dodany poprzez appendChild.
Co jest ciekawe my nie tracimy do niego referencji.
Tutaj był on utworzony i w tym momencie on nie był nigdzie na stronie.
Ale jeżeli tutaj byśmy się odwołali do li, to cały czas mamy do niego referencje.
Pomimo tego, że jest on na stronie możemy bez problemu na nim operować.
Czyli jakby nie ma znaczenia, czy on jest wystawiony na stronę czy jest tutaj tylko w pamięci.
Ciągle mamy do niego referencje pod tą zmienną. Możemy sobie dowolnie na nim operować.
Teraz pokażę ci kilka innych metod, jak możemy w odpowiednie miejsce wstawić taki element poprzez
appendChild.
Zawsze dodamy ten element na sam koniec elementu do którego dodajemy.
W tym przypadku lista ul,
na sam koniec dodała element li,
więc to wykomentuje, on się na stronie nie pojawi i teraz pokażę ci jak możemy go dodać w inne miejsce.
Znowu odwołamy się do listy pierwszej i mamy taką metodę jak insertBefore.
Ona oczywiście będzie dostępna nie tylko na ul, ona będzie dostępna na div'ie, na h1.
Nie ma to znaczenia. Czyli chcemy wstawić jakiś element przed jakiś inny element. Odwołaliśmy się do list1,
więc tu będziemy wstawiać chcemy wstawić przed. Ale co chcemy wstawić musimy podać li, czyli tak
jak w appendChild, czyli mówimy tutaj wstaw ten element li do elementu, który pobraliśmy do list.
Ale wstaw go przed konkretnym elementem, czyli jako drugi parametr musimy podać referencje do elementu,
do obiektu przed którym chcemy go wstawić.
I teraz pokażę ci taką konstrukcję, która wyda ci się zaawansowana, ale wcale nie jest i zaraz cię wytłumaczę.
Wklejam to od razu tutaj.
I co tutaj się dzieje? Poprzez list1 querySelector, czyli w list1 w tej liście, chcemy coś znaleźć,
querySelector,
taki oto Selector CSS3 zastosowałem. Chcę znaleźć element li, który jest drugim elementem.
To nie ma nic wspólnego z JavaScript'em, to jest dostępne w CSS3, więc mam nadzieję że znasz taki zapis
i poprzez querySelector możemy właśnie wyszukać element li,
który jest drugi, czyli będzie to ten element i w tej metodzie mówimy wstaw nasz li przed tym właśnie
elementem
1
2
Zapiszmy i zobaczmy czy nam to w ten sposób zadziała.
No i dokładnie tak się stało.
Czyli tak naprawdę pobierając tutaj ten element, tutaj nam do niego zostaje zwrócona referencja.
Oczywiście on mógłby być zapisany w zmiennej, tutaj nazwy zmiennej byśmy podali, czyli przed tym elementem chcemy
wstawić element li, wykomentuje to i przejdziemy do kolejnej metody.
Ponownie wrócimy do appendChild, bo chce ci pokazać jedną zaskakującą rzecz, która jest bardzo przydatna
odwołamy się do list1 i do appendChild i będę chciał tutaj
do tej naszej pierwszej listy, czyli dodaj wstawić element, który już w niej się znajduje, czyli ten element.
Spróbujemy go sobie pobrać.
Odwołamy się do list1 i wewnątrz będziemy poprzez querySelector chcieli znaleźć element, który jest
pierwszy. Znowu takim zapisem CSS3 możemy napisać firstChild, mam nadzieję, że znasz taki zapis,
czyli pierwszy element w list1, to jest ten element, sobie pobieramy i chcemy go wstawić do tej listy poprzez
appendChild.
Pamiętasz, że appendChild wstawia na końcu.
Więc co się stanie?
Czy ten element zostanie skopiowany i ustawiony na koniec czy też nie?
Zobaczymy.
No i się okazuje, że ten element nie został skopiowany, ale został z pierwszego miejsca zdjęty i ustawiony
na ostatnie.
I to jest bardzo ważne.
Jeżeli jakiś element już się tutaj znajduje, a my chcemy go od nowa wstawić to po prostu zamieniana jest
jego kolejność.
Jest to bardzo, bardzo ważne, czyli pierwszy element przerzuciliśmy na sam koniec poprzez właśnie
appendChild.
Teraz chciałbym Ci pokazać w jaki sposób możemy elementy usuwać.
Otóż nie możemy się odwołać do konkretnego elementu i go usunąć.
Czyli znajdziemy taki element li i na nim mamy jakąś metodę remove. Musimy zawsze do jego rodzica się
odwołać, więc odwołajmy się na przykład. Może teraz do drugiej listy, czyli do tej listy i spróbujmy usunąć
ostatni element.
Odwołamy się do list2, a następnie removeChild, czyli usuń dziecko.
W ten sposób i tutaj musimy podać, o który element nam chodzi, czyli odwołamy się znowu do list2 i możemy
poprzez querySelector albo pamiętaj dowolną inną metodę znaleźć taki element querySelector i podamy tutaj
last-child, znowu Selector CSS, który pozwala nam wybrać ostatni element, czyli list2,
tutaj, wyszukujemy ostatniego elementu i mówimy, że chcemy go usunąć.
Odświeżmy i taki element jak widzisz z naszej strony zniknął.
Na koniec chcę Ci pokazać że mamy jeszcze jedną przydatną metodę, która nazywa się replaceChild,
czyli zamień dziecko i znowu może tym razem
do list1 się odwołamy replaceChild i tutaj musimy podać element, który chcemy jakby wstawić, podajemy
nasze li z treścią, które utworzyliśmy i chcemy, aby ono zamieniło element powiedzmy ostatni, czyli
list querySelector.
I znowu podajemy tutaj lastChild,
w ten sposób, czyli ostatni element tej pierwszej listy powinien zostać zamieniony z treść.
Zobaczmy.
Tak też się stało.
Jak możesz zobaczyć.
Na koniec warto pamiętać, że tutaj wszędzie musimy podać referencje do konkretnego obiektu, więc gdybyś
skorzystał np. z metody querySelectorAll, która zwraca obiekt tablicopodobny, to musiałbyś tutaj napisać
jeszcze 0.
Czyli zwrócić konkretny element z takiej właśnie pseudotablicy.
Jest to bardzo. bardzo istotne.
Kod
Wstawianie i usuwanie elementów ze strony · 1 min
var list1 = document.querySelector("#list1"),
list2 = document.querySelector("#list2");
var li = document.createElement("li"),
text = document.createTextNode("Treść");
li.appendChild(text);
// list1.appendChild(li);
// list1.insertBefore(li, list1.querySelector("li:nth-child(2)"));
// list1.appendChild(list1.querySelector("li:first-child"));
// list2.removeChild(list2.querySelector(":last-child"));
list1.replaceChild(li, list1.querySelector(":last-child"));