Header Ads Widget

Responsive Advertisement

Ticker

6/recent/ticker-posts

What is the DOM? Key Concepts | Example | Explanation | Set Up Your Project in JavaScript

DotNetFullStackDeveloper August 28, 2024

The Document Object Model (DOM) is a crucial concept in web development, as it represents the structure of a webpage. It allows you to interact with and manipulate HTML and XML documents programmatically. Here's an introduction to the DOM with a simple example in JavaScript.

What is the DOM?

The DOM is a hierarchical representation of a webpage. It breaks down the page into a tree structure where each element, attribute, and text is a node. The DOM allows you to access and modify these nodes dynamically using JavaScript.




Key Concepts

  • Document: Represents the entire web page.
  • Element: Represents HTML tags like <div>, <p>, etc.
  • Node: Can be an element, attribute, or text.
  • Parent/Child/Sibling Relationships: Nodes have hierarchical relationships which can be navigated.


Basic Example

Let's walk through a simple example to demonstrate how to use the DOM with JavaScript.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1 id="main-heading">Hello, World!</h1>
    <p id="intro">This is an introduction paragraph.</p>
    <button id="change-text-button">Change Text</button>

    <script src="script.js"></script>
</body>
</html>


JavaScript (script.js):

// Access the DOM elements
const heading = document.getElementById('main-heading');
const introParagraph = document.getElementById('intro');
const button = document.getElementById('change-text-button');

// Change the text content of the heading
heading.textContent = 'Welcome to the DOM Tutorial!';

// Change the text content of the paragraph
introParagraph.textContent = 'You are learning about the Document Object Model.';

// Add an event listener to the button
button.addEventListener('click', () => {
    // Change the text content of the heading when the button is clicked
    heading.textContent = 'Text Changed!';
});

Explanation

  1. Accessing Elements:

    • document.getElementById('main-heading') retrieves the element with the ID main-heading.
    • document.getElementById('intro') retrieves the element with the ID intro.
    • document.getElementById('change-text-button') retrieves the button element.

  2. Manipulating Content:

    • heading.textContent = 'Welcome to the DOM Tutorial!'; changes the text inside the <h1> element.
    • introParagraph.textContent = 'You are learning about the Document Object Model.'; updates the text inside the <p> element.

  3. Event Handling:

    • button.addEventListener('click', () => { ... }); adds a click event listener to the button. When the button is clicked, the text of the heading is updated.

This example demonstrates how to interact with and modify the DOM using JavaScript, which is fundamental for creating dynamic and interactive web pages.


To execute the example of manipulating the DOM in Visual Studio Code (VS Code), you'll need to follow these steps:

1. Set Up Your Project

  1. Create a Project Folder: Make a new folder for your project. You can name it something like dom-example.

  2. Open VS Code: Launch VS Code and open the project folder.

2. Create Your Files

  1. Create an HTML File:

    • Right-click in the VS Code Explorer pane (or use the menu) and select New File.
    • Name the file index.html.

  2. Create a JavaScript File:

    • Similarly, create another file and name it script.js.

3. Add Your Code

In index.html:

Add HTML code.

In script.js:

Add Script code.

4. Run Your Project

  1. Open Live Server Extension:

    • In VS Code, you can use the Live Server extension to run your HTML file.
    • If you don’t have Live Server installed, you can get it from the Extensions view. Search for "Live Server" and install it.

  2. Start Live Server:

    • After installing the Live Server extension, right-click on index.html in the VS Code Explorer pane.
    • Select Open with Live Server. This will launch your HTML file in your default web browser and automatically reload it when you make changes.

5. View Your Changes

  1. Check the Web Browser:
    • You should see the heading and paragraph displayed as defined in your HTML.
    • Clicking the button should change the heading text to "Text Changed!".

Troubleshooting

  • No Changes Visible? Make sure you've saved both index.html and script.js after making changes.
  • Live Server Not Working? Ensure you have the extension installed and running. You might need to reload the browser or restart VS Code.

By following these steps, you should be able to see and interact with your DOM manipulation example in a browser using VS Code.






Tags:

Post a Comment

0 Comments

If you have any queries, please let me know. Thanks.