Příručka uživatele Zrušit

Panel DOM

Hledat

Naposledy aktualizováno 19. 5. 2021

Zjistěte, jak používat panel DOM a s jeho pomocí upravit strukturu HTML mapováním elementů v živém zobrazení nebo použitých selektorech na panelu CSS Designer se značkami HTML.

Panel DOM nabízí přístup k interaktivnímu stromu HTML se statickým i dynamickým obsahem. Toto zobrazení lze použít k vizuálnímu mapování elementů v živém zobrazení doplněném o značky HTML a použité selektory v nástroji CSS Designer. Na panelu DOM je také možné měnit strukturu HTML a provedené změny okamžitě přenášet do živého zobrazení.

Panel DOM otevřete výběrem příkazu Okna > DOM. K otevření panelu DOM lze použít také kombinace kláves „Ctrl“ a „/“ (Windows) nebo „Cmd“ a „/“ (Mac).

Pokud začnete přetažením elementu s cílem vložit jej do živého zobrazení, zobrazí se před dokončením přetažení elementu ikona </>. Kliknutím na tuto ikonu můžete otevřít panel DOM a vložit element na vhodné místo ve struktuře dokumentu. Další informace viz Vložení elementů přímo do živého zobrazení.

Panel DOM v zobrazení kódu nebo návrhu obsahuje pouze statické elementy a v živém zobrazení statické i dynamické elementy.

V dokumentech s plovoucí mřížkou umožňuje panel DOM pouze vizualizaci struktury HTML DOM bez možnosti tuto strukturu HTML měnit.

Poznámka:

Na panelu DOM lze měnit výhradně statický obsah. Dynamické elementy a elementy pouze pro čtení jsou uvedeny v tmavším odstínu šedé.

Panel DOM můžete volně přesouvat a umístit jej na nejvhodnější místo v uživatelském rozhraní. Panel můžete také ukotvit s ostatními panely.

Postup použití panelu DOM

Otevřete požadovaný dokument a poté výběrem možnosti Okna > DOM otevřete panel DOM.
Přejděte na živé zobrazení a klikněte na element, který chcete prohlédnout nebo upravit.
- Na panelu DOM se označí značky HTML vybraného elementu.
- V nástroji CSS Designer se označí použitý selektor.
- V zobrazení kódu se označí související kód.
- V selektoru tagů se modře označí související tag.
Případně můžete vybrat element HTML na panelu DOM. Po kliknutí na některý element na panelu DOM:
- Živé zobrazení přejde k odpovídajícímu elementu.
- Pokud se nacházíte v zobrazení kódu, toto zobrazení kódu přejde ke kódu odpovídajícímu danému elementu.
- Nástroj CSS Designer (panel Selektory) přejde k nejbližšímu odpovídajícímu selektoru (stejně jako při kliknutí na element v živém zobrazení).
- V selektoru tagů se označí tag.
Tato synchronizace mezi jednotlivým zobrazením a nástrojem CSS Designer umožňuje snadnou vizualizaci značek HTML a stylů souvisejících s vybraným elementem.
Podle potřeby přejděte k úpravě elementu (úprava HTML nebo CSS). Informace o používání panelu DOM pro úpravu značek HTML naleznete v tématu Úprava struktury HTML pomocí panelu DOM. Další informace o panelu CSS Designer naleznete v tématu Rozvržení stránek pomocí panelu CSS Designer.

Úprava struktury HTML pomocí panelu DOM

Na panelu DOM se označí aktuálně zvolený element na stránce. Pomocí kláves se šipkami můžete přejít k libovolnému uzlu nebo elementu.

Klávesové zkratky:

Duplikovat – Ctrl + D (Win) / Cmd + D (Mac)
Odstranit – Del nebo Backspace
Kopírovat – Ctrl + C (Win) / Cmd + C (Mac)
Vložit – Ctrl + V (Win) / Cmd + V (Mac)
Zpět – Ctrl + Z (Win) / Cmd + Z (Mac)
Znovu – Ctrl + Y (Win) / Cmd + Y (Mac)

