Rozpoczynanie wyświetlania i zmieniania DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Obejrzyj film i skorzystaj z tych interaktywnych samouczków, aby poznać podstawy oglądania jak zmienić DOM strony za pomocą Narzędzi deweloperskich w Chrome.

W tym samouczku zakładamy, że znasz różnicę między DOM a HTML. Zobacz Dodatek: HTML a DOM – objaśnienie.

Wyświetl węzły DOM

Drzewo DOM w panelu Elementy zawiera wszystkie działania związane z DOM w Narzędziach deweloperskich.

Sprawdzanie węzła

Jeśli interesuje Cię konkretny węzeł DOM, użyj opcji Zbadaj, aby szybko otworzyć Narzędzia deweloperskie. i zbadanie tego węzła.

  1. Kliknij prawym przyciskiem myszy Michał Anioł poniżej i wybierz Zbadaj.
    • Michał Anioł
    • Rafał Sprawdzanie węzła Otworzy się panel Elements w Narzędziach deweloperskich. Ścieżka <li>Michelangelo</li> jest wyróżniona w drzewie DOM. Wspominamy Michała Anioła< węzeł
  2. Kliknij ikonę Zbadaj w lewym górnym rogu Narzędzia deweloperskie. Ikona inspekcji

  3. Kliknij tekst Tokio poniżej.

    • Tokio

    • Bejrut

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

Sprawdzenie węzła jest też pierwszym krokiem do wyświetlenia i zmiany stylów węzła. Zapoznaj się z artykułem Pierwsze kroki z wyświetlaniem i zmienianiem CSS.

Poruszanie się po drzewie DOM za pomocą klawiatury

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

  1. Kliknij prawym przyciskiem myszy Ringo poniżej i wybierz Zbadaj. Zaznaczono pole <li>Ringo</li> w: drzewo DOM.

    • George
    • Ringo
    • Paul

    • John

      Sprawdzanie węzła Ringo

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

    Sprawdzanie węzła ul

  3. Naciśnij klawisz strzałki w lewo. Lista <ul> zwija się.

  4. Ponownie naciśnij klawisz strzałki w lewo. Element nadrzędny węzła <ul> zaznaczono. W tym przypadku jest to węzeł <li> z instrukcjami dotyczącymi kroku 1.

  5. Naciśnij 3 razy klawisz strzałki w dół, by ponownie zaznaczyć pole <ul> zwiniętej listy. Powinno to wyglądać tak: <ul>...</ul>

  6. Naciśnij klawisz strzałki w prawo. Lista zostanie rozwinięta.

Przewiń, aby pokazać

Przeglądając drzewo DOM, możesz czasem zauważyć węzeł DOM, który jest nie jest aktualnie w widocznym obszarze. Na przykład załóżmy, że przewinięto na sam dół sekcji i interesuje Cię węzeł <h1> u góry strony. Przewiń do widoku pozwala szybko zmienić położenie widocznego obszaru, by zmienić położenie węzła.

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

    • Magritte'a
    • Sutyna

  2. Przejdź do sekcji Dodatek: przewiń, aby zobaczyć u dołu tej strony. Instrukcje znajdziesz dalej.

Gdy wykonasz instrukcje podane na dole strony, wróć tutaj.

Pokaż linijki

Dzięki linijkom znajdującym się powyżej i po lewej stronie widocznego obszaru możesz mierzyć szerokość i wysokość elementu po najechaniu na niego kursorem w panelu Elements.

Linijki.

Możesz to zrobić na 2 sposoby:

  • Naciśnij Control+Shift+P lub Command+Shift+P (Mac), aby otworzyć menu Command, wpisz Show rulers on hover i naciśnij Enter.
  • Sprawdź Ustawienia. Ustawienia > Ustawienia > Elements > Pokazuj linijki pod kursorem myszy.

Jednostkami rozmiaru linijek są piksele.

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

  1. Najedź kursorem na panel Elements.
  2. Naciśnij Control+F lub Command+F (Mac). Pasek wyszukiwania otworzy się na dole drzewa DOM.

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

    Wyróżnianie zapytania na pasku wyszukiwania

Jak wspomnieliśmy wcześniej, pasek wyszukiwania obsługuje również selektory CSS i XPath.

Panel Elements wybiera pierwszy pasujący wynik w drzewie DOM i wyświetla go w widocznym obszarze. Domyślnie odbywa się to podczas pisania. Jeśli zawsze pracujesz z długimi zapytaniami, możesz ustawić w Narzędziach deweloperskich wyszukiwanie tylko po naciśnięciu Enter.

Aby uniknąć niepotrzebnych przeskoków między węzłami, wyczyść Ustawienia. Ustawienia > Ustawienia > Globalne > Szukaj podczas pisania.

