Back to Exercises
DOM Tree Preview
Click a button to highlight which DOM node is being referenced.
<html> ...
<body> ...
<main>Main Content</main>
// Selecting nodes
const header = document.getElementById('site-header');
const main = document.querySelector('main');
const footers = document.getElementsByTagName('footer');
Full Code Used in This Demo
HTML
<header id="site-header">Site Header</header>
<main>Main Content</main>
<footer>Footer</footer>
CSS
.node { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; }
JavaScript
function highlight(selector) {
document.querySelectorAll('.node').forEach(n => n.classList.remove('highlight'));
const el = document.querySelector(selector);
if (el) el.classList.add('highlight');
}