Element či uzel můžete vybrat tak, že na něj kliknete. Element nebo uzel můžete rozbalit nebo sbalit kliknutím na tag HTML nebo dvojitým kliknutím na selektor u daného tagu.
Jestliže chcete element nebo uzel duplikovat, klikněte na něj pravým tlačítkem a poté na možnost Duplikovat. Při duplikování elementu s přidruženým ID dojde u ID nového (duplicitního) prvku k jeho navýšení.
Jestliže budete chtít element nebo uzel kopírovat, klepněte na něj pravým tlačítkem a poté klepněte na možnost Kopírovat. Pokud jste zkopírovali element i s podřízeným prvkem, zkopírují se také podřízené elementy.
Budete-li chtít element či uzel vložit, klepněte na element nebo uzel, do kterého chcete zkopírované elementy vnořit. Následně klepněte pravým tlačítkem na element nebo uzel a poté na možnost Vložit.
Chcete-li vložit zkopírovaný element jako podřízený element určitého elementu nebo uzlu, klikněte pravým tlačítkem na element nebo uzel (nadřazený) a poté na možnost Vložit jako podřízené.
Elementy můžete přesouvat, případně můžete měnit jejich pořadí přetažením na požadované umístění na panelu DOM.

Při přenášení se zobrazí zelená čára, která vám napoví budoucí polohu elementu. Po přenesení na šedě vyznačený referenční element se přenášený element umístí do pozice prvního podřízeného elementu daného referenčního elementu.

Jestliže chcete element nebo uzel odstranit, klikněte na něj pravým tlačítkem a poté klikněte na možnost Odstranit.

Akce na panelu DOM můžete vrátit (Ctrl/Cmd + Z) nebo provést znovu (Ctrl/Cmd + Y).

Pokud budete chtít provést výše uvedené úpravy u více elementů, vyberte na panelu DOM několik elementů:

Přidržte klávesu Shift a klikněte na elementy, které chcete postupně přidat.
Přidržte klávesu Ctrl a klikněte na elementy, které chcete přidat mimo posloupnost.

Poznámka:

Při úpravě stránky se tlačítko Obnovit na panelu nástrojů Dokument obvykle změní na tlačítko Zastavit, což značí, že se daná stránka obnovuje. Po obnovení stránky se tlačítko Obnovit znovu zobrazí. Tím poznáte, že daná stránka byla zcela načtena.

Důležité: Pokud stránka obsahuje skript v jazyce JavaScript, nabídka dostupná po kliknutí pravým tlačítkem na panelu DOM se na chvíli zobrazí a poté bude nedostupná. Chcete-li použít nabídku dostupnou po kliknutím pravým tlačítkem, skryjte živá zobrazení (Možnosti živého zobrazení > Skrýt živé zobrazení) a poté zakažte jazyk JavaScript (Možnosti živého zobrazení > Zakázat JavaScript).

Úprava tagů, tříd a ID na panelu DOM

Podle potřeby můžete upravovat tagy, třídy a ID dvojitým kliknutím na tyto objekty na panelu DOM. Můžete také přidávat další třídy a ID oddělené mezerou. V případě tagů, které nejsou spojeny s třídou nebo ID, můžete dvakrát kliknout na tag a zadat název třídy nebo ID.

Rady při psaní kódu se zobrazí, jakmile začnete psát název tagu, třídy nebo ID. Pokud budete chtít omezit rady pouze na třídy, začněte slovo psát tečkou. Pokud budete chtít zobrazit rady pouze pro ID, začněte slovo psát mřížkou (#).

Vkládání elementů na panelu DOM

Nově můžete jedním z následujících způsobů vkládat nové elementy na svoji webovou stránku za pomoci panelu DOM:

Stiskněte mezerník nebo klikněte na ikonu vložení vedle požadovaného elementu na panelu DOM. V nově otevřeném místním okně klikněte na některou z možností. Pokud budete chtít uzavřít do tagu více elementů, vyberte požadované elementy a z možností vložení použijte příkaz Uzavřít do tagu.

Na panelu Vložit klikněte na požadovaný element a přetáhněte jej na panel DOM. Zobrazí živá vodítka značící polohu, ve které bude element vložen. Element přetáhněte na požadované místo.

Pokud vložíte tagy pomocí panelu DOM, vloží se také související výchozí (zástupný) text a požadované atributy pro tagy:

Pokud vložíte některý z následujících tagů a potvrdíte změny, do zobrazení Kód, zobrazení Živý kód a zobrazení Návrh se vloží výchozí text:
div, header, nav, aside, article, section, footer, h1–h6 a hgroup
Pokud vložíte tag table a potvrdíte změny, vloží se tabulka 3 x 3.
Pokud vložíte tag embed nebo img a potvrdíte změny, zobrazí se dialogové okno Vybrat soubor a vyzve vás k výběru vhodného souboru.
Pokud vložíte tag meta a potvrdíte změny, do zobrazení Kód se přidá následující kód: <meta name="" content="">
Pokud vložíte tag figure a potvrdíte změny, vloží se tag figure se vnořeným tagem figcaption.
Pokud vložíte tag ul nebo ol a potvrdíte změny, vloží se tag ol/ul se vnořeným tagem li.

Získejte pomoc rychleji a snáze

Nový uživatel?