Hi there, we’re Harisystems
"Unlock your potential and soar to new heights with our exclusive online courses! Ignite your passion, acquire valuable skills, and embrace limitless possibilities. Don't miss out on our limited-time sale - invest in yourself today and embark on a journey of personal and professional growth. Enroll now and shape your future with knowledge that lasts a lifetime!".
For corporate trainings, projects, and real world experience reach us. We believe that education should be accessible to all, regardless of geographical location or background.
1
Exploring JavaScript DOM Objects: Examples and Usage
The Document Object Model (DOM) in JavaScript provides a powerful interface for interacting with HTML elements on a web page. By manipulating DOM objects, you can dynamically modify the content, structure, and style of a web page. In this article, we will explore some commonly used DOM objects in JavaScript and provide examples of their usage.
1. Document Object
The document object represents the entire HTML document and serves as the entry point for interacting with the DOM. Here's an example of accessing and modifying the content of an HTML element using the document object:
<!DOCTYPE html>
<html>
<head>
<title>Document Object Example</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<script>
// Accessing the h1 element
var headingElement = document.getElementById("heading");
// Modifying the content
headingElement.innerHTML = "Welcome to JavaScript DOM!";
</script>
</body>
</html>
In this example, we use the document.getElementById method to access the h1 element with the id of "heading". We then modify the content of the element by assigning a new value to the innerHTML property.
2. Element Objects
Element objects represent HTML elements and provide methods and properties to manipulate their content, attributes, and style. Here's an example of dynamically creating a new HTML element and appending it to the document:
<!DOCTYPE html>
<html>
<head>
<title>Element Object Example</title>
</head>
<body>
<div id="container"></div>
<script>
var containerElement = document.getElementById("container");
// Creating a new span element
var spanElement = document.createElement("span");
spanElement.textContent = "Hello, World!";
// Appending the span element to the div
containerElement.appendChild(spanElement);
</script>
</body>
</html>
In this example, we first retrieve the div element with the id of "container" using the document.getElementById method. We then create a new span element using the document.createElement method, set its content using the textContent property, and append it to the div using the appendChild method.
3. Event Objects
Event objects represent events triggered by user actions or system events. They provide information
about the event and the target element. Here's an example of handling a button click event using the addEventListener method:
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
var buttonElement = document.getElementById("myButton");
buttonElement.addEventListener("click", function(event) {
alert("Button clicked!");
console.log(event.target);
});
</script>
</body>
</html>
In this example, we retrieve the button element with the id of "myButton" and attach a click event listener using the addEventListener method. When the button is clicked, an alert message is displayed, and the event object is logged to the console. The event object provides information about the event and the target element.
Conclusion
JavaScript DOM objects provide a powerful and flexible way to interact with HTML elements on a web page. In this article, we explored examples of the document object, Element objects, and Event objects. By leveraging these objects and their methods and properties, you can dynamically manipulate the content, structure, and behavior of your web pages, creating interactive and dynamic user experiences.
4.5L
Learners
20+
Instructors
50+
Courses
6.0L
Course enrollments
Future Trending Courses
When selecting, a course, Here are a few areas that are expected to be in demand in the future:.
The Python Course: Absolute Beginners for strong Fundamentals
By: Sekhar Metla
Data Analysis: Microsoft Excel Zero to Hero - Complete Excel Course
By: Sekhar MetlaFuture Learning for all
If you’re passionate and ready to dive in, we’d love to join 1:1 classes for you. We’re committed to support our learners and professionals their development and well-being.
View Courses
Most Popular Course topics
These are the most popular course topics among Software Courses for learners