DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. JavaScript can access and modify the DOM of a page using the Document object.
DOM manipulation involves creating, modifying, and deleting HTML elements on a web page dynamically using JavaScript. Events are user interactions or system notifications that occur on a web page, such as clicks, key presses, or page loading. JavaScript can listen to and respond to these events using event handlers.
Tabular Comparisons:
| DOM Manipulation | Events |
|---|---|
| Involves creating, modifying, and deleting HTML elements on a web page using JavaScript. | User interactions or system notifications that occur on a web page, such as clicks, key presses, or page loading. |
| Uses the Document object to access and modify the DOM of a page. | Uses event listeners to listen to and respond to events. |
| Can be used to add or remove HTML elements, modify their attributes or contents, or change their style. | Can trigger JavaScript code or functions in response to events. |
| Can be done dynamically using JavaScript, allowing for more interactive and responsive web pages. | Allows for the creation of dynamic and interactive web pages. |
Text Diagram:
HTML Document
|
|__ Head
| |__ Title
| |__ Script (JavaScript code)
|
|__ Body
|__ HTML Elements
| |__ Header
| |__ Nav
| |__ Main
| |__ Footer
|
|__ Script (JavaScript code)
Basic Programs:
- Adding a new element to the DOM:
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<script>
function addElement() {
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello, World!");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
}
</script>
</head>
<body>
<button onclick="addElement()">Add Element</button>
</body>
</html>
- Responding to a click event:
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<script>
function handleClick() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="handleClick()">Click me</button>
</body>
</html>
- Responding to a key press event:
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<script>
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
alert("Enter key pressed!");
}
});
</script>
</head>
<body>
<p>Press the Enter key.</p>
</body>
</html>
To run these programs in Visual Studio Code, save them with a .html extension and open them in a web browser. Alternatively, you can install the Live Server extension in Visual Studio Code and run them using the Live Server feature.
Core Java in 25 hours 