Introduction:
The Document Object Model (DOM) is a crucial interface for web documents, enabling developers to manipulate content, style, and structure dynamically. This article explores the basics of the DOM, its relationship with HTML and XML, and common JavaScript techniques for DOM manipulation.
Basic HTML Structure:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Document Obeject Model</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="icon" href="" type="image/x-icon">
</head>
<body>
<h1>This is DOM</h1>
<h2>learn about document object model</h2>
<section>
<p>...</p>
</sectiom>
</body>
</html>
HTML Tree Representation:
The DOM represents a document as a logical tree, accessible through JavaScript for manipulation.
What is a Document:
In web development, a document refers to a web page, treated as an object by JavaScript. Accessing the document involves using object-oriented techniques like prototype chaining.
DOM Manipulation:
DOM manipulation involves altering HTML structure, style, and content dynamically using JavaScript.
Understanding Objects:
An object is a collection of keys and properties, where keys are strings and values can be any data type including strings, numbers, floats, and functions.
Example Object:
const Perosn = {
name: "john",
age: 18,
marks: 66.7
}
Accessing Elements from the Document:
There are several methods for accessing elements in the DOM:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
getElementById():
This method retrieves an element by its unique ID.
<!-- HTML -->
<div id="content">
<p id="intro">Welcome to our website!</p>
<p id="main">This is the main content.</p>
</div>
// JavaScript
const introParagraph = document.getElementById("intro");
const mainContentDiv = document.getElementById("content");
getElementsByClassName():
Used to access elements by their class name, which may not be unique.
<!-- HTML -->
<div class="section">
<p class="info">Information about our product.</p>
<p class="info">More details here.</p>
</div>
// JavaScript
const infoParagraphs = document.getElementsByClassName("info");
getElementsByTagName():
Access elements by their tag name.
<!-- HTML -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
// JavaScript
const listItems = document.getElementsByTagName("li");
querySelector():
Selects the first element that matches a specified CSS selector.
<!-- HTML -->
<div class="container">
<h2>Title</h2>
<p class="content">Some content here.</p>
</div>
// JavaScript
const titleElement = document.querySelector(".container h2");
const contentParagraph = document.querySelector(".container .content");
querySelectorAll():
Returns a collection of all elements that match a specified CSS selector.
<!-- HTML -->
<div class="container">
<h2>Title 1</h2>
<p class="content">Content 1</p>
</div>
<div class="container">
<h2>Title 2</h2>
<p class="content">Content 2</p>
</div>
// JavaScript
const containers = document.querySelectorAll(".container");
const contentParagraphs = document.querySelectorAll(".container .content");
Here are some examples of DOM manipulation with text and styles using JavaScript:
Changing Text Content:
<!-- HTML -->
<div id="myElement">Initial Text</div>
// JavaScript
const element = document.getElementById("myElement");
element.textContent = "New Text";
Adding Styles:
<!-- HTML -->
<div id="myElement">Styling Example</div>
// JavaScript
const element = document.getElementById("myElement");
element.style.color = "blue";
element.style.fontSize = "20px";
Adding Classes for Styling:
<!-- HTML -->
<div id="myElement">Class Styling Example</div>
// JavaScript
const element = document.getElementById("myElement");
element.classList.add("highlight");
/* CSS */
.highlight {
background-color: yellow;
font-weight: bold;
}
Appending New Elements with Text:
<!-- HTML -->
<div id="container"></div>
// JavaScript
const container = document.getElementById("container");
const newParagraph = document.createElement("p");
const textNode = document.createTextNode("New paragraph text.");
newParagraph.appendChild(textNode);
container.appendChild(newParagraph);
Changing Multiple Styles:
// JavaScript
const element = document.getElementById("myElement");
element.style.cssText = "color: red; font-size: 24px; background-color: lightblue;";
These examples demonstrate various ways to manipulate text content and styles within the DOM using JavaScript. Whether it's changing text, modifying styles directly, adding classes for styling, appending new elements with text, or changing multiple styles at once, JavaScript provides powerful capabilities for dynamic content manipulation on web pages.
Top comments (0)