JavaScript DOM (Document Object Model) Tutorial
What is DOM in JavaScript?
JavaScript DOM : The Document Object Model (DOM) is a programming interface that represents the structure of a webpage as a tree of objects. JavaScript can access and manipulate these elements dynamically using the DOM.
Why Use the DOM?
- Modify webpage content dynamically
- Create, update, or delete elements
- Handle user interactions via events
JavaScript DOM Methods & Examples
1. Accessing Elements Using getElementById & innerHTML
- getElementById(id): Selects an element using its id attribute.
- innerHTML: Retrieves or modifies the content inside an element.
Example: Access an Element by ID
html
<html>
<head>
<title>JavaScript DOM Example</title>
</head>
<body>
<h1 id=”heading”>Welcome to JavaScript DOM</h1>
<script>
let text = document.getElementById(“heading”).innerHTML;
alert(“Heading Text: ” + text);
</script>
</body>
</html>
2. Accessing Elements Using getElementsByTagName
- JavaScript DOM : getElementsByTagName(tagName): Selects all elements with the specified tag name and returns an array-like collection.
Example: Modify a Paragraph
html
<html>
<head>
<title>JavaScript DOM Example</title>
</head>
<body>
<p>This is a paragraph.</p>
<p id=”second”>Another paragraph.</p>
<script>
let paragraphs = document.getElementsByTagName(“p”);
alert(“Second paragraph: ” + paragraphs[1].innerHTML);
document.getElementById(“second”).innerHTML = “This text has been modified!”;
</script>
</body>
</html>
3. Handling Events Using addEventListener
JavaScript DOM : JavaScript can handle user actions using event listeners.
Example: Button Click Event
html
<html>
<head>
<title>Event Handling</title>
</head>
<body>
<button id=”btnClick”>Click Me!</button>
<script>
document.getElementById(“btnClick”).addEventListener(“click”, function() {
alert(“Button clicked!”);
});
</script>
</body>
</html>
JavaScript Object-Oriented Programming (OOP) Tutorial
What is Object-Oriented JavaScript (OOJS)?
JavaScript allows the creation of objects, which are collections of properties (variables) and methods (functions). This helps simulate real-world entities like students, cars, or homes.
Why Use Object-Oriented JavaScript?
- Organizes code efficiently
- Increases reusability and maintainability
- Simulates real-world objects
Creating JavaScript Objects
1. Using the new Object() Constructor
javascript
let student = new Object();
student.name = “John”;
student.age = 20;
student.greet = function() {
return “Hello, ” + this.name;
};
console.log(student.greet()); // Output: Hello, John
2. Using Object Literals
javascript
let car = {
brand: “Toyota”,
model: “Corolla”,
year: 2023,
getDetails: function() {
return this.brand + ” ” + this.model + ” (” + this.year + “)”;
}
};
console.log(car.getDetails()); // Output: Toyota Corolla (2023)
Accessing Object Properties and Methods
- Access properties: object.propertyName
- Access methods: object.methodName()
Example: Accessing Properties & Methods
javascript
let person = {
firstName: “Alice”,
lastName: “Smith”,
getFullName: function() {
return this.firstName + ” ” + this.lastName;
}
};
console.log(person.getFullName()); // Output: Alice Smith
Conclusion
JavaScript DOM and Object-Oriented Programming (OOP) help developers create interactive and efficient web applications. The DOM allows manipulating webpage elements dynamically, while OOJS provides a structured way to organize and reuse code.
Mastering these concepts will enhance your JavaScript skills and help you build more advanced web applications.
Java Script Function
Download JS
