Document Object Model (DOM) in JavaScript
What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a webpage as a tree of objects, where each node represents an element, attribute, or text in the HTML document. JavaScript can manipulate this structure to dynamically change the content, style, and behavior of a webpage.
Key Concepts of the DOM
1. DOM Tree Structure
The DOM represents an HTML document as a tree structure where:
Document: The root node of the DOM tree.
Element Nodes: Represent HTML elements (e.g., <div>, <p>).
Text Nodes: Contain the text within an element.
Attributes: Represent attributes of HTML elements (e.g., class, id).
HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>DOM Tree</title>
</head>
<body>
<div id="container">
<p class="text">Hello, World!</p>
<img src="image.jpg" alt="Sample Image">
</div>
</body>
</html>
DOM Representation:
Document
├── html
├── head
│ └── title
│ └── "DOM Tree"
└── body
└── div (id="container")
├── p (class="text")
│ └── "Hello, World!"
└── img (src="image.jpg", alt="Sample Image")
2. Core Objects
document: Represents the entire webpage. It is the entry point for accessing the DOM.
window: Represents the browser window and contains the document object.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>Core Objects</title>
</head>
<body>
<h1>Welcome to the DOM!</h1>
<script>
console.log(document.title); // Outputs: "Core Objects"
console.log(window.innerWidth); // Outputs the width of the browser window
</script>
</body>
</html>
3. Selecting Elements in the DOM
3.1 By ID
<div id="myId">Hello!</div>
<script>
let element = document.getElementById("myId");
console.log(element.textContent); // Outputs: Hello!
</script>
3.2 By Class Name
<div class="myClass">Hello, Class!</div>
<script>
let elements = document.getElementsByClassName("myClass");
console.log(elements[0].textContent); // Outputs: Hello, Class!
</script>
3.3 By Tag Name
<p>Hello, Tag!</p>
<script>
let elements = document.getElementsByTagName("p");
console.log(elements[0].textContent); // Outputs: Hello, Tag!
</script>
3.4 By CSS Selector
<div class="myClass">CSS Selector</div>
<script>
let element = document.querySelector(".myClass");
console.log(element.textContent); // Outputs: CSS Selector
</script>
4. Manipulating Elements
4.1 Change Content
<div id="example">Original Content</div>
<button onclick="changeContent()">Change Content</button>
<script>
function changeContent() {
let element = document.getElementById("example");
element.textContent = "Content Changed!";
}
</script>
4.2 Change Attributes
<img id="myImage" src="old.jpg" alt="Old Image">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
let img = document.getElementById("myImage");
img.src = "new.jpg";
img.alt = "New Image";
}
</script>
4.3 Change Styles
<div id="styledDiv">Style Me!</div>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
let div = document.getElementById("styledDiv");
div.style.color = "blue";
div.style.fontSize = "20px";
}
</script>
4.4 Add/Remove Classes
<div id="box" class="box">Box</div>
<button onclick="addClass()">Add Class</button>
<button onclick="removeClass()">Remove Class</button>
<style>
.box { width: 100px; height: 100px; background: lightblue; }
.highlight { border: 2px solid red; }
</style>
<script>
function addClass() {
let box = document.getElementById("box");
box.classList.add("highlight");
}
function removeClass() {
let box = document.getElementById("box");
box.classList.remove("highlight");
}
</script>
5. Events in the DOM
5.1 Add Event Listeners
<button id="myButton">Click Me</button>
<script>
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button Clicked!");
});
</script>
5.2 Common Events
click: Triggered when an element is clicked.
mouseover: Triggered when the mouse hovers over an element.
keydown: Triggered when a key is pressed.
HTML Example:
<input type="text" id="inputBox" placeholder="Type something...">
<script>
let input = document.getElementById("inputBox");
input.addEventListener("keydown", function(event) {
console.log("Key Pressed: " + event.key);
});
</script>
6. DOM Traversal
6.1 Parent Node
<div id="child">Child</div>
<script>
let child = document.getElementById("child");
console.log(child.parentNode); // Outputs the parent node
</script>
6.2 Child Nodes
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
let list = document.getElementById("list");
console.log(list.childNodes); // Outputs NodeList of children
</script>
6.3 Sibling Nodes
<div id="sibling1">Sibling 1</div>
<div id="sibling2">Sibling 2</div>
<script>
let sibling1 = document.getElementById("sibling1");
console.log(sibling1.nextSibling); // Outputs the next sibling
</script>
Each concept has been illustrated with HTML examples to clarify its application and provide hands-on insights.