Användarhandbok Avbryt

DOM-panelen

Sök

Senast uppdaterad den 2 maj 2021

Lär dig hur du använder DOM-panelen för att redigera HTML-strukturen genom att mappa element i Live-vyn eller använda väljare i CSS Designer med deras HTML-kod.

DOM-panelen renderar ett interaktivt HTML-träd för både statiskt och dynamiskt innehåll. Den här vyn gör det möjligt att mappa element visuellt i Live-vyn med hjälp av elementens HTML-kod och de väljare som har aktiverats i CSS Designer. Du kan även redigera HTML-strukturen på DOM-panelen och omedelbart se ändringarna i Live-vyn.

Öppna DOM-panelen genom att välja Fönster > DOM. Du kan även öppna DOM-panelen via snabbkommandon: Ctrl+/ (Windows); Cmd+/ (Mac).

När du drar element för att infoga dem direkt på en önskad plats i Live-vyn visas </>-ikonen innan du släpper elementet. Du kan även klicka på den här ikonen för att öppna DOM-panelen och infoga elementet på en lämplig position i dokumentstrukturen. Mer information finns i Infoga element direkt i Live-vyn.

DOM-panelen visar bara statiska element i kodvyn eller designvyn och både statiska och dynamiska element i Live-vyn.

I dokument med flytande stödraster kan du endast visualisera HTML DOM-strukturen på DOM-panelen. Du kan inte redigera HTML-strukturen på DOM-panelen.

Obs!

Du kan endast redigera statiskt innehåll på DOM-panelen. Skrivskyddade eller dynamiska element visas med en mörkare nyans av grå.

Du kan flytta DOM-panelen och placera den på den plats i användargränssnittet som passar dig bäst. Du kan också docka panelen med andra paneler.

Så här använder du DOM-panelen

Öppna dokumentet som behövs och öppna sedan DOM-panelen genom att välja Fönster > DOM.
Växla till Live-vyn och klicka på det element som du vill inspektera eller redigera.
- HTML-koden för det valda elementet är markerat på DOM-panelen.
- Den använda väljaren markeras i CSS Designer.
- Den relevanta koden är markerad i kodvyn.
- Den relevanta taggen markeras (med blå färg) i taggväljaren.
Du kan också välja ett HTML-element på DOM-panelen. Följande händer när du klickar på ett element på DOM-panelen:
- Live-vyn bläddrar till motsvarande element.
- Om kodvyn är öppen rullar kodvyn till den kod som motsvarar elementet.
- CSS Designer (panelen Väljare) rullar till närmast motsvarande väljare (på ett sätt som påminner om vad som händer när du klickar på elementet i Live-vyn).
- Taggen markeras i taggväljaren.
Synkroniseringen mellan olika vyer och CSS Designer gör det möjligt att direkt visa HTML-koden och det format som är associerat med det valda elementet.
Fortsätt att redigera elementet enligt dina önskemål (HTML- eller CSS-redigering). Mer information om att använda DOM-panelen för att redigera HTML-koden finns i Redigera HTML-strukturen med DOM-panelen. Mer information om CSS Designer finns i Utforma sidor med hjälp av CSS Designer.

Använda DOM-panelen för att redigera HTML-struktur

Det aktuella valda elementet på den här sidan är markerat på DOM-panelen. Du kan använda piltangenterna för att navigera till en valfri nod eller ett valfritt element.

Tangentbordsgenvägar:

Duplicera - Ctrl+D (Win)/Cmd+D (Mac)
Ta bort - Del eller Backsteg
Kopiera - Ctrl+C (Win)/Cmd+C (Mac)
Klistra in - Ctrl+V (Win)/Cmd+V (Mac)
Ångra - Ctrl+Z (Win)/Cmd+Z (Mac)
Gör om - Ctrl+Y (Win)/Cmd+Y (Mac)

