JavaSamouczek DOM skryptu z przykładem
Jamesa Hartmana
⚡ Inteligentne podsumowanie
JavaSkrypt DOM i zdarzenia zapewniają skryptom pełną kontrolę nad stroną internetową, umożliwiając kodowi odczytywanie, zmienianie, dodawanie lub usuwanie dowolnych elementów renderowanych przez przeglądarkę, a następnie natychmiastową reakcję za każdym razem, gdy odwiedzający kliknie, napisze lub przewinie stronę.
W czym jest DOM JavaScenariusz?
JavaSkrypt może uzyskać dostęp do wszystkich elementów strony internetowej, korzystając z modelu DOM (Document Object Model). Przeglądarka internetowa tworzy DOM strony internetowej podczas jej ładowania. Model DOM jest tworzony jako drzewo obiektów, takie jak to:
Każdy element HTML na stronie staje się węzłem w tym drzewie. Przeglądarki grupują węzły DOM na kilka podstawowych typów: węzły elementów reprezentują tagi, takie jak <p> or <div>Węzły tekstowe przechowują widoczne słowa wewnątrz znacznika, węzły atrybutów przechowują wartości takie jak id or classi węzły komentarzy zachowują <!-- --> znacznik. Najwyższy węzeł to zawsze document obiekt, a każdy inny element jest jego potomkiem.
Korzystając z DOM, JAVASCRIPT Może wykonywać wiele zadań. Może tworzyć nowe elementy i atrybuty, zmieniać istniejące elementy i atrybuty, a nawet usuwać istniejące elementy i atrybuty. JavaSkrypt może również reagować na istniejące zdarzenia i tworzyć nowe zdarzenia na stronie. Poniższe sekcje opisują wybieranie elementów, ich modyfikowanie i podłączanie procedur obsługi zdarzeń za pomocą praktycznych, uruchamialnych przykładów.
Warto pamiętać, że DOM to nie to samo, co plik źródłowy HTML. HTML pobierany przez przeglądarkę to tekst statyczny, ale DOM budowany na jego podstawie to żywy, dynamiczny model obiektowy. Każda zmiana JavaSkrypt powoduje, że DOM pojawia się na ekranie natychmiast, bez konieczności ingerencji w oryginalny plik HTML.
Jak wybierać elementy DOM w JavaScenariusz
Przed JavaSkrypt może zmienić cokolwiek na stronie, najpierw musi wybrać węzeł docelowy. DOM udostępnia kilka metod selektora, z których każda jest dostosowana do innej sytuacji:
- pobierzElementById(): zwraca pojedynczy element, który pasuje do podanego
idatrybutów. - pobierzElementyByClassName(): zwraca żywą kolekcję HTMLCollection każdego elementu, który zawiera daną klasę.
- pobierzElementyByTagName(): zwraca kolekcję HTMLCollection na żywo każdego elementu z podaną nazwą znacznika, taką jak
porli. - selektor zapytania(): zwraca pierwszy element pasujący do dowolnego selektora CSS.
- querySelectorAll(): zwraca statyczną listę NodeList wszystkich elementów pasujących do selektora CSS.
Poniższa tabela porównuje cztery najczęściej stosowane metody selekcji, co pomoże Ci wybrać właściwą metodę dla danego stanowiska.
| Metoda wykonania | Zwroty | Najlepiej stosować, kiedy |
|---|---|---|
| pobierzElementById | Pojedynczy element | Znasz dokładny i unikalny identyfikator celu. |
| getElementsByClassName | Kolekcja HTML na żywo | Każdy element musi mieć jedną wspólną nazwę klasy. |
| zapytanieSelektor | Pojedynczy element (pierwsze dopasowanie) | Chcesz użyć dowolnego selektora CSS, nie tylko id lub class. |
| zapytanieSelectorAll | Statyczna lista węzłów | Musisz powtórzyć każde dopasowanie za pomocą pętli forEach. |
querySelector i querySelectorAll akceptują dowolny poprawny selektor CSS, co czyni je najbardziej elastycznym wyborem dla nowoczesnego kodu. Wypróbuj poniższy fragment kodu na stronie zawierającej element z id="title" i kilka elementów z class="item":
const heading = document.getElementById("title"); const itemsByClass = document.getElementsByClassName("item"); const firstItem = document.querySelector(".item"); const allItems = document.querySelectorAll(".item"); console.log(heading.textContent, itemsByClass.length, allItems.length);
getElementById i getElementsByClassName pozostają szybsze w przypadku prostych wyszukiwań, natomiast querySelector i querySelectorAll są preferowane, gdy logika wyboru wymaga wykorzystania pełnej składni CSS, np. selektorów atrybutów lub potomków.
Jak modyfikować, tworzyć i usuwać elementy DOM
Po wybraniu elementu JavaSkrypt może odczytać lub przepisać swoją zawartość, atrybuty, a nawet swoje istnienie w drzewie. Korzystając z DOM, JavaSkrypt może tworzyć nowe elementy i atrybuty, zmieniać istniejące elementy i atrybuty, a także całkowicie usuwać istniejące elementy i atrybuty.
Zmiana zawartości za pomocą getElementById i innerHTML
- getElementById: Aby uzyskać dostęp do elementów i atrybutów, których identyfikator jest ustawiony.
- insideHTML: Aby uzyskać dostęp do zawartości elementu.
Wypróbuj ten przykład sam:
<html> <head> <title>DOM!!!</title> </head> <body> <h1 id="one">Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p>This is the technology section.</p> <script type="text/javascript"> var text = document.getElementById("one").innerHTML; alert("The first heading is " + text); </script> </body> </html>
Pole alertu potwierdza, że getElementById zlokalizował nagłówek, a innerHTML zwrócił zapisany w nim tekst.
Przeczytaj każdy akapit za pomocą getElementsByTagName
getElementsByTagName: Aby uzyskać dostęp do elementów i atrybutów za pomocą nazwy tagu. Ta metoda zwróci szyk wszystkich elementów o tej samej nazwie znacznika.
Wypróbuj ten przykład sam:
<html> <head> <title>DOM!!!</title> </head> <body> <h1>Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p id="second">This is the technology section.</p> <script type="text/javascript"> var paragraphs = document.getElementsByTagName("p"); alert("Content in the second paragraph is " + paragraphs[1].innerHTML); document.getElementById("second").innerHTML = "The orginal message is changed."; </script> </body> </html>
Ponieważ getElementsByTagName zwraca kolekcję na żywo, paragraphs[1] odnosi się do drugiego akapitu w dokumencie, a aktualizacja innerHTML natychmiast nadpisuje jego tekst na ekranie.
Tworzenie i usuwanie elementów za pomocą createElement i removeChild
Oprócz zmiany tego, co już znajduje się na stronie, DOM pozwala dodawać zupełnie nowe elementy lub usuwać istniejące:
- utwórzElement(): buduje nowy węzeł elementu w pamięci.
- appendChild(): dołącza węzeł jako ostatnie dziecko elementu nadrzędnego.
- ustawAtrybut(): dodaje lub aktualizuje atrybut, taki jak
classorhref, na elemencie. - usuńDziecko(): usuwa określony węzeł podrzędny z jego węzła nadrzędnego.
Poniższy przykład tworzy nowy element listy, nadaje mu tekst i klasę, dołącza go do istniejącej listy, a następnie usuwa pierwszy element z tej samej listy:
const list = document.getElementById("myList"); const newItem = document.createElement("li"); newItem.textContent = "Freshly added item"; newItem.setAttribute("class", "highlight"); list.appendChild(newItem); list.removeChild(list.firstElementChild);
Samo wywołanie metody createElement() nic nie wyświetla, ponieważ węzeł nadal istnieje tylko w pamięci. Pojawia się dopiero po dołączeniu go gdzieś w widocznym drzewie za pomocą metody appendChild() lub podobnej, takiej jak prepend(). Nowoczesne przeglądarki obsługują również krótszą metodę node.remove(), która usuwa element bezpośrednio, bez konieczności odwoływania się do jego rodzica, w przeciwieństwie do starszej składni parent.removeChild(node).
Jak radzić sobie z wydarzeniami w JavaScenariusz
Zdarzenie to dowolna akcja wykryta przez przeglądarkę, taka jak kliknięcie, naciśnięcie klawisza lub załadowanie strony. Obsługę zdarzeń można dodać do konkretnego elementu na dwa główne sposoby.
Dołącz Handler za pomocą onclick lub addEventListener
Pierwsze, starsze podejście przypisuje funkcję bezpośrednio do właściwości on-event elementu:
document.getElementById(id).onclick=function()
{
lines of code to be executed
}
LUB, używając nowoczesnej i bardziej elastycznej metody addEventListener():
document.getElementById(id).addEventListener("click", functionname)
Metoda addEventListener() jest zazwyczaj preferowana, ponieważ pozwala dołączyć więcej niż jeden handler do tego samego zdarzenia w tym samym elemencie i akceptuje opcjonalny trzeci argument, który kontroluje przechwytywanie, omówiony później w tej sekcji. Działa również z funkcją removeEventListener(), która odłącza handler, gdy nie jest już potrzebny, czego nie może zrobić samodzielnie właściwość onclick.
HTML obsługuje również trzeci styl: obsługę wbudowaną napisaną bezpośrednio na znaczniku, taką jak <button onclick="clicked()">Click Me</button>. Obsługujące elementy w linii łączą znaczniki z logiką i szybko stają się trudne w utrzymaniu, dlatego większość JavaTwórcy skryptów stosują je wyłącznie do szybkich wersji demonstracyjnych, a w przypadku rzeczywistych zastosowań polegają na addEventListener().
Wypróbuj: Kompletny przykład zdarzenia kliknięcia
Wypróbuj ten przykład sam:
<html> <head> <title>DOM!!!</title> </head> <body> <input type="button" id="btnClick" value="Click Me!!" /> <script type="text/javascript"> document.getElementById("btnClick").addEventListener("click", clicked); function clicked() { alert("You clicked me!!!"); } </script> </body> </html>
Kliknięcie przycisku uruchamia funkcję clicked(), która wyzwala JavaOkno alertu skryptu potwierdzające, że obsługa zdarzeń przebiegła pomyślnie.
Obiekt zdarzenia
Każdy moduł obsługi zdarzeń automatycznie otrzymuje obiekt zdarzenia jako pierwszy argument. Obiekt ten zawiera przydatne informacje o tym, co się wydarzyło, w tym event.target (dokładny element, od którego pochodzi akcja), event.type (nazwę zdarzenia, np. „click”) oraz metody takie jak event.preventDefault(), która zatrzymuje domyślne zachowanie przeglądarki, takie jak kliknięcie linku lub przesłanie formularza.
document.getElementById("btnClick").addEventListener("click", function(event) { console.log("Clicked element: " + event.target.id); });
Dwie kolejne właściwości uzupełniają obiekt zdarzenia: event.currentTarget Zawsze odnosi się do elementu, do którego dołączony jest nasłuchiwacz, nawet jeśli event.target zgłasza zagnieżdżony element potomny, a event.stopPropagation() zatrzymuje zdarzenie przed kontynuowaniem propagacji lub przechwytywania. Wraz z preventDefault(), narzędzia te dają obiektowi obsługującemu precyzyjną kontrolę nad tym, co dzieje się dalej.
wydarzenie Bubbling, przechwytywanie i delegowanie
Gdy zdarzenie zostanie wywołane w elemencie zagnieżdżonym, nie kończy się na tym. W bulgotanie W fazie zdarzenie przemieszcza się w górę od elementu docelowego przez każdego przodka aż do dokumentu. W przechwytywanie Faza, która jest uruchamiana jako pierwsza i jest opcjonalna, zamiast tego zdarzenie przechodzi w dół od dokumentu do celu, zanim rozpocznie się bąbelkowanie. {capture: true} jako trzeci argument metody addEventListener() w celu nasłuchiwania podczas fazy przechwytywania.
Delegacja wydarzeń Wykorzystuje funkcję bąbelkowania: zamiast dołączać osobnego nasłuchiwacza do każdego elementu podrzędnego, dołączasz jednego nasłuchiwacza do wspólnego elementu nadrzędnego i sprawdzasz event.target, aby ustalić, który element podrzędny go wyzwolił. To zużywa mniej pamięci i automatycznie obejmuje elementy dodane później do strony.
const list = document.getElementById("myList"); list.addEventListener("click", function(event) { if (event.target.tagName === "LI") { alert("You clicked " + event.target.textContent); } });
Delegowanie, wraz z bąbelkowaniem i przechwytywaniem, zapewnia szczegółową kontrolę nad sposobem działania DOM i zdarzeń w JavaSkrypt reaguje w miarę jak strona staje się coraz bardziej interaktywna.