Wyczyszczono pole wyboru Szukaj podczas pisania w Ustawieniach.

Edytuj DOM

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

Edytuj treść

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

  1. Kliknij prawym przyciskiem myszy opcję Michelle poniżej 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 zostanie podświetlony na niebiesko, by wskazać, że jest zaznaczony.

    Edytowanie tekstu

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

Edytuj atrybuty

Aby edytować atrybuty, kliknij dwukrotnie ich nazwę lub wartość. Postępuj zgodnie z instrukcjami. poniżej, aby dowiedzieć się, jak dodać atrybuty do węzła.

  1. Kliknij prawym przyciskiem myszy Howard poniżej i wybierz Howard.

    • Howard
    • Vince

  2. Kliknij dwukrotnie <li>. Tekst zostanie podświetlony, aby wskazać, że .

    Edytowanie węzła

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

    dodanie atrybutu stylu do węzła.

Możesz też użyć opcji Edytuj atrybut po kliknięciu prawym przyciskiem myszy.

Opcje dostępne po kliknięciu prawym przyciskiem myszy z zaznaczonym atrybutem Edytuj.

Edytuj typ węzła

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

  1. Kliknij prawym przyciskiem myszy Hank poniżej 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> zmienia się w <button> do węzła.

    Zmiana typu węzła na przycisk

Edytuj jako HTML

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

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

    • Pens
    • Howard
    • Rajesh
    • Leonard

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

    Menu węzła.

  3. Naciśnij Enter, aby przejść do nowego wiersza, i wpisz <l. DevTool wyróżnia składnię HTML i automatycznie uzupełnia tagi.

    Autouzupełnianie tagów HTML.

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

    Narzędzia deweloperskie automatycznie zamykają tag.

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

    Stosuję zmiany.

Duplikowanie węzła

Możesz zduplikować element, korzystając z opcji Zduplikowany element po kliknięciu prawym przyciskiem myszy.

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

    • Ognisko toaletek
    • Nana
    • Orlando
    • Biały szum

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

    Wyróżniona opcja „Powiel element” w menu.

  3. Wróć na stronę. Pozycja na liście została natychmiast zduplikowana.

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

Zrób zrzut ekranu węzła

Aby zrobić zrzut ekranu dowolnego węzła w drzewie DOM, skorzystaj z narzędzia Przechwyć zrzut ekranu węzła.

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

  2. W panelu Elements kliknij prawym przyciskiem myszy adres URL obrazu i wybierz z menu Elements.

    Przechwytywany jest zrzut ekranu węzła.

  3. Zrzut ekranu zostanie zapisany w pobranych plikach.

    Zrzut ekranu węzła został zapisany w pobranych plikach.

Więcej informacji o robieniu zrzutów ekranu za pomocą narzędzi deweloperskich znajdziesz w artykule o 4 sposobach 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. Kliknij prawym przyciskiem myszy Elvis Presley poniżej i wybierz Zbadaj. Zwróć uwagę, że to ostatni element z listy.

    • Stevie Wonder
    • Tom Waits
    • Kuba Sienkiewicz
    • Elvisa Presleya

  2. W drzewie DOM przeciągnij <li>Elvis Presley</li> na górę listy.

    Przeciągnięcie węzła na górę listy

Wymuś stan

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

  1. Najedź kursorem na Władca much poniżej. Kolor tła zmieni się na pomarańczowy.

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

  2. Kliknij prawym przyciskiem myszy Władca much powyżej 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, zobacz Dodatek: brakujące opcje. Kolor tła pozostaje pomarańczowy, mimo że nie znajdujesz się w węźle.

Ukrywanie węzła

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

  1. Kliknij prawym przyciskiem myszy Gwiazdki w miejscu docelowym poniżej i wybierz Zbadaj.

    • Hrabia Monte Christo
    • Gwiazdy moje miejsce podróży

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

    Jak wygląda węzeł w drzewie DOM po jego ukryciu

  3. Ponownie naciśnij klawisz H. Węzeł pojawi się ponownie.

Usuwanie węzła

Naciśnij Delete, aby usunąć węzeł.

  1. Poniżej kliknij prawym przyciskiem myszy opcję Podstawy i wybierz Zbadaj.

    • Ilustrowany człowiek
    • Przez szkło
    • Fundacja

  2. Naciśnij klawisz Delete. Węzeł został 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 (Mac). Ostatnie działanie zostanie cofnięte i węzeł ponownie pojawi się na ekranie.

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

W Narzędziach deweloperskich dostępnych jest kilka skrótów dostępu do węzłów DOM z poziomu konsoli odwołaniach do nich JavaScript.

Utwórz odwołanie do aktualnie wybranego węzła, wpisując wartość $0

