Topic 5 : JavaScript DOM

JavaScript DOM

In the vibrant city of Codeville, the Grand Council of Developers sought to understand the power of manipulating web pages dynamically. To achieve this, they decided to dive into the Document Object Model (DOM) in JavaScript. The DOM allows developers to interact with and modify the structure, style, and content of web pages. Join us as we explore the basics of the JavaScript DOM and learn how to use it effectively.

Chapter 1: What is the DOM?

Mayor Binary began the lesson. “The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as a tree of nodes, with each node representing part of the document.”

In simple terms, the DOM allows JavaScript to interact with HTML and CSS, making it possible to create dynamic web pages.

Chapter 2: Accessing DOM Elements

The council learned various methods to access DOM elements.

Using getElementById

This method returns the element that has the ID attribute with the specified value.

javascript

Copy code

let element = document.getElementById(“myElement”);

console.log(element);

Using getElementsByClassName

This method returns a collection of all elements in the document with the specified class name.

javascript

Copy code

let elements = document.getElementsByClassName(“myClass”);

console.log(elements);

Using getElementsByTagName

This method returns a collection of all elements in the document with the specified tag name.

javascript

Copy code

let elements = document.getElementsByTagName(“p”);

console.log(elements);

Using querySelector and querySelectorAll

These methods return the first element that matches the specified CSS selector, or a list of all matching elements.

javascript

Copy code

let element = document.querySelector(“.myClass”);

console.log(element);

let elements = document.querySelectorAll(“.myClass”);

console.log(elements);

Chapter 3: Modifying DOM Elements

Mayor Binary explained how to modify DOM elements by changing their content, attributes, and styles.

Changing Content

Use the textContent or innerHTML properties to change the content of an element.

javascript

Copy code

let element = document.getElementById(“myElement”);

element.textContent = “New content here!”;

Changing Attributes

Use the setAttribute method to change the attribute of an element.

javascript

Copy code

let element = document.getElementById(“myElement”);

element.setAttribute(“class”, “newClass”);

Changing Styles

Use the style property to change the CSS styles of an element.

javascript

Copy code

let element = document.getElementById(“myElement”);

element.style.color = “red”;

element.style.backgroundColor = “yellow”;

Chapter 4: Creating and Removing DOM Elements

The council learned how to create new DOM elements and remove existing ones.

Creating Elements

Use the createElement method to create a new element, and the appendChild method to add it to the DOM.

javascript

Copy code

let newElement = document.createElement(“p”);

newElement.textContent = “This is a new paragraph.”;

document.body.appendChild(newElement);

Removing Elements

Use the removeChild method to remove an existing element.

javascript

Copy code

let element = document.getElementById(“myElement”);

element.parentNode.removeChild(element);

Chapter 5: Event Handling

Mayor Binary explained the importance of handling events to make web pages interactive.

Adding Event Listeners

Use the addEventListener method to add an event listener to an element.

javascript

Copy code

let button = document.getElementById(“myButton”);

button.addEventListener(“click”, function() {

    alert(“Button was clicked!”);

});

Removing Event Listeners

Use the removeEventListener method to remove an event listener from an element.

javascript

Copy code

function handleClick() {

    alert(“Button was clicked!”);

}

let button = document.getElementById(“myButton”);

button.addEventListener(“click”, handleClick);

// To remove the event listener

button.removeEventListener(“click”, handleClick);

Chapter 6: Practical Example: Interactive To-Do List

The council decided to create a practical example by building an interactive to-do list using DOM manipulation.

HTML

html

Copy code

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Interactive To-Do List</title>

    <style>

        .completed {

            text-decoration: line-through;

            color: gray;

        }

    </style>

</head>

<body>

    <h1>To-Do List</h1>

    <input type=”text” id=”newTask” placeholder=”Enter a new task”>

    <button id=”addTaskButton”>Add Task</button>

    <ul id=”taskList”></ul>

    <script src=”todo.js”></script>

</body>

</html>

JavaScript

todo.js:

javascript

Copy code

document.getElementById(“addTaskButton”).addEventListener(“click”, function() {

    let taskInput = document.getElementById(“newTask”);

    let taskText = taskInput.value;

    if (taskText === “”) {

        alert(“Please enter a task.”);

        return;

    }

    let taskItem = document.createElement(“li”);

    taskItem.textContent = taskText;

    taskItem.addEventListener(“click”, function() {

        taskItem.classList.toggle(“completed”);

    });

    document.getElementById(“taskList”).appendChild(taskItem);

    taskInput.value = “”;

});

Conclusion

By mastering the JavaScript DOM, the Grand Council of Developers in Codeville learned how to interact with and manipulate web pages dynamically. The DOM is a powerful interface that allows developers to create rich, interactive web applications. Feel free to experiment with the provided examples and expand upon them to suit different scenarios. If you have any questions or need further assistance, I’m here to help. Happy coding!