The DOM as a Tree
The Document Object Model represents an HTML document as a tree of nodes. JavaScript can query and modify this structure. DOM manipulation is host functionality supplied by browsers; it is not part of ECMAScript itself.
Efficient DOM work often means minimizing unnecessary layout, style recalculation, and rendering work rather than simply minimizing JavaScript statements.
Selecting and Updating the DOM
const heading = document.querySelector('h1');
if (heading) {
heading.textContent = 'JavaScript';
}💡 querySelector returns the first matching element. textContent updates its text without interpreting the value as HTML.
Key Takeaways
- The DOM is a browser-provided representation of the document.
- JavaScript can query and mutate DOM nodes.
- textContent is generally safer than innerHTML for plain text.
Knowledge Check
Is the DOM part of the ECMAScript language specification?