What is it?
The DOM is the in-memory tree of HTML elements your browser builds while
parsing a page. JavaScript reads, writes, and listens to that tree using
a small API: querySelector, addEventListener, classList,
textContent, appendChild. React eventually does all this for you, but
under the hood it's still these calls.
Why it matters
Frameworks abstract the DOM. They don't replace it. The day a React component does the wrong thing in a portal, you'll need to read the real tree in devtools and reason about what JavaScript is touching it. "Plain DOM" experience is the difference between fixing it and shrugging.
What to learn
- Tree walking:
parentNode,childNodes,nextElementSibling - Selection:
querySelector/querySelectorAlland CSS-selector power - Reading:
textContent,innerHTML(and the security implications) - Writing:
classList,setAttribute,style,dataset - Events:
addEventListener, event bubbling,event.targetvscurrentTarget - Event delegation — one listener for many children
Common pitfall
Using innerHTML to insert user-provided content. It runs as HTML, which
means a string with <script> tags can execute code. Use textContent
for text, and only use innerHTML with content you control end-to-end.
Resources
Primary (free):
- MDN — DOM Introduction · docs
- JavaScript.info — DOM · docs
- MDN — addEventListener · docs
Practice
Build a to-do list with vanilla JS — no frameworks. Add, complete, and delete items. Use event delegation: one listener on the list, not one per item. Done when adding a thousand items doesn't slow the page and the listener count in devtools stays at one.
Outcomes
- Pick the right DOM API to read or change any element on a page.
- Use event delegation to handle dynamic lists efficiently.
- Avoid
innerHTMLfor anything user-influenced. - Read the DOM tree in devtools and predict what an event will trigger.