[Focus Mode] New content and images for the Console DOM interaction article

[captainbrosset]

This article was using a learn.microsoft.com page for demos, which isn't great. If the site changes, we need to redo the article.
I created a new simple demo on our usual demos repo, and changed the article's content to match. I also updated all screenshots to match with Focus Mode.

Before: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction

After: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction?branch=pr-en-us-2881

AB#47125440

[mikehoffms]

Writer/Editor review pass 1

[mikehoffms]

Writer/Editor 2nd review, entered 1 Suggestion comment

[learn-build-service-prod]

Learn Build status updates of commit fc94a07:

✅ Validation status: passed

File	Status	Preview URL	Details
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction.md	✅Succeeded	View
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-add-border.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-change-content.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-complex-css-selector.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-copy-JS-path.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-filter-link-data.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-filter-out-empty-links.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-get-all-links.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-get-form-events.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-get-generated-headings.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-get-reference.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-highlight-documentation.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-highlight-element.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-highlight-links.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-monitor-events.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-monitor-key-events.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-overflow-menu-in-elements.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-too-much-link-information.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/console-dom-use-inspector-to-get-element.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/copy-js-path-menu.png	✅Succeeded	View
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/event-listener-properties.png	✅Succeeded	View
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/external-links.png	✅Succeeded	View
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/get-main-element.png	✅Succeeded	View
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/heading-links.png	✅Succeeded	View
microsoft-edge/devtools-guide-chromium/console/console-dom-interaction-images/highlight-on-hover.png	✅Succeeded	View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

For any questions, please:

• Try searching the learn.microsoft.com contributor guides
• Post your question in the Learn support channel