DOM & Browser Rendering

For untrusted text, prefer textContent instead of interpreting it as HTML. If rich HTML is required, use an appropriate sanitizer and security controls.

8. Separation of Responsibilities

• HTML: structure and meaning.
• CSS: presentation and layout.
• JavaScript: behavior, state and dynamic updates.

This is a useful guideline rather than an absolute rule. HTML can include style and script elements, but separating concerns usually improves maintainability.

Common Mistakes

• Confusing the HTML source with the current DOM.
• Running JavaScript before required elements exist.
• Assuming every DOM change forces a full page redraw.
• Using unsafe HTML insertion for user-generated content.
• Optimizing without measuring real performance.

Practice Exercises

1. Use JavaScript to change an h1 through the DOM.
2. Create a list of course names dynamically.
3. Explain the difference between HTML and the DOM.
4. Describe the simplified path from HTML parsing to page rendering.

Revision Quiz

1. What does DOM stand for?
2. What does the DOM represent?
3. Which browser representation contains parsed CSS rules and style information?
4. Which property updates an element's text safely?
5. Does every DOM update force a full page redraw?
6. Which language primarily defines page structure?

Answer Key and Explanations

1. Document Object Model — It is the programming interface for the document.
2. A tree of document objects — JavaScript can query and modify these objects.
3. CSSOM — It represents CSS rules and related style information.
4. textContent — It sets text rather than interpreting the value as HTML.
5. No. The browser performs only the rendering work required by the change.
6. HTML — It describes document structure and meaning.