Du markerar ett element eller en nod genom att klicka på elementet eller noden. Du kan visa eller dölja ett element eller en nod genom att klicka på HTML-taggen eller dubbelklicka på väljaren intill taggen.
Du kan duplicera ett element eller en nod genom att högerklicka på elementet eller noden och sedan klicka på Duplicera. När du duplicerar ett element som har ett kopplat id, ökas detta id med ett för det nya (duplicerade) elementet.
Du kan kopiera ett element eller en nod genom att högerklicka på elementet eller noden och sedan klicka på Kopiera. Om du har kopierat ett element som har underordnade element, kopieras även de underordnade elementen.
Du kan klistra in ett element eller en nod genom att klicka på det element eller den nod du vill kapsla de kopierade elementen i. Högerklicka sedan på elementet eller noden och klicka på Klistra in.
Du kan klistra in det kopierade elementet som ett underordnat element till ett specifikt element eller en specifik nod genom att högerklicka på det överordnade elementet eller noden och välja Klistra in som underordnad.
Om du vill flytta eller ändra ordning på element drar du elementen till önskad plats på DOM-panelen.

En grön linje visas som anger var elementet kommer att placeras. Om du släpper elementet över det gråmarkerade elementet (referenselementet) så placeras elementet som det första underordnade elementet till referenselementet.

Du kan ta bort ett element eller en nod genom att högerklicka på elementet eller noden och sedan klicka på Ta bort.

Du kan ångra (Ctrl/Cmd+Z) eller göra om (Ctrl/Cmd+Y) de åtgärder du utför på DOM-panelen.

För att utföra redigeringsåtgärderna ovan på flera element markerar du flera element i DOM-panelen:

Håll ned Skift och klicka på önskade element om du vill göra en sammanhängande markering.
Håll ned Ctrl och klicka på önskade element om du vill göra en markering som inte hänger ihop.

Obs!

När du redigerar en sida ändras vanligen knappen Uppdatera i verktygsfältet Dokument till Stopp för att visa att sidan håller på att läsas in igen. När sidan har lästs in igen visas knappen Uppdatera igen för att visa att sidan har lästs in helt.

Viktigt: Om sidan innehåller JavaScript visas högerklicksmenyn på DOM-panelen en stund, sedan blir den otillgänglig. Om du vill använda högerklicksmenyn döljer du visning av Live-vyn (Live-visningsalternativ > Dölj visning av Live-vyn) och inaktiverar sedan JavaScript (Live-visningsalternativ > Inaktivera JavaScript).

Redigera taggar, klasser och ID:n i DOM-panelen

Du kan redigera taggar, klasser och ID:n genom att dubbelklicka på dem i DOM-panelen. Du kan även lägga till fler klasser eller ID:n genom att avgränsa dem med blanksteg. För taggar som inte är associerade med en klass eller ett ID kan du skriva namnet på klassen eller ID:t efter att du dubbelklickat på taggen.

När du börjar skriva taggen, klassen eller ID-namnet visas kodtips. För att begränsa tipsen till klasser skriver du en punkt först. För att tipsen bara ska visa ID:n skriver du ett fyrkanstecken först (#).

Infoga element på DOM-panelen

Nu kan du infoga nya element direkt på din webbsida från DOM-panelen på något av följande sätt:

Klicka på mellanslagstangenten eller infogningsikonen bredvid det önskade elementet i DOM-panelen. Klicka på något av alternativen i snabbmenyn som visas. För att omsluta flera element i en tagg väljer du det önskade elementet och väljer Radbryt tagg från infogningsalternativen.

Klicka på ett önskat element i Infoga-panelen och dra det till DOM-panelen. Live-stödlinjer visas för att ange var elementet kommer att infogas. Släpp elementet på önskad plats.

När du infogar taggar med hjälp av DOM-panelen infogas även standardtext (platshållare) och obligatoriska attribut för taggarna:

Om du infogar någon av de följande taggarna och utför ändringar infogas standardtext i kodvyn, Live-vyn och designvyn:
div, header, nav, aside, article, section, footer, h1-h6 och hgroup
Om du infogar en table-tagg och utför ändringar infogas en 3x3-tabell.
Om du infogar en embed- eller img-tagg och utför ändringar visas dialogrutan Välj fil och du uppmanas välja en fil.
Om du infogar en metatagg och utför ändringar läggs följande kod till i kodvyn: <meta name="" content="">
Om du infogar en figure-tagg och utför ändringar infogas en figure-tagg med inkapslad figcaption.
Om du infogar en ul-tagg eller en ol-tagg och utför ändringar infogas en ol-/ul-tagg med inkapslad li.