✦ DOM STRUCTURE VIEWER — LUXE NOIR WEBSITE     ✦ CLICK ANY NODE TO EXPAND / COLLAPSE     ✦ COS 106 ASSIGNMENT — MIVA UNIVERSITY     ✦ BUILT WITH SEMANTIC HTML5, EXTERNAL CSS & JAVASCRIPT

Technical

DOM Structure

Document Object Model diagram of the LUXE NOIR website

What is the DOM?

Document Object Model

The DOM (Document Object Model) is a programming interface for web documents. It represents the page as a tree of nodes — every HTML element, attribute, and piece of text is a node in this tree. JavaScript uses the DOM to dynamically read and modify page content, structure, and style.

Element node (HTML tag)
Attribute
Attribute value
Text node / content

Shared Structure

Common Page DOM

Every page in the LUXE NOIR website follows this consistent DOM structure. Click any node to expand or collapse its children.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="[page description]"/>
<title> LUXE NOIR | [Page Name] </title>
<link rel="stylesheet" href="styles.css"/> ← External CSS
<body>
<div class="marquee-bar"> ← Appears on ALL pages
<marquee behavior="scroll" direction="left">
"✦ Upcoming events, news, and announcements…"
</marquee>
<nav>
<div class="nav-logo"> LUXE NOIR </div>
<ul class="nav-links">
<li><a href="index.html"> Home </a></li>
<li><a href="products.html"> Collections </a></li>
<li><a href="events.html"> Events </a></li>
<li><a href="trustees.html"> Board of Trustees </a></li>
<li><a href="inquiries.html"> Inquiries </a></li>
<li><a href="dom.html"> DOM </a></li>
<button id="theme-toggle"> ☀️ Light Mode </button>
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-content">
<p class="hero-eyebrow"> [Sub-heading] </p>
<h1 class="hero-title"> [Page Title] </h1>
<p class="hero-subtitle"> [Subtitle] </p>
… [page-specific content sections] …
<footer>
<div class="footer-logo"> LUXE NOIR </div>
<ul class="footer-links"> … 6 links … </ul>
<p class="footer-copy"> © [year] LUXE NOIR </p>
<script src="main.js"></script> ← External JS (shared)
<script> … page-specific JS … </script>
Page Overview Table
Page File Unique Section JS Feature
Home index.html Hero, Featured Products, Event Teaser Live Clock, Countdown Timer (Runway)
Collections products.html 8-item product grid with category tags Category Filter, Lightbox on click
Events events.html Detailed D/H/M/S countdown, 5-event list 4-unit Countdown, Live Clock
Board of Trustees trustees.html Grid of 6 member cards with photos Profile Modal, Hover Glow
Inquiries inquiries.html Contact form, calendar Char counter, Interactive calendar picker
DOM dom.html Interactive collapsible DOM tree Expand/Collapse All, Highlight picker