DOM (document Object Model) in java Script).pptx

DOM in Java Script
Akhilesh Nagar
Asst.Prof
MCA, GL Bajaj Greater Noida

Introduction
• The Document Object Model is the data representation of objects that
include the structure and content of a document on the web.
• A web Page is a document that can be either displayed in browser or
as HTML Source. In both cases, it is the same document but the DOM
representation allows it to be manipulated/changed/updated.
• So, When a web page is loaded, the browser creates a DOM of the
page automatically.

Introduction Cont.
• DOM stands for Document Object Model. It is a programming
interface that allows us to create, change, or remove elements from the
document. We can also add events to these elements to make our page
more dynamic.
• The DOM views an HTML document as a tree of nodes. A node
represents an HTML element.

DOM
Let's take a look at this HTML code to better understand the DOM tree
structure.
<!DOCTYPE html>
<html lang="en">
<head> <title>DOM tree structure</title> </head>
<body> <h1>DOM tree structure</h1>
<h2> DOM Example</h2>
</body>
</html>

DOM
• Our document is called the root node and contains one child node which is the
<html> element.
• The <html> element contains two children which are the <head> and <body>
• elements.
• Both the <head> and <body> elements have children of their own.

USE OF DOM
Dynamic Changes
or
Manipulation
In
HTML document

DOM Manipulation
For DOM manipulation, we first have to select elements; then we can
manipulate the HTML document dynamically.
1: How to Select Elements in the Document
We have two methods for selecting elements:

Selecting Elements in DOM
• 1a) document.getElementById()
Ex:
<!DOCTYPE html>
<html>
<head>
<title>getElementById Basic Example</title>
</head>
<body>
<h2 id="title">Student Form</h2>
<label>Enter Name: <input type="text" id="studentName"></label><br><br>
<button onclick="getStudentName()">Submit</button>

• 1a) document.getElementById()
<script>
function getStudentName() {
// Access the input element using its ID
const inputElement = document.getElementById("studentName").value;
document.write("Student Name:", inputElement); // Print the value
alert("Student Name: " + inputElement); // also alert it
}
</script>
</body>
</html>

• 1b) document.getElementsByClassName()
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<h2 class="title">Student Form</h2>
<label>Enter Name: <input type="text" class="studentName"></label><br><br>

• getElementsByClassName() returns a collection (array-like), so we access the
first element with [0] . You must access specific item using [index] like [0].
• .value is not a property of a collection

• 1c) document.getElementsByTagName()
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName Example</title>
</head>
<body>
<h2>Student Form</h2>
<label>Enter Name: <input type="text"></label><br><br>

• <script>
// Step 1: Access all input elements using tag name
const inputs = document.getElementsByTagName("input");
// Step 2: Get the value of the first input field
const studentName = inputs[0].value;
// Step 3: Display the value using document.write
document.write("Student Name: " + studentName);
}
</script>
</body>
</html>

•This method always returns a live HTMLCollection, which is
like an array of elements.
•Even if there is only one element with that tag, it’s still returned inside
a collection.
•So, you must specify which element you want by its index.

• Alternative: If you want to select single element or without indexing,
you can use –
2a)document.querySelector()

<!DOCTYPE html>
<html>
<head>
<title>document.querySelector() with ID Example</title>
</head>
<body>
<h2>Student Form</h2>
<label>Enter Name: <input type="text" id="studentName"
class="abc"></label><br><br>

2a)document.querySelectorAll()
• Document.querySelectorAll() returns a NodeList(like an array )
• So, you must add indexing like getElementsByClassName()

DOM Manipulation
For DOM manipulation, we first have to select elements; then we can
manipulate the HTML document dynamically.
DOM manipulation technique also includes:
1.createElement
2.Insert
3.Update
4.Delete

Add New Elements to the Document
• We can use document.createElement() to add new elements to the
DOM tree. For Ex:
let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);
listItem2.textContent = "It's awesome";

<!DOCTYPE html>
<html>
<head>
<title>Create & Append List Example</title>
</head>
<body>
<h2>Why Learn JavaScript?</h2>
<script>
// Step 1: Create an unordered list element
let unorderedList = document.createElement("ul");

// Step 2: Append the <ul> to the body
document.body.appendChild(unorderedList);
// Step 3: Create and append the first list item
listItem1.textContent = "It's free";
// Step 4: Create and append the second list item
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2); </script></body></html>

Example of DOM
<!DOCTYPE html>
<html>
<head>
<title>Student DOM Manipulation Example (Simple)</title>
</head>
<body>
<h2 id="formTitle">Student Form</h2>

<form id="studentForm">
<label>Name: <input type="text" id="studentName" placeholder="Enter
Name"></label><br><br>
<label>Roll No: <input type="text" id="studentRoll" placeholder="Enter Roll
No"></label><br><br>
<button type="button" onclick="addStudent()">Add Student</button>
</form>

Example of DOM

<ul id="studentList"></ul>

<button onclick="clearList()">Clear All</button>
<script>
// Change heading text using getElementById (Document Manipulation)
const heading = document.getElementById("formTitle");
heading.textContent = "Add Student Details";
// Function to add a student to the list
function addStudent() {
// Get input values using getElementById
const name = document.getElementById("studentName").value;
const roll = document.getElementById("studentRoll").value;

Example of DOM
// Create <li> element (Create Element)
const listItem = document.createElement("li");
// Set its content (Properties)
listItem.textContent = "Name: " + name + ", Roll No: " + roll;
// Add the list item to the <ul> (Insert Element)
document.getElementById("studentList").appendChild(listItem);
// Clear input fields
document.getElementById("studentName").value = "";
document.getElementById("studentRoll").value = "";
}

Example of DOM
// Function to delete all students (Delete Elements)
function clearList() {
document.getElementById("studentList").innerHTML = "";
}
</script>
</body>
</html>

DOM (document Object Model) in java Script).pptx

More Related Content

Similar to DOM (document Object Model) in java Script).pptx

Recently uploaded

DOM (document Object Model) in java Script).pptx