Rozpoczynanie wyświetlania i zmieniania DOM

Kayce Basques

Sofia Emelianova

Obejrzyj film i wykonaj te interaktywne samouczki, aby poznać podstawy wyświetlania i zmieniania DOM strony za pomocą Narzędzi deweloperskich w Chrome.

W tym samouczku zakładamy, że znasz różnicę między DOM a HTML. Przypomnij sobie informacje z dodatku: HTML a DOM.

Wyświetlanie węzłów DOM

W panelu Elementy znajduje się drzewo DOM, w którym możesz wykonywać w Narzędziach deweloperskich wszystkie czynności związane z DOM.

Sprawdzanie węzła

Jeśli interesuje Cię konkretny węzeł DOM, Sprawdź to szybki sposób na otwarcie Narzędzi deweloperskich i zbadanie tego węzła.

1. Na liście poniżej kliknij prawym przyciskiem myszy Michelangelo. W menu wybierz Zbadaj.

   • Michała Anioła
   • Raphael

   Otworzy się panel Elementy w Narzędziach deweloperskich. <li>Michelangelo</li> jest wyróżniony w widoku drzewa DOM.

   

2. Kliknij  Wybierz element.

3. Wybierz Tokio z tej listy.

   • Tokio
   • Bejrut

   <li>Tokyo</li> jest wyróżniony w drzewie DOM.

Sprawdzanie węzła to także pierwszy krok do wyświetlania i zmieniania stylów i CSS węzła.

Poruszanie się po drzewie DOM za pomocą klawiatury

Po wybraniu węzła w drzewie DOM możesz poruszać się po nim za pomocą klawiatury.

1. Na liście poniżej kliknij prawym przyciskiem myszy Ringo i wybierz Zbadaj.<li>Ringo</li> zostanie zaznaczony w drzewie DOM.

   • George
   • Ringo
   • Paul

   • John

     

2. Naciśnij 2 razy klawisz strzałki w górę. Wybrano <ul>.

   

3. Naciśnij klawisz strzałki w lewo. Lista <ul> zostanie zwinięta.

4. Ponownie naciśnij klawisz strzałki w lewo. Wybrany jest element nadrzędny węzła <ul>. W tym przypadku jest to węzeł <li> zawierający instrukcje do kroku 1.

5. Naciśnij 3 razy klawisz strzałki w dół, aby ponownie wybrać zwiniętą listę <ul>. Powinna wyglądać tak: <ul>...</ul>

6. Naciśnij klawisz strzałki w prawo. Lista się rozwinie.

Przewiń, aby pokazać

Podczas przeglądania drzewa DOM możesz znaleźć się w węźle DOM, który nie jest widoczny w obszarze wyświetlania. Załóżmy na przykład, że przewijasz stronę do dołu i interesuje Cię węzeł <h1> u góry strony. Funkcja Przewiń do widoku umożliwia szybkie przeniesienie obszaru wyświetlania, aby można było zobaczyć węzeł.

1. Na liście poniżej kliknij prawym przyciskiem myszy Magritte i wybierz Zbadaj.

   • Magritte
   • Soutine

2. Dodatkowe instrukcje znajdziesz w sekcji dodatku Przewiń do widoku.

Gdy to zrobisz, wróć do tej sekcji.

Pokaż linijki

Gdy w widocznym obszarze są wyświetlane linijki, możesz zmierzyć szerokość i wysokość elementu, najeżdżając na niego kursorem w panelu Elementy.

Włącz linijki na jeden z 2 sposobów:

• Naciśnij Control+Shift+P lub Command+Shift+P (macOS), aby otworzyć menu poleceń, wpisz Show rulers on hover i naciśnij Enter.
• Sprawdź ustawienia: Ustawienia > Preferencje > Elementy > Pokaż linijki po najechaniu kursorem.

Jednostką miary na linijkach są piksele.

Wyszukaj węzły

W drzewie DOM możesz wyszukiwać według ciągu znaków, selektora CSS lub selektora XPath.

1. Umieść kursor w panelu Elementy.
2. Naciśnij Ctrl+F lub Command+F (macOS). Pasek wyszukiwania otworzy się u dołu drzewa DOM.

3. Wpisz The Moon is a Harsh Mistress. Ostatnie zdanie jest wyróżnione w drzewie DOM.

   

Pasek wyszukiwania obsługuje też selektory CSS i XPath.

