Comprehensive DOM Methods & Events Documentation

This document covers many aspects of DOM manipulation and event handling including methods to get and set attributes, create and insert elements, and a vast range of events: mouse events, keyboard events, focus, drag and drop, touch, pointer, resize and more. Each section includes code examples for clarity.

🧰 DOM Methods & Properties

getAttribute()

Retrieves the value of a specified attribute on the element.

// Example: Getting the href attribute
      const link = document.querySelector('a');
      const hrefValue = link.getAttribute('href');

setAttribute()

Sets the value of an attribute on the specified element.

// Example: Setting a custom data attribute
      const div = document.createElement('div');
      div.setAttribute('data-role', 'admin');

createElement()

Creates a new HTML element of the given tag name.

// Creating a new paragraph element
      const p = document.createElement('p');
      p.innerText = 'Hello, world!';

appendChild()

Adds a node to the end of the list of children of a specified parent node.

// Appending the paragraph to a container element
      const container = document.getElementById('container');
      container.appendChild(p);

Other Useful Methods

querySelector() — Selects the first element that matches a specified CSS selector.
querySelectorAll() — Selects all elements that match a specified CSS selector.
remove() — Removes the element from the DOM.
replaceChild() — Replaces a child node with a new node.
cloneNode() — Creates a copy of the node.

// Example: Removing an element
      const element = document.querySelector('.remove-me');
      element.remove();

🖱️ Mouse Events

click

element.addEventListener("click", () => {
        console.log("Element clicked!");
      });

dblclick

element.addEventListener("dblclick", () => {
        console.log("Element double-clicked!");
      });

mouseenter

element.addEventListener("mouseenter", () => {
        console.log("Mouse entered!");
      });

mouseleave

element.addEventListener("mouseleave", () => {
        console.log("Mouse left!");
      });

mousemove

element.addEventListener("mousemove", (e) => {
        console.log("Mouse position:", e.clientX, e.clientY);
      });

wheel

element.addEventListener("wheel", (e) => {
        console.log("Mouse wheel used", e.deltaY);
      });

⌨️ Keyboard Events

keydown

document.addEventListener("keydown", (e) => {
        console.log("Key down:", e.key);
      });

keypress

document.addEventListener("keypress", (e) => {
        console.log("Key pressed:", e.key);
      });

keyup

document.addEventListener("keyup", (e) => {
        console.log("Key up:", e.key);
      });

🔍 Focus & Blur Events

focus

input.addEventListener("focus", () => {
        console.log("Input focused!");
      });

blur

input.addEventListener("blur", () => {
        console.log("Input lost focus!");
      });

🌀 Scroll & Window Events

scroll

window.addEventListener("scroll", () => {
        console.log("Scrolled to:", window.scrollY);
      });

resize

window.addEventListener("resize", () => {
        console.log("Window size changed:", window.innerWidth, window.innerHeight);
      });

🚚 Drag & Drop Events

dragstart

element.addEventListener("dragstart", (e) => {
        e.dataTransfer.setData("text/plain", e.target.id);
        console.log("Drag started");
      });

dragover

dropZone.addEventListener("dragover", (e) => {
        e.preventDefault();
        console.log("Drag over");
      });

drop

dropZone.addEventListener("drop", (e) => {
        e.preventDefault();
        const data = e.dataTransfer.getData("text/plain");
        console.log("Dropped element id:", data);
      });

📱 Touch & Pointer Events

touchstart

element.addEventListener("touchstart", (e) => {
        console.log("Touch started");
      });

touchmove

element.addEventListener("touchmove", (e) => {
        console.log("Touch moving");
      });

pointerdown

element.addEventListener("pointerdown", (e) => {
        console.log("Pointer down event", e.pointerType);
      });

pointerup

element.addEventListener("pointerup", (e) => {
        console.log("Pointer up event");
      });

pointermove

element.addEventListener("pointermove", (e) => {
        console.log("Pointer moved:", e.clientX, e.clientY);
      });

pointerenter / pointerleave

element.addEventListener("pointerenter", () => {
        console.log("Pointer entered element");
      });
      element.addEventListener("pointerleave", () => {
        console.log("Pointer left element");
      });

🎞️ Transition & Animation Events

transitionend

element.addEventListener("transitionend", () => {
        console.log("Transition completed");
      });

animationstart

element.addEventListener("animationstart", () => {
        console.log("Animation started");
      });

animationend

element.addEventListener("animationend", () => {
        console.log("Animation ended");
      });

animationiteration

element.addEventListener("animationiteration", () => {
        console.log("Animation iteration");
      });

🔧 Extra DOM Utilities & Concepts

classList

Methods to add, remove or toggle classes on an element.

element.classList.add("new-class");
      element.classList.remove("old-class");
      element.classList.toggle("active-class");

parentNode & childNodes

Accessing parent nodes, child nodes, firstChild, lastChild, etc.

const parent = element.parentNode;
      const children = element.childNodes; // includes text nodes

Event Bubbling & Capturing

Use addEventListener options to set event propagation. Use e.stopPropagation() to cancel bubbling.

parent.addEventListener("click", () => {
        console.log("Parent handler");
      }, true); // capturing phase

MutationObserver

Monitor changes to the DOM tree.

const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => console.log(mutation));
      });
      observer.observe(document.body, { childList: true, subtree: true });

📝 Additional Notes

This document is designed as a quick reference for many common DOM methods and events. While it is comprehensive, keep in mind that the DOM is vast and many libraries and frameworks may extend these concepts further.

For more interactive examples, consider integrating this documentation with a live code editor or linking to a comprehensive guide on MDN.