V této příručce se dozvíš, jak můžeš přistupovat k DOM prvkům v konzoli nástrojů pro vývojáře Chrome. To je zvláště důležité pro webové vývojáře, kteří pracují s HTML a JavaScript prvky. V video-Návodu se naučíš mnoho užitečných tipů a triků, jak snadno vybírat a manipulovat s DOM prvky.
Nejdůležitější poznatky
- Můžeš přistupovat k DOM prvkům přímo pomocí globálních proměnných, konzolových funkcí a zkratky.
- Učíš se také, jak zobrazit a manipulovat minulá výběry.
Krok za krokem návod
Nejdříve bys měl/a zjistit, zda máš otevřené nástroje pro vývojáře Chrome. To můžeš udělat kliknutím pravým tlačítkem myši na webovou stránku a vybráním "Inspect" nebo použitím klávesové zkratky Ctrl + Shift + I.
Nyní se podíváme, jak můžeš přistupovat k určitému DOM prvku.
![Přístup k prvkům DOM v konzoli – Krok za krokem návod Přístup k prvkům DOM v konzoli - Návod krok za krokem](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)
Pokud máš na své stránce DOM prvek, jako je například s ID "App", můžeš tento prvek oslovit přímo přes konzoli. Všechny prvky s ID jsou globálně dostupné v objektu window.
![Přístup k DOM elementům v konzoli - průvodce krok za krokem Přístup k prvkům DOM v konzoli - Krok za krokem návod](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)
Toto ID můžeš jednoduše zobrazit zadáním window.App do konzole. To ti zobrazí odpovídající DOM prvek a můžeš ho rozbalit pro přístup k jeho podprvkům a atributům.
Předpokládejme, že musíš zavolat funkci videa, které je k dispozici na tvé stránce. Můžeš tak učinit pomocí play, pokud tento prvek tuto metodu podporuje.
![Přístup k prvkům DOM v konzoli - Krok za krokem návod Přístup k prvkům DOM v konzoli - Průvodce krok za krokem](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)
Abys viděl/a všechny vlastnosti a funkce DOM prvku, můžeš použít funkci console.dir(). Pokud zadáš console.dir(window.App), získáš přehlednou reprezentaci všech vlastností a metod DOM prvku.
![Přístup k prvkům DOM v konzoli - krok za krokem návod Přístup k DOM elementům v konzoli - krok za krokem návod](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)
Pokud prvek nemá žádné ID, můžeš na něj stále přistupovat pomocí document.querySelector(). To funguje také pro celé document.body, pokud k němu chceš přistupovat.
![Přístup k prvkům DOM v konzoli - Krok za krokem návod Přístup k prvkům DOM v konzoli - Průvodce postupnými kroky](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)
Pro specifičtější výběry můžeš použít document.querySelector() nebo také document.querySelectorAll(), abys získal/a seznam prvků odpovídajících danému selektoru.
![Přístup k DOM prvkům v konzoli - Krok za krokem návod Přístup k prvkům DOM v konzoli - Průvodce krok za krokem](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)
Tyto seznamy mohou být zpracovány jako pole, takže je můžeš převést pomocí Array.from(), abys mohl/a pracovat s jejich prvky.
Praktickým zkratkou, kterou můžeš v konzoli použít, je $0. Tím získáš přístup k aktuálně vybranému DOM prvku v záložce Prvky. Pokud zadáš $0 a stistkneš klávesu enter, uvidíš, který prvek je aktuálně označen.
![Přístup k prvkům DOM v konzoli – krok za krokem návod Přístup k prvkům DOM v konzoli - Krok za krokem návod](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)
Kromě toho byly zavedeny také $1, $2, atd., aby sis mohl/a zobrazit předchozí výběry. $1 je prvek, který jsi vybral/a předtím než jsi vybral/a aktuální.
![Přístup k DOM prvkům v konzoli - Průvodce krok za krokem Přístup k DOM prvkům v konzoli - Krok za krokem návod](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)
Tyto zkratky ti usnadňují přístup k více vybraným prvkům a efektivnější práci v konzoli.
![Přístup k prvkům DOM v konzoli - Krok za krokem návod Přístup k prvkům DOM v konzoli - krok za krokem návod](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)
Pamatuj, že při používání funkce console.dir() a podobných funkcí je třeba opatrnosti. Tyto by měly být použity především pro účely ladění a neměly by být používány v produkčním kódu.
![Přístup k prvkům DOM v konzoli – Návod krok za krokem Přístup k prvkům DOM v konzoli – krok za krokem postupující návod](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)
Nyní můžeš snadno přistupovat k DOM prvků, které jsou právě vybrány, a nemusíš k tomu používat specifická ID nebo složité selektory.
![Přístup k prvkům DOM v konzoli – krok za krokem návod Přístup k prvkům DOM v konzoli - krok za krokem průvodce](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)
Shrnutí
V této příručce jsme se naučili různé metody, jak přistupovat k prvkům DOM v konzoli Chrome Developer Tools. Naučil ses, jak můžeš použít ID, funkce a selektory k manipulaci s prvky na svých webových stránkách.
Často kladené dotazy
Jak přistupuji k prvku bez ID?Použijte document.querySelector() nebo document.querySelectorAll().
Co je $0 v konzoli?$0 reprezentuje aktuálně vybraný prvek DOM v panelu Prvky.
Mohu použít console.dir() v produkci?Ne, je lepší tyto funkce používat pouze pro účely ladění.
Co mám dělat, pokud chci získat přístup k více prvkům?Použijte document.querySelectorAll() a převeďte seznam na pole.
Jaká bezpečnostní opatření bych měl dodržovat při používání konzole?Vyvarujte se použití nástrojů pro ladění v kódu produkce, abyste předešli komplikacím.