W panelu Elementy wybierany jest pierwszy pasujący wynik w drzewie DOM i wyświetlany w obszarze widoku. Domyślnie dzieje się to podczas pisania. Jeśli zawsze pracujesz z długimi zapytaniami, możesz skonfigurować Narzędzia deweloperskie tak, aby wyszukiwanie było uruchamiane tylko po naciśnięciu klawisza Enter.

Aby uniknąć niepotrzebnych przeskoków między węzłami, odznacz pole wyboru Ustawienia > Ustawienia > Preferencje > Globalne > Wyszukiwanie podczas pisania.

Edytowanie DOM

Możesz edytować DOM na bieżąco i sprawdzać, jak te zmiany wpływają na stronę.

Edytuj treść

Aby edytować zawartość węzła, kliknij ją dwukrotnie w drzewie DOM.

1. Na liście poniżej kliknij prawym przyciskiem myszy Michelle i wybierz Zbadaj.

   • Fry
   • Michelle

2. W drzewie DOM kliknij dwukrotnie Michelle, czyli tekst między znakami <li> i </li>. Tekst zostanie wyróżniony na niebiesko, co oznacza, że jest zaznaczony.

   

3. Usuń Michelle, wpisz Leela, a następnie naciśnij Enter, aby potwierdzić zmianę. Tekst zmienia się z Michelle na Leela.

Edytuj atrybuty

Aby edytować atrybuty, kliknij dwukrotnie nazwę lub wartość atrybutu. Aby dowiedzieć się, jak dodać atrybuty do węzła, postępuj zgodnie z tymi instrukcjami.

1. Na liście poniżej kliknij prawym przyciskiem myszy Howard i wybierz Zbadaj.

   • Howard
   • Vince

2. Rozwiń <ul>, a potem kliknij dwukrotnie <li>, aby edytować. Tekst jest podświetlony, aby wskazać, że węzeł jest wybrany.

   

3. Naciśnij klawisz strzałki w prawo, dodaj spację, wpisz style="background-color:gold", a następnie naciśnij Enter. Kolor tła węzła zmieni się na złoty.

   

Edytuj typ węzła

Aby edytować typ węzła, kliknij go dwukrotnie, a następnie wpisz nowy typ.

1. Na liście poniżej kliknij prawym przyciskiem myszy Hank i wybierz Zbadaj.

   • Dean
   • Myszy
   • Thaddeus
   • Brock

2. Kliknij dwukrotnie <li>. Tekst li jest wyróżniony.

3. Usuń li, wpisz button, a następnie naciśnij Enter. Węzeł <li> zmieni się w węzeł <button>.

   

Edytuj jako HTML

Aby edytować węzły jako kod HTML z wyróżnianiem składni i autouzupełnianiem, w menu węzła kliknij Edytuj jako HTML.

1. Kliknij prawym przyciskiem myszy Leonard poniżej i wybierz Zbadaj.

   • Pens
   • Howard
   • Rajesh
   • Leonard

2. W panelu Elementy kliknij prawym przyciskiem myszy bieżący węzeł i z menu wybierz Edytuj jako HTML.

   

3. Naciśnij Enter, aby rozpocząć nowy wiersz, i zacznij pisać <l. Narzędzia deweloperskie wyróżniają składnię HTML i sugerują tagi do automatycznego uzupełniania.

   

4. Wybierz element li z menu autouzupełniania i wpisz >. Narzędzia deweloperskie automatycznie dodadzą tag zamykający </li> po kursorze.

   

5. Wpisz Sheldon w tagu i naciśnij Control lub Command + Enter, aby zastosować zmiany.

Duplikowanie węzła

Możesz zduplikować element, klikając go prawym przyciskiem myszy i wybierając opcję Zduplikuj element.

1. Kliknij prawym przyciskiem myszy Nana na poniższej liście i wybierz Zbadaj.

   • Ognisko próżności
   • Nana
   • Orlando
   • Biały szum

2. W panelu Elementy kliknij prawym przyciskiem myszy <li>Nana</li> i z menu wybierz Duplikuj element.

   

3. Wróć na stronę. Element listy został zduplikowany.

Możesz też użyć skrótów klawiszowych: Shift + Alt + strzałka w dół (Windows i Linux) oraz Shift + Option + strzałka w dół (macOS).

Zrób zrzut ekranu węzła

Możesz zrobić zrzut ekranu dowolnego węzła w drzewie DOM.

