1. The Document Object Model (DOM)
The DOM is the tree-like API representation of HTML documents created by the browser during parsing.
⊞HTML5 Web Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Selection Demo</title>
</head>
<body style="background:#17181c; color:#fff; font-family:Arial; padding:30px;">
<h2>DOM Node Selection</h2>
<p class="highlight-item">Item 1</p>
<p class="highlight-item">Item 2</p>
<p class="highlight-item">Item 3</p>
<script>
// Select all items with class 'highlight-item'
const items = document.querySelectorAll(".highlight-item");
items.forEach((item, idx) => {
item.style.backgroundColor = "#1f2029";
item.style.padding = "8px 12px";
item.style.borderLeft = "4px solid #04AA6D";
item.style.margin = "6px 0";
item.textContent = "✓ Verified Item #" + (idx + 1);
});
</script>
</body>
</html>