JavaScript DOM (Document Object Model)
Definition:
The Document Object Model (DOM) is a programming interface that represents an HTML or
XML document as a tree of objects. Each element, attribute, and piece of text in the HTML
becomes a node in this tree.
What it is:
DOM acts as a bridge between HTML and JavaScript — it lets JavaScript see and interact with
the webpage structure.
Why it’s used:
Because HTML alone is static — the DOM allows JavaScript to change the page dynamically
(e.g., update text, change colors, or hide elements).
Purpose:
To enable developers to create interactive, dynamic webpages that respond to user input and
events (clicks, typing, etc.).
Example:
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Welcome!</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
[Link]("heading").innerHTML = "Hello, DOM!";
}
</script>
</body>
</html>
1. getElementById()
Definition:
[Link](id) returns the element that has the specified id attribute.
What:
It’s a method to select one unique HTML element using its id.
Why:
To directly access and modify a specific element without affecting others.
Purpose:
Used for fast, direct manipulation of an element (text, color, or style) in JavaScript.
Example:
<p id="demo">Original text</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
[Link]("demo").innerHTML = "Text changed using getElementById!";
}
</script>
2. getElementsByName()
Definition:
[Link](name) returns a NodeList (collection) of all elements with a
specific name attribute.
What:
Used when multiple form fields or inputs share the same name.
Why:
To handle radio buttons, checkboxes, or grouped inputs that share a name.
Purpose:
To read or process the values from grouped elements like gender or hobbies.
Example:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<button onclick="showGender()">Show Gender</button>
<p id="result"></p>
<script>
function showGender() {
let gender = [Link]("gender");
for (let i = 0; i < [Link]; i++) {
if (gender[i].checked) {
[Link]("result").innerText = "Selected: " + gender[i].value;
}
}
}
</script>
3. getElementsByTagName()
Definition:
[Link](tagName) returns a collection of all elements with the given
tag name.
What:
Selects multiple elements by their HTML tag (like all <p> or <div>).
Why:
To manipulate or count multiple elements at once.
Purpose:
Useful when you want to loop through all elements of a certain type.
Example:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<button onclick="countParagraphs()">Count Paragraphs</button>
<script>
function countParagraphs() {
let p = [Link]("p");
alert("Total paragraphs: " + [Link]);
}
</script>
4. innerHTML Property
Definition:
innerHTML sets or returns the HTML content (including tags) inside an element.
What:
It can insert new HTML code inside an element.
Why:
To update content dynamically — for example, to show new data or messages.
Purpose:
To change the structure or content of a webpage without reloading it.
Example:
<div id="info">Old Content</div>
<button onclick="updateContent()">Update</button>
<script>
function updateContent() {
[Link]("info").innerHTML = "<b>New Bold Content Added!</b>";
}
</script>
5. innerText Property
Definition:
innerText sets or returns the visible text (ignoring any HTML tags) inside an element.
What:
It’s similar to innerHTML, but only deals with plain text.
Why:
When you want to show user-friendly text without allowing HTML rendering.
Purpose:
To ensure content is treated as text, not HTML code, improving safety and clarity.
Example:
<div id="message"><b>Hello</b> User!</div>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
[Link]("message").innerText = "<b>Text changed!</b>";
}
</script>
Output:
Displays <b>Text changed!</b> as plain text (not bold).
6. Form Validation
Definition:
Form validation checks whether user input is correct, complete, and secure before
submission.
What:
Validation ensures that all required fields are filled and data is in a valid format.
Why:
To prevent invalid or harmful data from being submitted to the server.
Purpose:
To improve user experience and data accuracy by catching errors early.
Example:
<h2>Form Validation Example</h2>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name"><br><br>
Email: <input type="text" id="email"><br><br>
Password: <input type="password" id="password"><br><br>
<input type="submit" value="Submit">
</form>
<p id="error" style="color:red"></p>
<script>
function validateForm() {
let name = [Link]("name").value;
let email = [Link]("email").value;
let password = [Link]("password").value;
let errorMsg = "";
if (name == "") errorMsg += "Name is required.<br>";
if ([Link]("@") == -1 || [Link](".") == -1) errorMsg += "Enter a valid
email.<br>";
if ([Link] < 6) errorMsg += "Password must be at least 6 characters long.<br>";
if (errorMsg != "") {
[Link]("error").innerHTML = errorMsg;
return false;
} else {
alert("Form submitted successfully!");
return true;
}
}
</script>
✅ Summary Table
Method / Property Description Example
getElementById() Gets element by ID [Link]("id")
getElementsByName() Gets elements by name [Link]("gender")
getElementsByTagName() Gets elements by tag name [Link]("p")
Sets/returns HTML
innerHTML [Link] = "<b>Hi</b>"
content
innerText Sets/returns plain text [Link] = "Hello"
Checks user input
Form Validation if(name=="") alert("Enter name");
correctness
Event Handling in JavaScript
Definition:
Event handling in JavaScript is the process of detecting and responding to user actions (called
events) on a webpage — such as clicks, mouse movements, key presses, or form submissions.
JavaScript allows you to assign event handlers (functions) to HTML elements that execute
automatically when a specific event occurs.
Common Events:
Event Type Description
onclick Triggered when an element is clicked
onmouseover Triggered when the mouse pointer moves over an element
onmouseout Triggered when the mouse leaves an element
onchange Triggered when an input field’s value changes
onkeyup / onkeydown Triggered when a key is pressed/released
onsubmit Triggered when a form is submitted
onload Triggered when the page finishes loading
Syntax:
You can handle events in three main ways:
1. Inline Event Handling (Inside HTML Tag)
<button onclick="alert('Button Clicked!')">Click Me</button>
2. Using JavaScript Property
<button id="myBtn">Click Me</button>
<script>
[Link]("myBtn").onclick = function() {
alert("Button was clicked!");
};
</script>
3. Using addEventListener() (Recommended Way)
<button id="btn">Click Me</button>
<script>
[Link]("btn").addEventListener("click", function() {
alert("Event handled using addEventListener()");
});
</script>
Example: Mouse Events
<!DOCTYPE html>
<html>
<body>
<h3 id="text">Hover over this text!</h3>
<script>
let text = [Link]("text");
[Link]("mouseover", function() {
[Link] = "red";
[Link] = "Mouse is over me!";
});
[Link]("mouseout", function() {
[Link] = "black";
[Link] = "Hover over this text!";
});
</script>
</body>
</html>
Output:
When you hover over the text, its color changes to red and the message updates. When you
move the mouse out, it returns to normal.
Example: Keyboard Event
<input type="text" id="inputBox" placeholder="Type something...">
<p id="output"></p>
<script>
[Link]("inputBox").addEventListener("keyup", function() {
[Link]("output").innerText = [Link];
});
</script>
Output:
Whatever you type appears live below the input box.
