W tym samouczku dowiesz się, jak uzyskać dostęp do elementów DOM w konsoli narzędzi deweloperskich Chrome. Jest to szczególnie ważne dla programistów internetowych pracujących z elementami HTML i JavaScript. Wideo-poradniku poznasz wiele przydatnych wskazówek i sztuczek, aby łatwo selekcjonować i manipulować elementami DOM.
Najważniejsze wnioski
- Możesz uzyskać dostęp do elementów DOM za pomocą zmiennych globalnych, funkcji konsoli i skrótów.
- Dodatkowo nauczysz się, jak przeglądać i manipulować wcześniejszymi selekcjami.
Instrukcje krok po kroku
Najpierw upewnij się, że masz otwarte narzędzia deweloperskie Chrome. Możesz to zrobić, klikając prawym przyciskiem myszy na stronie internetowej i wybierając „Badanie” lub używając skrótu klawiszowego Ctrl + Shift + I.
Teraz omówimy, jak uzyskać dostęp do określonego elementu DOM.
![Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-6.webp?tutkfid=226741)
Jeśli masz element DOM na swojej stronie, na przykład z identyfikatorem „App”, możesz bezpośrednio się do niego odwołać za pomocą konsoli. Wszystkie elementy z identyfikatorem są globalnie dostępne w obiekcie window.
![Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-21.webp?tutkfid=226742)
Możesz łatwo wywołać ten identyfikator, wpisując window.App w konsoli. Zobaczysz odpowiedni element DOM i będziesz mógł go rozwijać, aby uzyskać dostęp do jego podrzędnych elementów i atrybutów.
Załóżmy, że musisz wywołać funkcję filmu, który znajduje się na twojej stronie. Możesz to zrobić za pomocą play, pod warunkiem, że dany element obsługuje tę metodę.
![Dostęp do elementów DOM w konsoli - Przewodnik krok-po-kroku Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-71.webp?tutkfid=226744)
Aby zobaczyć wszystkie właściwości i funkcje elementu DOM, możesz użyć funkcji console.dir(). Jeśli wpiszesz console.dir(window.App), otrzymasz czytelną prezentację wszystkich właściwości i metod elementu DOM.
![Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-92.webp?tutkfid=226745)
Jeśli element nie ma identyfikatora, nadal możesz się do niego odwołać, korzystając z document.querySelector(). Działa to również dla całego document.body, jeśli chcesz się do niego dostać.
![Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-139.webp?tutkfid=226747)
Dla bardziej szczegółowych selekcji możesz użyć document.querySelector() lub document.querySelectorAll(), aby otrzymać listę elementów pasujących do określonego selektora.
![Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-159.webp?tutkfid=226749)
Te listy można traktować jak tablice, dzięki czemu za pomocą Array.from() możesz nimi manipulować.
Praktycznym skrótem, który możesz użyć w konsoli, jest $0. Pozwala to uzyskać dostęp do obecnego zaznaczonego elementu DOM w zakładce Elementy. Jeśli wpiszesz $0 i naciśniesz enter, zobaczysz, który element jest aktualnie zaznaczony.
![Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-219.webp?tutkfid=226755)
Ponadto wprowadzono również $1, $2, itp., aby uzyskać dostęp do wcześniejszych selekcji. $1 jest elementem, który został wybrany wcześniej, zanim zaznaczono obecny.
![Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-286.webp?tutkfid=226758)
Te skróty ułatwiają dostęp do wielu zaznaczonych elementów i sprawiają, że praca w konsoli jest efektywniejsza.
![Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-311.webp?tutkfid=226762)
Pamiętaj, że podczas korzystania z console.dir() i podobnych funkcji należy zachować ostrożność. Powinny one być używane głównie do celów debugowania i nie powinny być stosowane w kodzie produkcyjnym.
![Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-399.webp?tutkfid=226766)
Teraz możesz łatwo uzyskać dostęp do elementów DOM, które są aktualnie zaznaczone, i nie potrzebujesz do tego konkretnych identyfikatorów ani skomplikowanych selektorów.
![Dostęp do elementów DOM w konsoli – Przewodnik krok po kroku Dostęp do elementów DOM w konsoli - Przewodnik krok po kroku](https://www.tutkit.com/storage/media/text-tutorials/2964/zugriff-auf-dom-elemente-in-der-konsole-eine-schritt-fuer-schritt-anleitung-429.webp?tutkfid=226770)
Podsumowanie
W tym poradniku poznaliśmy różne metody dostępu do elementów DOM w konsoli narzędzi programistycznych Chrome. Uczyłeś się, jak używać identyfikatorów, funkcji i selektorów do manipulowania elementami na swojej stronie internetowej.
Najczęściej zadawane pytania
Jak uzyskać dostęp do elementu bez ID?Użyj document.querySelector() lub document.querySelectorAll().
Jaka jest rola $0 w konsoli?$0 reprezentuje aktualnie zaznaczony element DOM w karcie Elements.
Czy mogę używać console.dir() w czasie produkcji?Nie, lepiej korzystać z tych funkcji tylko do celów debugowania.
Co zrobić, jeśli chcę uzyskać dostęp do wielu elementów?Użyj document.querySelectorAll() i konwertuj listę na tablicę.
Jakie środki ostrożności powinienem zachować podczas korzystania z konsoli?Unikaj korzystania z narzędzi do debugowania w kodzie produkcyjnym, aby uniknąć komplikacji.