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. Więcej informacji znajdziesz w dodatku: HTML a DOM.

Wyświetlanie węzłów DOM

Drzewo DOM w panelu Elementy to miejsce, w którym wykonujesz wszystkie działania związane z DOM w Narzędziach deweloperskich.

Sprawdzanie węzła

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

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

   • Michał Anioł
   • Raphael

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

   

2. Kliknij Wybierz element.

3. Wybierz Tokio z listy.

   • Tokio
   • Bejrut

   Element <li>Tokyo</li> jest zaznaczony w drzewie DOM.

Zbadanie węzła jest też pierwszym krokiem do wyświetlenia i zmiany jego stylów i kodu CSS.

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 kliknij prawym przyciskiem myszy Ringo i wybierz Zbadaj. W drzewie DOM wybrano element <li>Ringo</li>.

   • 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 węzeł nadrzędny węzła <ul>. W tym przypadku jest to węzeł <li> zawierający instrukcje dotyczące kroku 1.

5. Naciśnij 3 razy klawisz strzałki w dół, aby ponownie wybrać listę <ul>, która została właśnie zwinięta. Powinien on wyglądać podobnie do tego: <ul>...</ul>

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

Przewiń, aby pokazać

Podczas wyświetlania drzewa DOM możesz czasem znaleźć się w węźle DOM, który nie znajduje się w widocznym obszarze. Załóżmy na przykład, że przewijasz stronę do dołu, a interesuje Cię węzeł <h1> u góry strony. Przewiń do widoku umożliwia szybkie zmianę położenia obszaru widocznego na ekranie, 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. Przewiń do sekcji dodatku Przewiń do widoku, aby uzyskać dodatkowe instrukcje.

Gdy to zrobisz, wróć do tej sekcji.

Pokaż linijki

Dzięki linijkom w obszarze widoku możesz zmierzyć szerokość i wysokość elementu, gdy najedziesz na niego kursorem w panelu Elementy.

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

• Naciśnij Ctrl+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 linijek są piksele.

Wyszukaj węzły

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

1. Ustaw kursor w panelu Elementy.
2. Naciśnij Control+F lub Command+F (macOS). U dołu drzewa DOM otworzy się pasek wyszukiwania.

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 > Szukaj podczas pisania.

Edytowanie modelu DOM

Możesz edytować DOM na bieżąco i obserwować, 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.

   • Smażenie
   • Michelle

2. W drzewie DOM kliknij dwukrotnie Michelle. Innymi słowy, kliknij dwukrotnie tekst między <li> i </li>. Tekst jest podświetlony 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 następnie kliknij dwukrotnie <li>, aby edytować. Tekst jest podświetlony, co oznacza, że węzeł jest zaznaczony.

   

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 i wpisz nowy typ.

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

   • Dziekan
   • 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 w menu wybierz Edytuj jako HTML.

   

3. Naciśnij Enter, aby przejść do nowego wiersza, i zacznij pisać <l. Narzędzia deweloperskie wyróżniają składnię HTML i sugerują tagi do autouzupełniania.

   

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

   

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

Duplikowanie węzła

Element można zduplikować, korzystając z opcji Zduplikuj element dostępnej po kliknięciu prawym przyciskiem myszy.

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

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

2. W panelu Elementy kliknij prawym przyciskiem myszy <li>Nana</li> i w 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 w menu wybierz Zrób zrzut ekranu węzła.

   

3. Zrzut ekranu zostanie zapisany w pobranych plikach (Windows i macOS).

Więcej informacji znajdziesz w artykule 4 sposoby na robienie 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 liście poniżej kliknij prawym przyciskiem myszy Elvis Presley i wybierz Zbadaj. Jest to ostatni element na liście.

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

2. W drzewie DOM przeciągnij <li>Elvis Presley</li> na górę 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 dotyczący brakujących opcji.

   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
   • Gwiazdy moim przeznaczeniem

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 kliknij prawym przyciskiem myszy Foundation i wybierz Zbadaj.

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

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ł pojawi się ponownie.

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

Narzędzia deweloperskie udostępniają kilka skrótów, które umożliwiają dostęp do węzłów DOM z poziomu konsoli lub uzyskanie odwołań do nich w kodzie JavaScript.

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

Gdy sprawdzasz węzeł (w tym pseudoelementy, takie jak ::before lub ::after), tekst == $0 obok węzła 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 otworzyć konsolę, być może trzeba będzie wybrać Konsola.

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 daje wynik <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 Wielki sen i wybierz Zbadaj.

   • Wielki sen
   • Długie pożegnanie

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 i naciśnij Enter. Wynik wyrażenia pokazuje, że zmienna przyjmuje wartość węzła. Kliknij węzeł, aby rozwinąć element listy.

   

Kopiuj ś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. Kliknij prawym przyciskiem myszy <li>The Brothers Karamazov</li> w drzewie DOM i wybierz Kopiuj > Kopiuj ścieżkę JS. Wyrażenie document.querySelector(), które wskazuje węzeł, zostało skopiowane do schowka.

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

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

   

Przerwij 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

Obejmuje to większość funkcji związanych z DOM w Narzędziach deweloperskich. 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.

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

Dodatek

Dowiedz się więcej na konkretne tematy.

HTML a DOM

W tej sekcji krótko wyjaśniamy różnicę między kodem HTML a modelem DOM.

Gdy używasz przeglądarki, aby poprosić o stronę taką jak 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 obiektowym modelem dokumentu (DOM). Obecnie obiekty są takie same zarówno w DOM, jak i w 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 modelu DOM inny 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ą zawartość strony, a DOM – aktywną, bieżącą zawartość strony. Gdy JavaScript dodaje, usuwa lub edytuje węzły, DOM zaczyna się różnić od kodu HTML.

Więcej informacji znajdziesz w artykule MDN Wprowadzenie do DOM.

Przewiń, aby pokazać

To jest kontynuacja sekcji Przewijanie do widoku. Postępuj zgodnie z instrukcjami, aby wypełnić sekcję.

1. Węzeł <li>Magritte</li> powinien być nadal zaznaczony w drzewie DOM. Jeśli nie, wróć do sekcji Przewijanie do widoku i zacznij od początku.

2. Kliknij prawym przyciskiem myszy węzeł <li>Magritte</li> i wybierz Przewiń do widoku. Widoczny obszar 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 menu kontekstowego, które się pojawi. Jeśli nie widzisz określonej opcji w menu kontekstowym, kliknij prawym przyciskiem myszy poza tekstem węzła.