Two testers, one bug report. "The delete confirmation is not appearing." The developer could not reproduce it. The dialog was there in the HTML the whole time, sitting behind the page with the opacity turned down to zero.
The tester was looking at the screen. The test was looking at the DOM. They disagreed, and that disagreement is one of the most common sources of confusion for beginners.
The DOM is the browser's live model of the page. DOM stands for Document Object Model. When the browser receives HTML, it builds this structure in memory: a tree of elements, each with its tag, attributes and text. Every framework you will use finds elements by searching this tree.
The key word is live. The DOM is not the HTML file that arrived. It is a model that JavaScript keeps changing while the page runs. Rows get added, dialogs get inserted, error messages appear and vanish. The HTML you would see in "view source" is only the starting point.
⚠️ Common confusion: the screen is not the DOM.
These are two different things, and they disagree in both directions:
- In the DOM, not on screen. An element can exist but be hidden by CSS, positioned off screen, fully transparent, or covered by something on top of it.
- On screen, not where you expect in the DOM. Dialogs and dropdowns are often attached at the very bottom of the tree, far from the button that opened them, even though they appear in the middle of the screen.
This explains failures that feel impossible when you first meet them.
"Element not found" while you are looking right at it. Usually the element arrived after your test looked, or it lives inside a part of the tree your search did not cover.
"Element not visible" for something you can plainly see. The framework checks the element's real state: size, visibility, and whether anything covers it. A leftover invisible overlay from a closed dialog will block clicks while looking like nothing at all.
A test that passes on a broken app. If you check that an error message element exists, and the app renders that element permanently but empty, your check passes forever. Existing in the DOM and being shown to a user are not the same claim.
The practical habit: when a test disagrees with your eyes, believe the DOM and go look at it. Open the browser's Elements tab and find the element there. The next lecture is about exactly that.
Remember this: the DOM is a live tree that JavaScript keeps editing, and your test reads the tree, not the picture.
Reference: MDN, the DOM explained.