1. Kliknij prawym przyciskiem myszy dowolny obraz na tej stronie i wybierz Zbadaj.

2. W panelu Elementy kliknij prawym przyciskiem myszy adres URL obrazu i z menu wybierz Zrób zrzut ekranu węzła.

   

3. Zrzut ekranu zostanie zapisany w folderze pobranych plików (Windows i macOS).

Więcej informacji znajdziesz w artykule 4 sposoby robienia zrzutów ekranu za pomocą Narzędzi deweloperskich.

Zmiana kolejności węzłów DOM

Przeciągnij węzły, aby zmienić ich kolejność.

1. Na poniższej liście kliknij prawym przyciskiem myszy Elvis Presley i wybierz Zbadaj. To ostatni element na liście.

   • Stevie Wonder
   • Tom Waits
   • Kuba Sienkiewicz
   • Elvis Presley

2. W drzewie DOM przeciągnij element <li>Elvis Presley</li> na początek listy.

Wymuś stan

Możesz wymusić, aby węzły pozostawały w stanach takich jak :active, :hover, :focus, :visited i :focus-within.

1. Najedź kursorem na element listy Władca much. Kolor tła zmieni się na pomarańczowy.

   • Władca much
   • Zbrodnia i kara
   • Moby Dick

2. Kliknij prawym przyciskiem myszy element listy Władca much i wybierz Zbadaj.

3. Kliknij prawym przyciskiem myszy <li class="demo--hover">The Lord of the Flies</li> i wybierz Wymuś stan > :hover. Jeśli nie widzisz tej opcji, przeczytaj dodatek o brakujących opcjach.

   Kolor tła pozostaje pomarańczowy, mimo że nie najeżdżasz kursorem na węzeł.

Ukrywanie węzła

Naciśnij H, aby ukryć węzeł.

1. Na liście kliknij prawym przyciskiem myszy The Stars My Destination i wybierz Zbadaj.

   • Hrabia Monte Christo
   • The Stars My Destination

2. Naciśnij klawisz H. Węzeł jest ukryty. Możesz też kliknąć węzeł prawym przyciskiem myszy i użyć opcji Ukryj element.

   

3. Ponownie naciśnij klawisz H. Węzeł zostanie ponownie wyświetlony.

Usuwanie węzła

Aby usunąć węzeł, naciśnij Usuń.

1. Na liście poniżej kliknij prawym przyciskiem myszy Fundacja i wybierz Zbadaj.

   • Ilustrowany człowiek
   • Po drugiej stronie lustra
   • Fundacja

2. Naciśnij klawisz Delete. Węzeł zostanie usunięty. Możesz też kliknąć węzeł prawym przyciskiem myszy i użyć opcji Usuń element.

3. Naciśnij Control + Z lub Command + Z (macOS). Ostatnie działanie zostanie cofnięte, a węzeł ponownie się pojawi.

Dostęp do węzłów w konsoli

Narzędzia deweloperskie udostępniają kilka skrótów umożliwiających dostęp do węzłów DOM z konsoli lub uzyskiwanie do nich odwołań w JavaScript.

Odwoływanie się do aktualnie wybranego węzła za pomocą $0

Gdy sprawdzasz węzeł, tekst == $0 obok niego oznacza, że możesz odwołać się do tego węzła w konsoli za pomocą zmiennej $0.

1. Kliknij prawym przyciskiem myszy element listy The Left Hand of Darkness i wybierz Zbadaj.

   • Lewa ręka ciemności
   • Diuna

2. Naciśnij klawisz Escape, aby otworzyć panel konsoli. Aby ją otworzyć, może być konieczne kliknięcie Konsoli.

3. Wpisz $0 i naciśnij klawisz Enter. Wynikiem wyrażenia jest to, że $0 ma wartość <li>The Left Hand of Darkness</li>.

   

4. Najedź kursorem na wynik. Węzeł zostanie wyróżniony w widocznym obszarze.

5. W drzewie DOM kliknij <li>Dune</li>, ponownie wpisz w konsoli $0, a następnie ponownie naciśnij Enter. Teraz $0 ma wartość <li>Dune</li>.

   

Zapisz jako zmienną globalną

Jeśli musisz wielokrotnie odwoływać się do węzła, zapisz go jako zmienną globalną.

1. Na liście poniżej kliknij prawym przyciskiem myszy The Big Sleep i wybierz Zbadaj.

   • Wielki sen
   • The Long Goodbye

