JavaScript: Odczytywanie i ustawianie treści

0:00Pokazywałem Ci przy okazji tworzenia elementów HTML, że możemy tworzyć również

0:04węzły tekstowe i w ten sposób jakby zarządzać treścią tekstową elementów.

0:10Natomiast mamy dwie fajne właściwości, które w dużo prostszy sposób pozwolą nam

0:15ustawić jakąś treść HTML, a także treść tekstową dowolnego elementu

0:19i to będę chciał Ci teraz pokazać, ale

0:21najpierw pokażę Ci, jak możemy za pomocą tych właściwości odczytywać jaki HTML

0:26znajduje się w elemencie albo jaki tekst tam się znajduje.

0:30Zatem pobierzemy sobie może do zmiennej cały ten kontener,

0:36za pomocą oczywiście document.querySelector po klasie container.

0:41I teraz, jeżeli chcielibyśmy odczytać jego

0:43wewnętrzny HTML, czyli to co tam jest w środku i pobrać sobie to jako string

0:48i to jest bardzo ważne, bo jeżeli przeczesywaliśmy to drzewo np.

0:51z użyciem właściwości children, którą Ci pokazałem, to ona nam zwracała obiekty,

0:56które są wewnątrz. Obiekty reprezentujące np.

0:59h1, h2 czy paragraf, na których mogliśmy wykonywać pewne operacje.

1:03Natomiast jeżeli chciałbym do języka

1:05JavaScript zwrócić sobie string z całym kodem HTML, to mogę to

1:10zrobić za pomocą właściwości innerHTML, ale to będzie string, czyli dokładnie tak

1:14samo jakbym sobie to skopiował i jakbym sobie utworzył taką stałą

1:19html i powiedzmy w takim Template String jakbym sobie to zapisał.

1:23Czyli to jest teraz string,

1:24to nie są żadne elementy html.

1:26Więc jak taki inner html sobie odczytać? Zrobimy to od razu

1:29w konsoli. Odwołamy się do container i mamy właściwość innerHTML.

1:33Ona wygląda dokładnie tak.

1:35I w dowolnym momencie możemy z niej skorzystać i zauważ, że

1:38zwróci nam to dokładnie taki HTML jak znajduje się w tym kontenerze, włącznie z

1:43tymi wszystkimi wcięciami, które są zrobione w kodzie.

1:46Odczytywanie samego HTML może nie często

1:50jest bardzo przydatne, chyba że chcielibyśmy to w jakiś sposób analizować

1:53albo gdzieś sobie przechować, zmienić treść elementu, potem to z powrotem

1:57wstawić, ale bardzo często będziemy sobie mogli w ten sposób ustawiać HTML wewnętrzny.

2:03Czyli ta właściwość innerHTML

2:05jest nie tylko do odczytu, ale również możemy ją ustawić.

2:09Zobacz, jeżeli byśmy sobie tutaj zrobili container.innerHTML

2:12i ustawimy mu tutaj podając string jakiś inny HTML,

2:18możemy również to podać w Template String

2:20żeby można było to złamać na wiele linii to możemy powiedzieć, że chcemy cały ten

2:23wewnętrzny html tego kontenera ustawić na coś zupełnie innego.

2:28Na przykład niech tam będzie h3

2:31i napiszemy nagłówek h3 i powiedzmy, że tylko tyle,

2:35nie będę nic więcej tutaj wstawiał. Tu możemy sobie zakończyć tę linijkę średnikiem.

2:38Po wykonaniu takiego kodu, zobacz na stronie zostanie tutaj tylko nagłówek h3.

2:43I co ciekawe my podaliśmy string, ale przeglądarka kiedy ten innerHTML

2:47ustawiała oczywiście musiała utworzyć te elementy, więc teraz na stronie moglibyśmy

2:52wyszukać takiego elementu h3 albo odwołać się do container

2:56Children i tam mielibyśmy wśród dzieci właśnie ten element h3, a nie byłoby już

3:01tam pozostałych elementów, które właśnie zostały usunięte.

3:05Wykomentują jednak tę linijkę, żebyśmy tego nie ustawiali.

3:08I teraz pokażę Ci, że możemy podobnie robić z treścią tekstową elementów.

3:13Czyli powiedzmy wyszukajemy sobie tego paragrafu.

3:16Będzie łatwo go znaleźć, bo jest tylko jeden na stronie, więc w

3:19zasadzie wystarczy, że zrobimy querySelektor p.

3:24I teraz będę chciał zmienić treść tego paragrafu.

3:26Mamy treść paragrafu.

3:28Chciałbym to ustawić na nowa treść paragrafu.

3:30Co ciekawe moglibyśmy to zrobić z użyciem

