![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

What is the difference between [HTML and DOM](https://developer.chrome.com/docs/devtools/dom.md.txt#appendix)? In short, HTML represents the initial page content and the DOM (Document Object Model) represents the current content in a tree of objects.

[Video](https://www.youtube.com/watch?v=J-02VNxE7lE)

Watch the video to learn how to:

- [Inspect the DOM](https://developer.chrome.com/docs/devtools/dom.md.txt#inspect) and see elements highlighted in the viewport on hover.
- [Search for nodes](https://developer.chrome.com/docs/devtools/dom.md.txt#search) in the DOM.
- [Scroll elements into view](https://developer.chrome.com/docs/devtools/dom.md.txt#scroll1).
- [Manipulate the DOM with `$` commands](https://developer.chrome.com/docs/devtools/console/utilities.md.txt).
- [Reference the currently-selected node with $0](https://developer.chrome.com/docs/devtools/dom.md.txt#current).
- [Edit the DOM](https://developer.chrome.com/docs/devtools/dom.md.txt#edit).
- [Drag DOM nodes to reorder](https://developer.chrome.com/docs/devtools/dom.md.txt#reorder).
- [Add attributes](https://developer.chrome.com/docs/devtools/dom.md.txt#attributes).

To learn more, see:

- [Get started with viewing and changing the DOM](https://developer.chrome.com/docs/devtools/dom.md.txt)
- [HTML versus the DOM](https://developer.chrome.com/docs/devtools/dom.md.txt#appendix)
- [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)