- The browser parses HTML into a node tree (elements, text nodes, comments).
- JavaScript accesses this tree through the DOM API (methods, properties, events).
- Your code can query, modify, create, and remove nodes, as well as react to user interactions.
Core DOM Operations
Selecting elements
- querySelector and querySelectorAll let you find elements using CSS selectors.
- Example: const box = document.querySelector('#demo-box');
Responding to events
- addEventListener wires behavior to user actions (clicks, inputs, key presses).
- Example: changeBtn.addEventListener('click', () => { /* do something */ });
Reading and updating content
- textContent safely sets or reads text.
Styling and classes
- classList.add/remove/toggle manipulates CSS classes.
- style sets inline styles; prefer classes for maintainability.
Attributes and data
- getAttribute/setAttribute read and write attributes.
- data-* attributes store custom data (accessible via dataset).
Creating and inserting nodes
- document.createElement creates new elements.
- insertAdjacentElement/insertAdjacentHTML/append/prepend/after/before place them in the DOM.
Inspecting the DOM
- Properties like id, children, parentElement, and textContent help you read state.
- console.log is your friend for understanding what the DOM looks like at runtime.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM API Demo</title>
<link href="style.css" rel="stylesheet" />
<script src="documentObjectModelAPI.js" defer></script>
</head>
<body>
<h1>DOM API Demo</h1>
<div id="demo-box">This is a demo box.</div>
<button id="change-btn">Change Box</button>
<button id="add-btn">Add Paragraph</button>
</body>
</html>
#demo-box {
padding: 1em;
background: #f0f0f0;
border: 1px solid #ccc;
margin-bottom: 1em;
}
.highlight {
background: #ffe066 !important;
}
// Wait for the DOM to be fully loaded before running code
document.addEventListener('DOMContentLoaded', () => {
// Select elements using DOM API
const box = document.querySelector('#demo-box');
const changeBtn = document.querySelector('#change-btn');
const addBtn = document.querySelector('#add-btn');
// Event handler: Change box content, style, and attribute
changeBtn.addEventListener('click', () => {
// Change the text content
box.textContent = 'The box has been changed!';
// Toggle a CSS class to change the background
box.classList.toggle('highlight');
// Set a custom attribute
box.setAttribute('data-changed', 'true');
});
// Event handler: Add a new paragraph below the box
addBtn.addEventListener('click', () => {
// Create a new <p> element
const newPara = document.createElement('p');
newPara.textContent = 'This paragraph was added using the DOM API.';
// Insert the new element after the box
box.insertAdjacentElement('afterend', newPara);
});
// Demonstrate reading attributes and logging to the console
console.log('Box ID:', box.id); // Accessing a property
console.log('Box initial content:', box.textContent); // Reading text content
});
Leading Practices
- Prefer querySelector over older APIs like getElementById for consistency and flexibility.
- Use classList and CSS classes instead of inline styles.
- Keep structure (HTML), presentation (CSS), and behavior (JS) separated, but let them coordinate via classes and data-* attributes.
- Avoid innerHTML for untrusted content; use textContent or createElement to prevent injection vulnerabilities.
- Batch DOM reads and writes to reduce layout thrashing if performance becomes an issue.