3:32innerHTML i tutaj wcale nie musimy podawać jakiś elementów HTML -owych.

3:36Możemy po prostu powiedzieć Nowa treść paragrafu i to też nam zadziała.

3:42Natomiast kiedy wiemy, że chcemy pracować

3:45tylko z tekstem, to powinniśmy korzystać z właściwości textContent. I ona po pierwsze

3:51co Ci pokaże pozwoli nam odczytać ten tekst

3:56i do języka JavaScript

3:57tutaj zwraca nam to po prostu jako string. Zobacz.

4:00Wyświetli się to w konsoli.

4:02Odczytaliśmy tekst jaki tam się znajdował.

4:05A po drugie będziemy mogli również

4:06ustawiać nowy tekst, czyli tutaj napiszemy textContent.

4:11Zaraz Ci jeszcze pokażę, czym to się różni od innerHTML.

4:13Ustawiłem sobie nowa treść paragrafu.

4:16Otóż jeżeli tutaj chciałbym sobie podać w

4:18środku, że jest jakiś element span, czyli podałem jakiś kod html,

4:23zauważ co stanie się na stronie.

4:24Ten span nie zostanie potraktowane jako normalny element html, tylko będzie tutaj

4:29po prostu wyświetlony. Czyli jak byśmy sobie zerknęli,

4:33będzie to wyglądać w ten sposób.

4:35Natomiast jeżeli chcielibyśmy, żeby takie elementy wewnątrz tego stringa były

4:38traktowane jak elementy html, wtedy należy korzystać z innerHTML.

4:42I podobnie jest przy odczytywaniu. Jak tutaj sobie odczytaliśmy container.innerHTML

4:46to widzisz, że nam to zwróciło dokładnie kod HTML.

4:51A gdybym odczytał textContent,

4:53zobacz,

4:55zwróciłoby nam to same węzły tekstowe

4:58można powiedzieć w formie stringu. Czyli zostały wycięte wszystkie elementy HTML,

5:02ale cała zawartość tekstowa z wszystkich tych elementów została tutaj zwrócona.

5:07Cofnę jednak do takiej postaci.

5:09Na koniec pokażę Ci jeszcze, że możemy odczytywać i ustawiać outerHTML, czyli

5:14w momencie kiedy zrobiliśmy container.innerHTML to odczytaliśmy sobie to,

5:19co jest wewnątrz takiego kontenera, czyli dokładnie to wszystko,

5:22a gdybyśmy chcieli odczytać kod wraz z tym elementem, czyli jakby cały ten element i

5:26jego zawartość, to moglibyśmy zrobić console.log

5:29container.outrerHTML

5:32w ten sposób zobacz.

5:35I teraz otrzymaliśmy tutaj cały ten kod wraz z tym elementem.

5:38I gdybyś przypisał outerHTML na coś

5:41innego, to tak naprawdę zamienisz cały ten element na nowy kod, który podasz.

5:46Jak zatem widzisz, w ten sposób można pracować z treścią elementów.

5:50Jeżeli jest to treść tekstowa, można ją

5:51odczytać za pomocą textContent i ustawić również w ten sposób.

5:55Jeżeli chodzi o kod HTML, możemy to odczytać i ustawić za pomocą innerHTML.

6:00I teraz to, co jest bardzo ważne, tutaj być może widzisz jaka jest różnica pomiędzy

6:04tym a manualnym tworzeniem poszczególnych elementów i wstawianiem ich z użyciem np.

6:09append. Chodzi tutaj o to, że możemy od razu podać

6:12cały string jaki chcemy ustawić tak jak tutaj

6:15zrobiłem to w tym przypadku.

6:16Możemy podać od razu dużo elementów i

6:18chcemy taki wewnętrzny HTML na kontenerze ustawić.

6:21Natomiast gdybyśmy chcieli je pojedynczo

6:23tworzyć, musielibyśmy za pomocą createElement utworzyć h3,

6:27potem np. jakiegoś div, gdybyśmy również go tutaj

6:30chcieli i pojedynczo musielibyśmy je wstawiać do takiego elementu.

6:33To nie oznacza, że tworzenie elementów i korzystanie np. z append nie ma sensu.

6:38Jak najbardziej ma sens np. jak byśmy chcieli stworzyć dynamiczny przycisk,

6:42wstawić go gdzieś do strony czy jak byśmy chcieli stworzyć link i nie nadpisywać

6:46całego HTML -u jakiegoś kontenera, ale tylko dodać do niego taki element.

6:51Wtedy jak najbardziej warto to robić,

6:52natomiast jeżeli są sytuacje gdzie cały

6:54HTML chcemy zmienić, wtedy możemy skorzystać z innerHTML.