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.

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.

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

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.

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.