2. W drzewie DOM kliknij prawym przyciskiem myszy element <li>The Big Sleep</li> i wybierz Zapisz jako zmienną globalną. Jeśli nie widzisz tej opcji, przeczytaj artykuł o brakujących opcjach.

3. Wpisz temp1 w konsoli, a potem naciśnij Enter. Wynik wyrażenia pokazuje, że zmienna jest równa węzłowi. Kliknij węzeł, aby rozwinąć element listy.

   

Skopiuj ścieżkę JS

Skopiuj ścieżkę JavaScript do węzła, aby odwołać się do niego w teście automatycznym.

1. Na poniższej liście kliknij prawym przyciskiem myszy Bracia Karamazow i wybierz Zbadaj.

   • Bracia Karamazow
   • Zbrodnia i kara

2. W drzewie DOM kliknij prawym przyciskiem myszy <li>The Brothers Karamazov</li> i wybierz Kopiuj > Skopiuj ścieżkę JS. Do schowka skopiowano document.querySelector() wyrażenie, które odnosi się do węzła.

3. Naciśnij Control+V lub Command+V (macOS), aby wkleić wyrażenie do konsoli.

4. Aby obliczyć wartość wyrażenia, naciśnij Enter.

   

Przerwanie przy zmianach DOM

Narzędzia deweloperskie umożliwiają wstrzymanie JavaScriptu na stronie, gdy modyfikuje on DOM. Dowiedz się więcej o punktach przerwania zmian DOM.

Dalsze kroki

To obejmuje większość funkcji Narzędzi deweloperskich związanych z DOM. Pozostałe możesz odkryć, klikając prawym przyciskiem myszy węzły w drzewie DOM i eksperymentując z opcjami, które nie zostały omówione w tym samouczku.

Czytaj dalej:

• Dowiedz się więcej o skrótach klawiszowych w panelu Elementy.
• Więcej informacji o wszystkich możliwościach Narzędzi deweloperskich znajdziesz w dokumentacji Narzędzi deweloperskich.

Dołącz do społeczności Narzędzi deweloperskich, aby skontaktować się z zespołem Narzędzi deweloperskich lub uzyskać pomoc od innych programistów.

Dodatek

Dowiedz się więcej o konkretnych tematach.

HTML a DOM

W tej sekcji szybko wyjaśnimy różnicę między HTML-em a DOM-em.

Gdy używasz przeglądarki internetowej, aby poprosić o stronę, np. https://example.com, serwer zwraca dokument HTML:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

Przeglądarka analizuje kod HTML i tworzy drzewo obiektów:

html
  head
    title
  body
    h1
    p
    script

To drzewo obiektów lub węzłów reprezentuje zawartość strony. Nazywa się to modelem DOM (Document Object Model). Obecnie obiekty są takie same w DOM i HTML.

Załóżmy, że plik script.js u dołu kodu HTML zawiera te funkcje:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Ten skrypt usuwa węzeł h1 i dodaje do DOM kolejny węzeł p. DOM wygląda teraz tak:

html
  head
    title
  body
    p
    script
    p

Kod HTML strony różni się teraz od jej modelu DOM.

HTML reprezentuje początkową treść strony, a DOM – aktywną, bieżącą treść strony. Gdy JavaScript dodaje, usuwa lub edytuje węzły, DOM różni się od HTML.

Więcej informacji znajdziesz w tym artykule w MDN.

Przewiń, aby pokazać

To kontynuacja sekcji Przewiń do widoku. Postępuj zgodnie z instrukcjami, aby wypełnić tę sekcję.

1. W drzewie DOM powinien być nadal zaznaczony węzeł <li>Magritte</li>. Jeśli tak nie jest, wróć do sekcji Przewiń do widoku i zacznij od nowa.

2. Kliknij prawym przyciskiem myszy węzeł <li>Magritte</li> i wybierz Przewiń do widoku. Widok przewinie się z powrotem w górę, aby można było zobaczyć węzeł Magritte. Jeśli nie widzisz opcji Przewiń do widoku, dowiedz się więcej o brakujących opcjach.

   

Brakowało opcji

Wiele instrukcji w tym samouczku wymaga kliknięcia prawym przyciskiem myszy węzła w drzewie DOM, a następnie wybrania opcji z wyświetlonego menu kontekstowego. Jeśli w menu kontekstowym nie widzisz określonej opcji, spróbuj kliknąć prawym przyciskiem myszy poza tekstem węzła.