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.

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.

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.

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.

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.

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.

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.

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í.

Tyto zkratky ti usnadňují přístup k více vybraným prvkům a efektivnější práci v konzoli.

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.

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.

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.