07_dom_manipulation.md

DOM Manipulation

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML or XML document and provides methods and properties to interact with the elements within that document. JavaScript allows you to manipulate the DOM to dynamically modify the content, style, and behavior of web pages. Here are some commonly used DOM manipulation techniques:

Selecting DOM Elements

The DOM provides several methods to select elements from the document:

• getElementById: Selects an element based on its unique ID.

  let element = document.getElementById("myElement");

• querySelector: Selects the first element that matches a CSS selector.

  let element = document.querySelector(".myClass");

• querySelectorAll: Selects all elements that match a CSS selector, returning a NodeList.

  let elements = document.querySelectorAll("div");

Modifying Element Properties

Once you have selected a DOM element, you can modify its properties to change its content, style, or attributes:

• textContent or innerText: Changes the text content of an element.

  element.textContent = "Hello, World!";

• innerHTML: Changes the HTML content of an element.

  element.innerHTML = "<strong>Hello</strong>, World!";

• className or classList: Modifies the CSS classes of an element.

  element.className = "highlight";
  // or
  element.classList.add("highlight");
  element.classList.remove("active");
  element.classList.toggle("selected");

• setAttribute and removeAttribute: Sets or removes attributes of an element.

  element.setAttribute("data-value", "123");
  element.removeAttribute("data-value");

Creating and Modifying Elements

You can create new elements, modify their properties, and insert them into the document:

• createElement: Creates a new element.

  let newElement = document.createElement("div");

• appendChild: Appends a child element to another element.

  parentElement.appendChild(newElement);

• insertBefore: Inserts an element before a reference element.

  parentElement.insertBefore(newElement, referenceElement);

• removeChild: Removes a child element from its parent.

  parentElement.removeChild(childElement);

Event Handling

The DOM allows you to handle user interactions and respond to events such as clicks, key presses, and form submissions:

• addEventListener: Registers an event listener on an element.

  element.addEventListener("click", function(event) {
    // Event handling code
  });

• event.target: Represents the element on which the event was originally triggered.

  element.addEventListener("click", function(event) {
    let targetElement = event.target;
    // Event handling code
  });

• Event Types: Common event types include "click", "keydown", "submit", and many more. You can listen for specific events based on your application's needs.

Styling Elements

You can modify the style of elements to change their appearance:

• style.property: Changes a specific CSS property of an element.

  element.style.color = "red";
  element.style.backgroundColor = "yellow";

• classList: Manipulates CSS classes to apply or remove styles.

  element.classList.add("highlight");
  element.classList.remove("active");
  element.classList.toggle("selected");

• CSS Text: You can also modify the className property or use setAttribute to change the class attribute of an element, which affects the applied styles.

These techniques allow you to manipulate the DOM dynamically and create interactive web pages. Remember to use these techniques judiciously and consider performance implications when working with large or frequently changing DOM structures.