DEV Community

Cover image for Part 10: All You Need to Know to Master Web Development With HTML CSS and JavaScript
Blackie
Blackie

Posted on

Part 10: All You Need to Know to Master Web Development With HTML CSS and JavaScript

#webdev #javascript #beginners #tutorial

Understanding the DOM

Contents

Introduction
Accessing Elements
Modifying Elements
Creating Elements
Removing Elements
Projects
Bonus Tip

  • Definition: The DOM is a tree-like representation of a webpage's structure, allowing JavaScript to interact with and modify its elements.
  • Elements: Each node in the DOM represents an HTML element (e.g., <h1>, <p>, <div>).
  • Properties: Elements have properties like id, class, textContent, and style that can be accessed and modified.

Accessing Elements:

  • document.getElementById(id): Retrieves a single element by its unique ID.
  • document.getElementsByClassName(className): Retrieves a collection of elements with a specific class name.
  • document.querySelector(selector): Retrieves the first element matching a CSS selector.
  • document.querySelectorAll(selector): Retrieves all elements matching a CSS selector. 
// Get element by ID:
const heading = document.getElementById("main-heading");
heading.textContent = "Hello, world!";

// Get all elements with a class name:
const paragraphs = document.getElementsByClassName("intro-text");
paragraphs[0].style.color = "red";

// Get elements using CSS selectors:
const firstButton = document.querySelector("button");
firstButton.disabled = true;

const allLinks = document.querySelectorAll("a");
allLinks.forEach(link => link.style.textDecoration = "underline");
Enter fullscreen mode Exit fullscreen mode

Modifying Elements:

  • Changing content:
    • element.textContent = "New text";
    • element.innerHTML = "<b>New content</b>";
  • Changing attributes:
    • element.setAttribute("attribute", "value");
    • element.removeAttribute("attribute");
  • Changing styles:
    • element.style.property = "value"; 
// Change text content:
const description = document.querySelector("p");
description.textContent = "This is a new description.";

// Change HTML content:
const container = document.getElementById("content");
container.innerHTML = "<h2>New Content</h2>";

// Change attributes:
const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");

// Change styles:
const heading = document.querySelector("h1");
heading.style.color = "blue";
heading.style.fontSize = "36px";
Enter fullscreen mode Exit fullscreen mode

Creating Elements:

  • document.createElement(tagName): Creates a new element node.
  • element.appendChild(newElement): Appends a new element as a child of an existing element.
  • element.insertBefore(newElement, referenceElement): Inserts a new element before a reference element. 
// Create a new element:
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a dynamically created paragraph.";

// Append the element:
const body = document.body;
body.appendChild(newParagraph);

// Insert before an existing element:
const existingElement = document.getElementById("existing-element");
body.insertBefore(newParagraph, existingElement);
Enter fullscreen mode Exit fullscreen mode

Removing Elements:

  • element.parentNode.removeChild(element): Removes an element from the DOM. 
const elementToRemove = document.querySelector(".remove-me");
elementToRemove.parentNode.removeChild(elementToRemove);
Enter fullscreen mode Exit fullscreen mode

Projects

Project 1: Interactive To-Do List

const todoList = document.getElementById("todo-list");
const inputField = document.getElementById("new-task");
const addButton = document.getElementById("add-button");

addButton.addEventListener("click", function() {
  const newTask = document.createElement("li");
  newTask.textContent = inputField.value;
  todoList.appendChild(newTask);
  inputField.value = ""; // Clear input field
});

todoList.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("completed");
  }
});
Enter fullscreen mode Exit fullscreen mode

Project 2: Image Gallery with Lightbox Effect

const images = document.querySelectorAll(".gallery img");

images.forEach(image => {
  image.addEventListener("click", function() {
    const lightbox = document.createElement("div");
    lightbox.classList.add("lightbox");

    const img = document.createElement("img");
    img.src = this.src;
    lightbox.appendChild(img);

    document.body.appendChild(lightbox);

    lightbox.addEventListener("click", function() {
      this.remove();
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

Project 3: Hamburger Icon Toggle

<!DOCTYPE html>
<html>
<head>
<title>Hamburger Icon Toggle</title>
<style>
.nav-menu {
  display: none; /* Initially hidden */
}

.nav-menu.open {
  display: block;
}

/* Optional styling for open/closed icon states */
.hamburger-icon.open {
  /* Style for open state */
}
</style>
</head>
<body>

<button class="hamburger-icon">☰</button>
<nav class="nav-menu">
  </nav>

<script>
const hamburgerIcon = document.querySelector(".hamburger-icon");
const navMenu = document.querySelector(".nav-menu");

hamburgerIcon.addEventListener("click", function() {
  navMenu.classList.toggle("open");
  hamburgerIcon.classList.toggle("open"); // Optionally toggle icon state
});
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Bonus Tip

Top comments (0)

Read next

nhannguyendevjs profile image

Angular Signals update function

Nhan Nguyen -

bgdnvarlamov profile image

Enhancing JavaScript with Promise.withResolvers()

Bogdan Varlamov -

zorian profile image

Getting Started with DataDog's APM: A Developer's Guide

Zorian -

wewake-dev profile image

Practical and Beginner friendly guide for speeding up your web-apps

Wewake -