DOM Introduction
Understanding the Document Object Model
🌳 What is the DOM?
The DOM (Document Object Model) is a programming interface for web documents. It represents the page structure as a tree of objects, allowing JavaScript to access and manipulate HTML elements, attributes, and content dynamically.
// Access and change HTML content
document.getElementById('demo').innerHTML = 'Hello DOM!';
DOM Key Concepts
Document
The entire HTML document
document.title
document.bodyElements
HTML tags as objects
getElementById()
querySelector()Attributes
Element properties
getAttribute()
setAttribute()Text
Content inside elements
textContent
innerHTML🔹 DOM Tree Structure
The DOM represents HTML as a tree structure where each element is a node. The document is the root, and all HTML elements branch from it like a family tree with parents, children, and siblings.
<!-- HTML Structure -->
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>Hello World</p>
</body>
</html>
<!-- DOM Tree -->
Document
└── html
├── head
│ └── title
└── body
├── h1
└── p🔹 Accessing DOM Elements
JavaScript provides multiple methods to find and access HTML elements in the DOM. Each method serves different purposes: getElementById for unique elements, getElementsByClassName for groups, and querySelector for flexible CSS-style selection.
<div id="myDiv">Hello</div>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<script>
// By ID
const div = document.getElementById('myDiv');
// By Class Name
const paragraphs = document.getElementsByClassName('text');
// By Tag Name
const allParagraphs = document.getElementsByTagName('p');
// By CSS Selector
const firstText = document.querySelector('.text');
const allTexts = document.querySelectorAll('.text');
</script>Output:
✓ Elements found and accessible
🔹 Changing HTML Content
The DOM allows you to modify HTML content dynamically using JavaScript. The innerHTML property changes the HTML inside an element, while textContent changes only the text, ignoring any HTML tags for security.
<p id="demo">Original text</p>
<button onclick="changeContent()">Change Text</button>
<script>
function changeContent() {
document.getElementById('demo').innerHTML = 'New text!';
}
</script>Output (after click):
New text!
🔹 Changing Attributes
Modify element attributes like src, href, class, or custom data attributes using DOM methods. This is useful for changing images, updating links, toggling classes for styling, or storing custom data on elements.
<img id="myImage" src="old.jpg" alt="Image">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
const img = document.getElementById('myImage');
img.src = 'new.jpg';
img.alt = 'New Image';
}
</script>Output:
✓ Image source changed to new.jpg
🔹 Changing Styles
Dynamically change CSS styles of elements using the style property. You can modify any CSS property including colors, sizes, positions, and visibility to create interactive and responsive user interfaces.
<p id="text">Styled text</p>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
const text = document.getElementById('text');
text.style.color = 'blue';
text.style.fontSize = '24px';
text.style.fontWeight = 'bold';
}
</script>Output (after click):
Styled text
🔹 DOM Events
Events are actions that happen in the browser like clicks, key presses, or page loads. The DOM allows you to listen for these events and execute JavaScript code in response, making your web pages interactive.
<button id="myButton">Click Me</button>
<p id="output"></p>
<script>
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('output').innerHTML = 'Button clicked!';
});
</script>Output (after click):
Button clicked!