Javascript Dom

What is dom and why do we use it?

The Dom allows you to use JavaScript to interact with and modify the element and content of a webpage. You can use it to dynamically change the text, attributes, styles, and even the structure of a webpage without needing to reload the entire pages. This enables the creation of interactive and dynamic web applications.

In this article, we will be looking at the main idea of JavaScript DOM. It's like a bridge between web pages and JavaScript that lets us change and play with elements on a webpage. We'll learn how the DOM arranges web stuff like a tree, where each thing is a part of the tree. This helps us do cool things like changing text, making buttons work, and creating new parts on a webpage. So, get ready to understand and use JavaScript DOM to make your web pages more fun and interactive!

The DOM Tree Structure

The Tree Structure is like a family tree for web pages. Imagine a big tree with branches, and each branch has smaller branches or leaves. In the same way, a web page has elements, and they're all connected like a tree.

HTML Structure-

<!DOCTYPE html>
<html>
<head>
    <title>DOM Tree Example</title>
</head>
<body>
    <h1>Welcome to My Article</h1>
    <p>This is a paragraph of text.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

In this code, we have an HTML structure. look at it like a tree:

The entire webpage is like a big tree trunk.
<html> is the main branch, and it has two smaller branches <head> and <body>
<head> holds information about the webpage, like the title.
<body> is where the main content is. It has more branches, like <h1>, <p>, and <ul>
Inside <ul>, there are three <li> leaves.

So, the DOM Tree structure is like a family tree that helps us organize and work with all the elements on a webpage. We can use Javascript to find changes or add new elements to this tree.

Accessing DOM Elements

Accessing DOM elements means finding and selecting parts of a webpage so we can work with them using JavaScript. It's like picking out specific things from a room so we can play them.

Example-

<!DOCTYPE html>
<html>
<head>
    <title>Accessing DOM Elements</title>
</head>
<body>
    <h1 id="myHeading">Hello, World!</h1>
    <p>This is a paragraph.</p>
    <button id="myButton">Click Me</button>
</body>
</html>

In this code, we have different elements like <h1>, <p>, and <button>. We want to access and play with them using JavaScript.

we can do this using IDs, like a name tag for an element. For instance, the <h1> has an ID of "myHeading," and the <button> has an ID of "myButton."

let's use JavaScript to access these elements-

// Access the heading element using its ID
var headingElement = document.getElementById("myHeading");

// Access the paragraph element (first <p> tag)
var paragraphElement = document.querySelector("p");

// Access the button element using its ID
var buttonElement = document.getElementById("myButton");

Code Explanation-

We use 'getElementById' to find the element with the ID "myHeading" and store it in the 'headingElement' variable.

We use 'querySelector' to find the first <p> Tag and store it in the 'paragraphElement' variable.
We use 'getElementById' again to find the element with the ID 'myButton' and store it in the 'buttonElement' variable.

We can do things with these elements, like changing their text or adding event listeners to them. This is how we access and interact with different parts of a webpage using JavaScript and the DOM!

Modifying Element Content

Modifying element content means changing the text or what's inside an element on a webpage using JavaScript, It's like editing the words on a sign to say something different.

Example-

<!DOCTYPE html>
<html>
<head>
    <title>Modifying Element Content</title>
</head>
<body>
    <h1 id="myHeading">Hello, World!</h1>
    <p id="myParagraph">This is a paragraph.</p>
    <button id="myButton">Click Me</button>
</body>
</html>

In this code, we have elements with IDs like <h1>, <p>, and <button>. We want to change the text inside these elements using JavaScript.

Modify the element content using JavaScript-

// Access the heading element using its ID
var headingElement = document.getElementById("myHeading");
// Change the text inside the heading element
headingElement.innerHTML = "Welcome to My Website";

// Access the paragraph element using its ID
var paragraphElement = document.getElementById("myParagraph");
// Change the text inside the paragraph element
paragraphElement.innerHTML = "This is a new paragraph.";

// Access the button element using its ID
var buttonElement = document.getElementById("myButton");
// Change the text inside the button element
buttonElement.innerHTML = "Click Me Now";

Code Explanation-

We use getElementById to find the element with the ID "myHeading" and store it in the headingElement variable. Then we change its content using innerHTML.
We do the same for the paragraph and button elements, changing their content using innerHTML.

After running this JavaScript, the webpage will show updated text for the heading, paragraph, and button elements.

This is how we modify the content inside elements on a webpage using JavaScript and the DOM. It's like editing the words on a sign to say something new and exciting!

Manipulating styles and classes

Manipulating styles and classes means changing how things look on a webpage using JavaScript. It's like giving things a new coat of paint or a different outfit to make them look cooler or fancier.

Example-

<!DOCTYPE html>
<html>
<head>
    <title>Manipulating Styles and Classes</title>
</head>
<body>
    <h1 id="myHeading">Hello, World!</h1>
    <p id="myParagraph">This is a paragraph.</p>
    <button id="myButton">Click Me</button>
</body>
</html>

In this code, we have elements like <h1>, <p>, and <button>. We want to change how they look using JavaScript.

Let's manipulate styles and classes using JavaScript:

// Access the heading element using its ID
var headingElement = document.getElementById("myHeading");
// Change the text color of the heading
headingElement.style.color = "blue";

// Access the paragraph element using its ID
var paragraphElement = document.getElementById("myParagraph");
// Add a CSS class to the paragraph
paragraphElement.classList.add("highlight");

