How does the Document Object Model (DOM) work in a web browser? Explain how JavaScript can manipulate the DOM to update content dynamically. Provide a simple example of adding and removing elements from the DOM. Focus on: Basic DOM structure, methods like getElementById, appendChild, removeChild, and event handling.
Resources & Suggestions
Mains Answer Writing Latest Articles
On: February 24, 2025
Daily Answer Writing Practice Questions (24 February 2025)
The rise of the work-from-home culture has brought about several ethical issues in private organizations. In this context, do you believe it is ethical for an employee to engage in moonlighting? Discuss. (Answer in 150 words) घर से काम करने ...
On: February 22, 2025
Comments:
0
Indo-US Relation: Areas of Cooperation & Conflicts
Key Areas: Defense, technology, trade, energy, and regional cooperation. Key Areas of Cooperation 1. Defense and Security Transition from buyer-seller to co-production and technology sharing. India as a Major Defense Partner (MDP) and inclusion in STA-1. Access to advanced technologies, ...
On: February 22, 2025
Comments:
0
भारत-अमेरिका संबंध: सहयोग और संघर्ष के क्षेत्र
मुख्य विषय: भारत-अमेरिका संबंधों की मजबूती, विशेषकर रक्षा, प्रौद्योगिकी और क्षेत्रीय सहयोग में प्रगति। सहयोग के प्रमुख क्षेत्र 1. रक्षा एवं सुरक्षा सहयोग भारत और अमेरिका के बीच रक्षा संबंधों का विस्तार। प्रमुख रक्षा साझेदार (MDP) का दर्जा और STA-1 ...
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each node is an object representing a part of the document, such as an element, attribute, or text content. The DOM allows programming languages like JavaScript to interact with and manipulate the content, structure, and style of a web document dynamically.
Basic DOM Structure
A typical HTML document’s DOM structure looks like this:
“`html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id=”container”>
<p>Hello, World!</p>
</div>
</body>
</html>
“`
This structure can be visualized as a tree:
– The `document` object is the root.
– The `html` element is a child of `document`.
– `head` and `body` are children of `html`.
– `title` is a child of `head`.
– `div` is a child of `body`.
– `p` is a child of `div`.
### JavaScript DOM Manipulation
JavaScript can manipulate the DOM using various methods provided by the DOM API. Here’s a rundown of some essential methods:
– `getElementById(id)`: Returns the element with the specified `id`.
– `appendChild(node)`: Adds a new child node to an element.
– `removeChild(node)`: Removes a child node from an element.
Example: Adding and Removing Elements
Adding an Element
Suppose we want to add a new paragraph inside the `div` with the id `container`:
“`html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id=”container”>
<p>Hello, World!</p>
</div>
<button id=”add”>Add Paragraph</button>
<script>
document.getElementById(‘add’).addEventListener(‘click’, function() {
// Create a new paragraph element
const newParagraph = document.createElement(‘p’);
// Set the text content of the new paragraph
newParagraph.textContent = ‘This is a new paragraph.’;
// Append the new paragraph to the container div
document.getElementById(‘container’).appendChild(newParagraph);
});
</script>
</body>
</html>
“`
In this example:
1. A new `p` element is created using `document.createElement(‘p’)`.
2. The text content is set using `newParagraph.textContent`.
3. The new paragraph is appended to the `div` with id `container` using `appendChild`.
Removing an Element
To remove the last paragraph inside the `div`:
“`html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id=”container”>
<p>Hello, World!</p>
</div>
<button id=”add”>Add Paragraph</button>
<button id=”remove”>Remove Paragraph</button>
<script>
document.getElementById(‘add’).addEventListener(‘click’, function() {
const newParagraph = document.createElement(‘p’);
newParagraph.textContent = ‘This is a new paragraph.’;
document.getElementById(‘container’).appendChild(newParagraph);
});
document.getElementById(‘remove’).addEventListener(‘click’, function() {
const container = document.getElementById(‘container’);
if (container.lastChild) {
container.removeChild(container.lastChild);
}
});
</script>
</body>
</html>
“`
In this example:
1. The `remove` button’s click event is handled by adding an event listener.
2. Inside the event listener, the `container` element is referenced.
3. The last child of `container` is removed using `removeChild`.
Event Handling
Event handling in the DOM allows JavaScript to respond to user interactions like clicks, keypresses, and form submissions. Event listeners can be added to elements using methods like `addEventListener`.
In the examples above, the `addEventListener` method is used to attach click event listeners to the `add` and `remove` buttons. When these buttons are clicked, the specified functions are executed, allowing dynamic changes to the DOM.
Conclusion
The DOM provides a flexible way to represent and interact with web documents. By using JavaScript methods such as `getElementById`, `appendChild`, and `removeChild`, developers can dynamically update content and respond to user interactions, creating more interactive and responsive web applications.
The Document Object Model (DOM) is a hierarchical representation of a webpage’s content, structured as a tree of objects. Each element, attribute, and text in HTML becomes a node in this tree, allowing programs to dynamically access and update the page’s content, structure, and style.
JavaScript interacts with the DOM to manipulate these elements. For instance, the `getElementById` method retrieves an element by its ID, allowing direct manipulation.
Example:
“`html
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<div id=”container”>
<p id=”paragraph”>Hello, World!</p>
</div>
<button id=”addButton”>Add Element</button>
<button id=”removeButton”>Remove Element</button>
<script>
// Add new element
document.getElementById(‘addButton’).addEventListener(‘click’, () => {
const newElement = document.createElement(‘p’);
newElement.textContent = ‘New Paragraph’;
document.getElementById(‘container’).appendChild(newElement);
});
// Remove existing element
document.getElementById(‘removeButton’).addEventListener(‘click’, () => {
const container = document.getElementById(‘container’);
const paragraph = document.getElementById(‘paragraph’);
if (paragraph) {
container.removeChild(paragraph);
}
});
</script>
</body>
</html>
“`
Explanation:
1. **Basic DOM Structure**: The webpage contains a `div` with a paragraph and two buttons.
2. **getElementById**: Used to select elements (`addButton`, `removeButton`, `container`, `paragraph`).
3. **appendChild**: Adds a new paragraph to the `container` when the “Add Element” button is clicked.
4. **removeChild**: Removes the specified paragraph from the `container` when the “Remove Element” button is clicked.
5. **Event Handling**: `addEventListener` attaches click events to the buttons to perform the actions.