Podczas sprawdzania węzła tekst == $0 obok węzła oznacza, że możesz się do niego odwołać węzeł w konsoli ze zmienną $0.

  1. Kliknij prawym przyciskiem myszy The Left Hand of Darkness poniżej i wybierz Zbadaj.

    • Lewa ręka ciemności
    • Diuna

  2. Naciśnij klawisz Escape, aby otworzyć panel konsoli.

  3. Wpisz $0 i naciśnij klawisz Enter. Wynik wyrażenia wskazuje, że Wyznaczoną wartością funkcji $0 jest <li>The Left Hand of Darkness</li>.

    Wynik pierwszego wyrażenia $0 w konsoli

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

  5. Kliknij <li>Dune</li> w drzewie DOM, ponownie wpisz $0 w konsoli i naciśnij Ponownie Enter. Wyznaczona wartość $0 to <li>Dune</li>.

    Wynik drugiego wyrażenia $0 w konsoli

Przechowuj jako zmienną globalną

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

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

    • Wielki sen
    • Długie pożegnanie

  2. Kliknij prawym przyciskiem myszy <li>The Big Sleep</li> w drzewie DOM i wybierz Przechowuj jako globalne . Jeśli nie widzisz tej opcji, zobacz Dodatek: brakujące opcje.

  3. Wpisz temp1 w konsoli i naciśnij Enter. Wynik wyrażenia wskazuje, że zmienna zwraca się do węzła.

    Wynik wyrażenia temp1

Kopiuj ścieżkę JS

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

  1. Kliknij prawym przyciskiem myszy Bracia Karamazow poniżej 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() kierujące do węzeł został skopiowany do schowka.

  3. Naciśnij Control+V lub Command+V (Mac), aby i wklej je do konsoli.

  4. Naciśnij Enter, aby ocenić wyrażenie.

    Wynik wyrażenia Kopiuj ścieżkę JS

Przerwa po zmianach DOM

Narzędzia deweloperskie umożliwiają wstrzymywanie JavaScriptu na stronie, gdy skrypt JavaScript modyfikuje DOM. Zobacz punkty przerwania zmian DOM.

Dalsze kroki

Dotyczy to większości funkcji związanych z DOM w Narzędziach deweloperskich. Pozostałe możesz poznać klikając prawym przyciskiem myszy węzły w drzewie DOM i eksperymentując z innymi opcjami, które nie były omówione w tym samouczku. Zobacz też Skróty klawiszowe w panelu Elementy.

Wszystko znajdziesz na stronie głównej Narzędzi deweloperskich w Chrome. które są dostępne w Narzędziach deweloperskich.

Jeśli chcesz skontaktować się z zespołem Narzędzi deweloperskich, wybierz Społeczność. lub uzyskać pomoc od społeczności w Narzędziach deweloperskich.

Dodatek: HTML a DOM

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

Gdy w przeglądarce wysyłasz żądanie strony takiej jak https://example.com, serwer zwraca kod HTML w następujący sposób:

<!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 w następujący sposób:

html
  head
    title
  body
    h1
    p
    script

Drzewo obiektów, czyli węzłów reprezentujących treść strony, jest nazywane DOM. W tej chwili wygląda to tak samo jak w kodzie HTML, ale załóżmy, że skrypt, do którego odwołuje się parametr na dole strony HTML uruchamia ten kod:

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

Ten kod usuwa węzeł h1 i dodaje do DOM kolejny węzeł p. Pełny DOM wygląda podobny do tego:

html
  head
    title
  body
    p
    script
    p

Kod HTML strony różni się od jej DOM. Innymi słowy, kod HTML reprezentuje treść strony początkowej, natomiast model DOM reprezentuje treść bieżącej strony. Gdy JavaScript jeśli doda, usunie lub edytuje węzły, model DOM różni się od kodu HTML.

Więcej informacji znajdziesz w artykule Wprowadzenie do DOM.

Dodatek: przewiń do widoku

Jest to kontynuacja sekcji Przewiń do widoku. Postępuj zgodnie z podane niżej instrukcje.

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

  2. Kliknij prawym przyciskiem myszy węzeł <li>Magritte</li> i wybierz Przewiń, by zobaczyć widok. Przewija się widoczny obszar utwórz kopię zapasową, aby zobaczyć węzeł Magritte. Jeśli nie widzisz opcji Przewiń do widoku, zobacz Dodatek: brakujące opcje.

    Przewiń, aby pokazać

Załącznik: brakujące opcje

Wiele instrukcji w tym samouczku zawiera instrukcje, aby kliknąć prawym przyciskiem myszy węzeł w drzewie DOM. a potem wybierz opcję z menu kontekstowego. Jeśli nie widzisz określonej wartości w menu kontekstowym, spróbuj kliknąć prawym przyciskiem myszy poza tekstem węzła.

Gdzie kliknąć, jeśli nie widzisz wszystkich opcji