A very relevant question you may ask would be if DOM and HTML are the same. This is meant to be a very tricky question, because visually, they look similar. HTML is the code used to build the page; when the browser takes the HTML and renders it, it becomes the DOM.
Two differences between the DOM and the HTML are as follows. If the HTML has an error (for example, if you create an <li> element without the closing </li>), the browser will insert it, making the DOM correct. The second difference is that you can modify the content of the DOM in real time, via JavaScript.
Selenium can only interact with the elements that a real user can interact with. This means that if a real user cannot click or type on an element, Selenium won't be able to either.
Now, we will briefly jump to the DOM's structure. This will help you to learn how elements are placed and how they can be navigated through. Let's analyze the following diagram:
All of the items between tags (< and >) are elements of the DOM, and all of the nested elements become children of the elements enclosing them. Similarly, elements that are next to each other at the same level are considered siblings.
In the preceding diagram, the elements <h1> and <a> are children of the <body> element, which becomes their parent element. In the same vein, the elements <h1> and <a> are siblings; <h1> is the first child, and <a> is the last child.