User Guide Cancel

DOM panel

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how to use the DOM panel to edit the HTML structure by mapping elements in Live View or applied selectors in CSS Designer with their HTML markup.

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.

Note:

You can edit only the static content in the DOM panel. Read-only or dynamic elements are shown in a darker shade of grey.

DOM panel
DOM panel

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.

How to use the DOM panel

  1. Open the required document and then open the DOM panel by selecting Window > DOM.

  2. Switch to Live view and click the element that you want to inspect or edit.

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

    This syncing between different views and CSS Designer lets you visualize the HTML markup and styling associated with the selected element at a glance. 

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

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.

Keyboard shortcuts:

  • Duplicate - Ctrl + D (Win)/ Cmd + D (Mac)
  • Delete - Del or Backspace
  • Copy - Ctrl + C (Win)/Cmd + C (Mac)
  • Paste - Ctrl + V (Win)/Cmd + V (Mac)
  • Undo - Ctrl + Z (Win)/Cmd + Z (Mac)
  • Redo - Ctrl + Y (Win)/Cmd + Y (Mac)
  • 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
Note:

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.

Editing options in the DOM panel
Editing options in the DOM panel

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 (#).

Edit classes
Edit classes

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.
Insert options in DOM panel
Insert options in DOM panel

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

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy