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.
Poznámka:
You can edit only the static content in the DOM panel. Read-only or dynamic elements are shown in a darker shade of grey.
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.
-
- The HTML markup of the selected element is highlighted in the DOM panel.
- The applied selector is highlighted in CSS Designer.
- The relevant code is highlighted in the Code view.
- The relevant tag is highlighted (in blue) in Tag Selector.
Alternatively, you can select an HTML element in the DOM panel. When you click any element in the DOM panel:
- Live View scrolls to the corresponding element.
- If Code View is open, the Code View scrolls to the code corresponding to the element.
- CSS Designer (Selectors pane) scrolls to the closest corresponding selector (similar to you clicking the element in Live View).
- The tag is highlighted in the Tag Selector.
-
Proceed to edit the element as required (HTML or CSS editing). For information on using the DOM panel to edit the HTML markup, see Edit HTML structure using the DOM panel. For information on CSS Designer, see Laying out pages using CSS Designer.
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 select an element or a node, click the element or node. To expand or collapse an element or a node, click the HTML tag or double-click the selector adjacent to the tag.
- To duplicate an element or a node, right-click the element or the node, and click Duplicate. When you duplicate an element with an ID associated with it, the ID is incremented for the new (duplicate) element.
- To copy an element or a node, right-click the element or the node, and click Copy. If you have copied an element with children, the child elements are also copied.
- To paste an element or a node, click the element or the node under which you want to nest the copied elements. Then, right-click the element or the node and click Paste.
- To paste the copied element as a child of a specific element or node, right-click the element or node (parent), and then click Paste As Child.
- To move or rearrange elements, drag the element to the required location within the DOM panel.
A green line appears to indicate where the dragged element will be positioned. If you drop the element over the element highlighted in gray (reference element), then the dropped element is positioned as the first child of the reference element.
- To delete an element or a node, right-click the element or the node, and click Delete.
You can undo (Ctrl/Cmd + Z) or redo (Ctrl/Cmd + Y) the operations that you perform in the DOM panel.
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
Poznámka:
Typically, when a page is edited, the Refresh button in the Document toolbar changes to Stop button indicating that the page is reloading. After the page is reloaded, the Refresh button appears again to indicate that the page has completely loaded.
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).
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 (#).
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.
Na príspevky v sociálnych sieťach Twitter™ a Facebook sa nevzťahujú podmienky licencií Creative Commons.