What is DOM in JavaScript?
The Document Object Model (DOM) allows you to manipulate HTML elements using JavaScript. Here's how you can use methods like getElementById, getElementsByClassName, and getElementsByName in your projects.
1. DOM Represents the Web Page as a Tree
- The
DOM creates a tree structure of your HTML.
- Example:
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
DOM Tree:
- html
- body
- h1
- p
2. Access and Change Elements using getElementById
-
The getElementById method selects an element with a specific id.
Example: Changing text
<h1 id="title">Old Title</h1>
<script>
document.getElementById("title").innerText = "New Title";
</script>
- Result: The <h1> text changes to "New Title."
3. Access Multiple Elements using getElementsByClassName
- The getElementsByClassName
method selects elements with a specific class.
- Example:
Change styles of multiple elements
<p class="highlight">First Paragraph</p>
<p class="highlight">Second Paragraph</p>
<script>
const elements = document.getElementsByClassName("highlight");
for (let i = 0; i < elements.length; i++)
- {
- elements[i].style.color = "blue";
}
</script>
Result: All paragraphs with the highlight class turn blue.
4. Access Form Elements using getElementsByName
5. Add New Elements Dynamically
- You
can dynamically add elements using getElementById.
- Example:
Adding a new paragraph
<button id="addPara" onclick="addone()">Add Paragraph</button>
<script>
function addone(){
const newPara = document.createElement("p");
newPara.innerText = "This is a new paragraph.";
document.getElementById("content").appendChild(newPara);
}
</script>
7. Modify Styles Dynamically
- Use getElementById
and getElementsByClassName to change styles.
- Example:
Highlight text
<button id="highlight" onclick="design()">Highlight</button>
<script>
function design()
- {
}
- </script>
Summary:
- Methods
Used:
- getElementById:
To select a single element by its id.
- getElementsByClassName:
To select multiple elements by their class.
- getElementsByName:
To select elements by their name attribute.
- Use
Cases: Dynamically update content, handle events, and manipulate
forms.
Project based example:
2. Form Validation
- Use
Case: Validate form inputs before submission.
html
Copy code
<form id="userForm">
<input name="username"
type="text" placeholder="Enter Username">
<input name="email"
type="email" placeholder="Enter Email">
<button type="button"
id="submitForm">Submit</button>
</form>
<script>
document.getElementById("submitForm").addEventListener("click",
() => {
const username = document.getElementsByName("username")[0].value;
const email = document.getElementsByName("email")[0].value;
if (username === ""
|| email === "") {
alert("All
fields are required!");
} else {
alert(`Welcome, ${username}!`);
}
});
</script>
2. Form Validation
- Use
Case: Validate form inputs before submission.
<form id="userForm">
<input name="username"
type="text" placeholder="Enter Username">
<input name="email"
type="email" placeholder="Enter Email">
<button type="button" onclick="checknow()">Submit</button>
</form>
<script>
function checknow() {
const username = document.getElementsByName("username")[0].value;
const email = document.getElementsByName("email")[0].value;
if (username === ""
|| email === "") {
alert("All
fields are required!");
} else {
alert(`Welcome, ${username}!`);
}
};
</script>
1. Toggle Visibility of a Section
- Use
Case: Show or hide a section on button click.
<div id="details" style="display: none;">This is a hidden section.</div>
<button id="toggleButton">Show/Hide</button>
<script>
document.getElementById("toggleButton").addEventListener("click",
() => {
const section = document.getElementById("details");
if (section.style.display
=== "none") {
section.style.display
= "block";
} else {
section.style.display
= "none";
}
});
</script>
9. Remove Selected List Items
- Use
Case: Remove selected list items dynamically.
<ul id="list">
<li
class="removable">Item 1</li>
<li
class="removable">Item 2</li>
<li
class="removable">Item 3</li>
</ul>
<button id="removeItems">Remove
Items</button>
<script>
document.getElementById("removeItems").addEventListener("click",
() => {
const items =
document.getElementsByClassName("removable");
while
(items.length > 0) {
items[0].remove();
}
});
</script>
0 Comments