DOM panel

The DOM panel renders an interactive HTML tree for static and dynamic content. This view helps you visually map elements in Live View with their HTML markup and the applied selectors in CSS Designer. You can also make edits to the HTML structure in the DOM panel and see the changes take effect instantly in Live View.

To open the DOM panel, select Window > DOM. You can also use the keyboard keys - Ctrl + / (Win); Cmd + / (Mac) - to open the DOM panel.

When you drag elments to directly insert them in Live View, the </> icon appears before you drop the element. You can click this icon to open the DOM panel and insert the element at the appropriate position in the document structure. For more information, see Insert elements directly in Live View.

The DOM panel displays only static elements in Code or Design view, and both static and dynamic elements in Live view.

In fluid grid documents, the DOM panel only lets you visualize the HTML DOM structure and does not let you edit the HTML structure.

You can move around the DOM panel and place it at any convenient location on the user interface. You can also dock the panel along with other panels.

Edit HTML structure using the DOM panel

The current selected element on the page is highlighted in the DOM panel. You can navigate to any node or element using the arrow keys.

To perform the above mentioned editing operations on multiple elements, select mutliple elements in the DOM panel:

• Shift + click the required elements for contiguous selection
• Ctrl + click the required elements for non-contiguous selection

Important: If your page contains JavaScript, the right-click menu in the DOM panel gets displayed for a while and then becomes unavailable. To use the right-click menu, hide the Live View displays (Live View options > Hide Live View Displays), and then disable JavaScript (Live View options > Disable JavaScript).

Edit tags, classes, and IDs in DOM panel 

You can edit tags, classes, and IDs by double-clicking them in the DOM panel. You can also add additional classes or IDs by separating them with a space. For tags that are not associated with a class or ID, you can type the name of the class or ID after double-clicking the tag.

Code hints appear as you begin typing the tag, class, or ID name. To narrow down the hints to classes, begin typing with a dot. To see only the IDs in the hints, begin typing with a hash (#).

Insert elements in DOM panel

You can now insert new elements into your web page using the DOM panel in one of the following ways:

• Press the Spacebar or click the insert icon adjacent to the required element in the DOM panel. In the pop-up that appears, click one of the options. To wrap multiple elements with a tag, select the required elements and then choose Wrap Tag from the insert options.

• Click the required element in the Insert panel and drag it to the DOM panel. Live Guides appear to indicate where the element will be inserted. Drop the element at the required location.

When you insert tags using the DOM panel, default (placeholder) text and required attributes for the tags are also inserted:

• When you insert any of the following tags and commit changes, default text is inserted in Code, Live, and Design view:
  div, header, nav, aside, article, section, footer, h1-h6, and hgroup
• When you insert a table tag and commit the changes, a 3X3 table is inserted.
• When you insert an embed or img tag and commit the changes, the Select File dialog box appears and prompts you to select an appropriate file.
• When you insert a meta tag and commit the changes, the following code is added in Code view: <meta name="" content="">
• When you insert a figure tag and commit the changes, a figure tag with nested figcaption is inserted.
• When you insert a ul or an ol tag and commit the changes, an ol/ul tag with nested li tag is inserted.