Glossary

DOM (Document Object Model)

DOM is an object representation of an HTML document as a tree of nodes. The browser builds the DOM from HTML and exposes a JavaScript API for reading and modifying the page's structure, styles, and content.

Node tree

html
├── head
│   └── title
└── body
    ├── h1
    └── p

Key operations

// Find an element
const el = document.querySelector('.card');

// Change content
el.textContent = 'Hello';

// Add a class
el.classList.add('active');

// Event listener
el.addEventListener('click', () => console.log('clicked'));

// Create an element
const btn = document.createElement('button');
document.body.appendChild(btn);

Virtual DOM

React and other frameworks build a Virtual DOM — a lightweight in-memory copy. On changes, they diff the old and new trees and update only the changed nodes. This is faster than direct DOM manipulation.