// Access the button element using its ID
var buttonElement = document.getElementById("myButton");
// Change the button background color
buttonElement.style.backgroundColor = "green";

Code Explanation-

We use getElementById to find the element with the ID "myHeading" and store it in the headingElement variable. Then we change its text color using the style property.
We do the same for the paragraph element, adding a CSS class to it using classList.add.
For the button element, we change its background color using the style property.

After running this JavaScript, the heading will have a blue text color, the paragraph will have a highlight class applied, and the button will have a green background.

This is how we manipulate styles and classes of elements on a webpage using JavaScript and the DOM. It's like giving your webpage a fresh and stylish look with a few lines of code!

Event handling

Event handling means making things happen on a webpage when someone interacts with it, like clicking a button or typing something. It's like setting up a response to a specific action, so the webpage can react and do something in return.

Example-

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button id="myButton">Click Me</button>
    <p id="myText">This is some text.</p>
</body>
</html>

In this code, we have a <button> and a <p> element. We want something to happen when the button is clicked.

Let's handle an event using JavaScript:

// Access the button element using its ID
var buttonElement = document.getElementById("myButton");

// Access the text element using its ID
var textElement = document.getElementById("myText");

// Add an event listener to the button
buttonElement.addEventListener("click", function() {
    textElement.innerHTML = "Button was clicked!";
});

Code Explanation-

We use getElementById to find the button element and store it in the buttonElement variable.
We also find the text element and store it in the textElement variable.
We add an event listener to the button using addEventListener. We're listening for the "click" event, which means when the button is clicked.
When the button is clicked, the function inside addEventListener is triggered. This function changes the text inside the text element to "Button was clicked!"

Now, when you click the button on the webpage, the text will change to "Button was clicked!".

This is how we handle events on a webpage using JavaScript and the DOM. It's like telling your webpage what to do when someone interacts with it, making your webpage interactive and responsive!

Traversal and navigation mean moving around and exploring different parts of a webpage using JavaScript. It's like going from room to room in a house to see what's there.

Example-

<!DOCTYPE html>
<html>
<head>
    <title>Traversal and Navigation</title>
</head>
<body>
    <div id="container">
        <h1>Hello!</h1>
        <p>This is a paragraph.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
</body>
</html>

In this code, we have a <div> with an <h1>, a <p>, and a <ul> containing two <li> items. We want to move around and explore these elements using JavaScript.

Let's traverse and navigate through the elements using JavaScript:

// Access the container element using its ID
var containerElement = document.getElementById("container");

// Get the first child element of the container
var firstChild = containerElement.firstElementChild;

// Get the last child element of the container
var lastChild = containerElement.lastElementChild;

// Get the next sibling of the <h1> element
var nextSibling = firstChild.nextElementSibling;

// Get the previous sibling of the <ul> element
var prevSibling = lastChild.previousElementSibling;

Code Explanation-

We use getElementById to find the container element and store it in the containerElement variable.
We use firstElementChild to get the first child element of the container and store it in the firstChild variable.
We use lastElementChild to get the last child element of the container and store it in the lastChild variable.
We use nextElementSibling to get the next sibling of the <h1> element (which is the <p> element) and store it in the nextSibling variable.
We use previousElementSibling to get the previous sibling of the <ul> element (which is the <p> element) and store it in the prevSibling variable.

Now you can explore and move around the elements in the container using these variables.

This is how we traverse and navigate through different parts of a webpage using JavaScript and the DOM. It's like moving from one room to another in a house to see what's there and interact with different things!

To-Do List application using JavaScript DOM

HTML Structure:

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Enter a task">
        <button id="addButton">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

#app {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

h1 {
    margin-top: 0;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 5px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

JavaScript Logic:

const addButton = document.getElementById("addButton");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");

addButton.addEventListener("click", addTask);

function addTask() {
    const taskText = taskInput.value;
    if (taskText === "") return;

    const li = document.createElement("li");
    li.textContent = taskText;

    const deleteButton = document.createElement("button");
    deleteButton.textContent = "Delete";
    deleteButton.addEventListener("click", () => {
        taskList.removeChild(li);
    });

    li.appendChild(deleteButton);
    taskList.appendChild(li);

    taskInput.value = "";
}

Add your task here-

https://codepen.io/kohi9noor/pen/jOQogXJ

This code does the following:

Retrieves elements using getElementById.
Adds an event listener to the "Add Task" button that calls the addTask function.
The addTask function creates a new list item (<li>) with the task text and a "Delete" button.
The "Delete" button's click event listener removes the task item from the list.

Testing: Open your index.html file in a web browser to test your To-Do List application.

By following these steps, you've created a simple To-Do List application using JavaScript DOM. Users can add tasks, mark them as completed, and remove tasks from the list. You can further enhance this project by adding features like task completion, local storage, and more advanced styling.

And with that, we conclude today's article! Your visit has been a delight, and I trust that you've enjoyed perusing these words as much as I've relished penning them. Until our paths cross again, take care and may the joy of this read linger with you.

kohinoor's blog

kohinoor's blog

Javascript Dom

Unleashing Interactivity and Dynamic Web Magic

Table of contents

What is dom and why do we use it?

The DOM Tree Structure

Accessing DOM Elements

Modifying Element Content

Manipulating styles and classes

Event handling

Traversal and Navigation

To-Do List application using JavaScript DOM