JavaScript: innerHTML, outerHTML oraz textContent
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.
W tej lekcji pokażę ci kilka przydatnych właściwości, z których możemy korzystać na elementach HTML, które pozwolą
nam ustawiać ich treść na nowy kod lub też na nowy tekst.
Przejdziemy od razu do kodu HTML, abym pokazał co tutaj mamy.
Mamy dla div'a z identyfikatorem container. Nagłówek h2 i paragraf.
Ja sobie w skrypcie zapisałem od razu tutaj dostęp, czyli referencje do containera właśnie i do paragrafu. Zauważ, że ja
tutaj odwołałem się poprzez container do , czyli paragraf tutaj zostanie zapisany i teraz pokażę ci kilka
przydatnych właściwości, z których warto korzystać.
Na początek odwołamy się do console.log, bo chciałbym wyświetlić to w naszej konsoli i do container i do
InnerHTML, tutaj z dużych.
Czyli taka właściwość InnerHTML powinna nam zwrócić cały kod HTML, który znajduje się wewnątrz.
Zobaczmy, console.
Tak też się stało.
Natomiast co warto wiedzieć. Sprawdźmy tutaj typeof, co to jest.
Okazuje się, że jest to string, czyli innerHTML zwraca nam zawartość HTML takiego elementu, ale nie zwraca
nam żadnych elementów, czyli to co tutaj widzimy,
to nie są elementy h2 czy paragraf to jest po prostu tekstowa reprezentacja, czyli jakby kod HTML, który
znajduje się w takim oto elemencie. Przy okazji widzisz z wszystkimi tabulatorami, które tam się znajdowały.
Natomiast innerHTML jest o tyle ciekawe, że możemy również używać go do przypisywania nowej treści do
elementów. Zaraz ci to pokaże.
Natomiast zanim do tego przejdziemy, chciałbym pokazać ci jak zamiast kodu HTML, pobrać tekst. Zrobimy
to samo w console.log z paragrafem, czyli para.innerHTML i zobaczmy co nam to zwróci.
Mamy tutaj treść paragrafu. Jak widzisz treść paragrafu,
nie ma problemu natomiast, jeżeli chcemy się odwołać typowo do tekstu, to zamiast innerHTML, skorzystajmy
z textContent.
W ten oto sposób. Tutaj wygląda to dokładnie tak samo, ale zauważ co stanie się jeżeli tutaj będę chciał
skorzystać z textContent, a nie z innerHTML.
Okaże się, że wszystkie tagi zostały wycięte, a mamy tylko reprezentację tekstową tego co tam się znajdowało,
więc jest to istotna różnica.
InnerHTML pobiera cały kod HTML, a textcontent tylko zawartość tekstową, wycinając wszystkie elementy
HTML i teraz obydwie te właściwości pozwalają na przypisanie nowych wartości, więc mogę tutaj napisać
np. PARA czyli paragraf, InnerHTML równa się nowa treść.
Nie ma problemu, zadziała to i zobaczysz, że treść paragrafu zamieni się na nowa treść.
Mimo tego, że nie odwołałem się do textContent, ale do nowa treść. Natomiast gdybym tutaj zrobił to w ten
sposób, to co jest bardzo ciekawe, to właśnie innerHTML ustawi nową treść i zamienić to na elementy HTML,
czyli wszystko sparsuje. Widzisz, że jest to pogrubione.
Mamy tutaj wewnątrz elementy właśnie b, czyli w tym momencie jest to zwykły string i przypisując taki
string do nowego elementu nie możemy wcześniej tak jak w przypadku createElement odwołać się do tego
b.
I nie możemy przypisać mu jakiejś klasy itd. z przestawieniem na stronę.
Więc dopiero po wstawieniu tego w ten sposób. Gdybyśmy pod spodem chcieli, w paragrafie, wyszukać element
b,
to on został dodany do drzewa DOM i tu się znajduje.
Natomiast dodaliśmy to w takiej oto formie.
Tu oczywiście moglibyśmy dodać klasę, jakąkolwiek.
I to wszystko zostanie sparsowane przez przeglądarkę i wstawione do tego elementu p.
Natomiast lepiej skorzystać tutaj z para.textContent, jeżeli chodzi nam tylko o przypisanie treści
tekstowej i napisać nowa treść.
W ten sposób. To możemy wykomentować i tutaj zostanie dodana po prostu nowa treść.
Teraz pokażę ci kolejną właściwość, która nazywa się outerHTML, bo Inner HTML pobrało nam wszystko, co
w takim kontenerze się znajduje.
Sprawdźmy raz jeszcze.
A co to będzie outerHTML?
Może sobie to wykomentuję, aby nam nie przeszkadzało i przejdziemy niżej znowu console.log container autor outerHTML, czyli
jakby zewnętrzny HTML.
No i okazuje się, że outerHTML to nie tylko to, co jest w środku, ale także element, na którym wykonaliśmy
właśnie taką właściwość, odczytaliśmy
tego elementu, czyli tutaj został nam pobrany cały ten element i teraz możesz się zastanawiać co się stanie z tego elementu.
Jeżeli nadpiszemy outerHTML, bo InnerHTML działa w ten sposób, że po prostu zresetuje wszystko, co było
w takim elemencie. Nieważne, co się tam znajdowało.
Tak jak tutaj, wszystko zostanie wyrzucone i zastąpione nowym kodem.
A co stanie się kiedy, użyjemy outerHTML.
No to może sprawdźmy, container outerHTML przypiszmy i przypiszemy tutaj taki string.
Jak widzisz chce wszystko zastąpić takim nowym div'em z identyfikatorem container, który w środku ma
paragraf, treść i zakończmy tego div'a.
Zobaczmy jak to zadziała i okazuje się, że zadziałało.
Mamy tutaj container, czyli nasz stary container został zamieniony nowym i mamy środku treść.
Natomiast jedna ciekawa rzecz.
Mieliśmy tutaj w zmiennej container, czyli element z takim identyfikatorem. Ja go nadpisałem nowym elementem z
takim samym identyfikatorem.
Więc pytanie brzmi, co jeżeli odwołamy się teraz do container.
Zobaczmy.
Okazuje się, że taki div istnieje, ale po najechaniu na niego, nie jest on podświetlany na stronie.
Czyli to nie jest ten sam element.
W tym momencie, ten element zastąpiliśmy zupełnie innym, który tutaj został z sparsowany, a tamten cały
czas siedzi w pamięci i mamy go pod tą zmienną.
Ale, że w HTML'u nie możesz mieć dwóch elementów o takim samym id, to odwołamy się teraz do id tego
elementu i zmienimy je np. na container2.
Pamiętasz, że możemy użyć setAttribute.
Albo tak jak już mówiłem, skrótu czyli id. Napiszmy container2.
Mam nadzieję, że to rozumiesz.
Element, który zniknął ze strony cały czas jest tutaj, przechowywany.
Ma on id container, ale nie możemy go wstawić na stronę
z takim właśnie id.
Więc nadaje mu id container2.
I teraz wstawie go na strone poprzez dokument body.appendChild.
W ten sposób, zobaczmy i teraz jeśli przejdziemy do elements, to mamy container, który zastąpił nam poprzedni
container, a ten z id 2 został ustawiony tutaj.
To jest tylko taka ciekawostka, w jaki sposób to działa.
Zapamiętaj z tego tyle, że jeżeli będziesz chciał ustawić jakiś wewnętrznych kod HTML od razu na jakiś
ciąg, w którym będą różne elementy, te elementy to jest na razie tylko tekst, ale możesz poprzez innerHTML
to przypisać do dowolnego elementu.
I to wszystko zostanie sparsowane przez przeglądarkę i drzewo DOM zostanie utworzone.
Natomiast, jeżeli chcesz utworzyć samemu taki element, poprzez document.createElement np. div, dodać mu
id, dodać mu jakiś tekst, a dopiero później wstawić go na stronę, to musisz to zrobić właśnie tak jak teraz
opisałem, a nie poprzez taki tekst, bo dopiero po wstawieniu tego tekstu na stronę, możesz na stronie wyszukać
takiego elementu.
Kod
innerHTML, outerHTML oraz textContent · 1 min
var container = document.querySelector("#container"),
para = document.querySelector("#container p");
// console.log( container.innerHTML );
// console.log( para.textContent );
// para.innerHTML = "<b>Nowa treść</b>";
para.textContent = "Nowa treść";
console.log( container.outerHTML );
container.outerHTML = "<div id='container'><p>Treść</p></div>";
container.id = "container2";
document.body.appendChild(container);