Browser Web APIs in JavaScript Complete Guide

// Single element
const header = document.querySelector("h1");
const button = document.querySelector("#submit-btn");
const card   = document.querySelector(".card:first-child");
 
// Multiple elements (returns NodeList)
const items = document.querySelectorAll(".list-item");
items.forEach(item => item.classList.add("active"));

const article = document.createElement("article");
article.className = "post";
article.innerHTML = `
  <h2>${title}</h2>
  <p>${excerpt}</p>
`;
 
// Append to container
document.querySelector(".feed").appendChild(article);
 
// Insert before a specific element
const feed = document.querySelector(".feed");
feed.insertBefore(article, feed.firstChild);

const el = document.querySelector(".card");
 
// Classes
el.classList.add("highlight");
el.classList.remove("hidden");
el.classList.toggle("expanded");
el.classList.contains("active"); // true or false
 
// Attributes
el.setAttribute("data-id", "42");
el.getAttribute("data-id"); // "42"
el.removeAttribute("data-id");
 
// Dataset (data-* attributes)
el.dataset.id = "42";      // sets data-id="42"
console.log(el.dataset.id); // "42"

// GET request
const response = await fetch("/api/users");
const users = await response.json();
 
// POST request
const newUser = await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice", email: "alice@example.com" }),
});

// Store
localStorage.setItem("theme", "dark");
localStorage.setItem("user", JSON.stringify({ name: "Alice" }));
 
// Retrieve
const theme = localStorage.getItem("theme"); // "dark"
const user = JSON.parse(localStorage.getItem("user")); // { name: "Alice" }
 
// Remove
localStorage.removeItem("theme");
 
// Clear all
localStorage.clear();

// Same API as localStorage, but data is cleared when the tab closes
sessionStorage.setItem("formDraft", JSON.stringify(formData));
const draft = JSON.parse(sessionStorage.getItem("formDraft"));

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        // Lazy load image
        const img = entry.target.querySelector("img[data-src]");
        if (img) {
          img.src = img.dataset.src;
          img.removeAttribute("data-src");
        }
        observer.unobserve(entry.target); // Stop observing once loaded
      }
    });
  },
  { threshold: 0.1 } // Trigger when 10% visible
);
 
document.querySelectorAll(".lazy-section").forEach(el => observer.observe(el));

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Element resized: ${width}x${height}`);
 
    // Responsive component logic
    entry.target.classList.toggle("compact", width < 400);
  }
});
 
observer.observe(document.querySelector(".dashboard-panel"));

// Write to clipboard
async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("Copied!");
  } catch (err) {
    console.error("Copy failed:", err);
  }
}
 
// Read from clipboard
async function pasteText() {
  const text = await navigator.clipboard.readText();
  return text;
}

function getLocation() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error("Geolocation not supported"));
      return;
    }
 
    navigator.geolocation.getCurrentPosition(
      (position) => {
        resolve({
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          accuracy: position.coords.accuracy,
        });
      },
      (error) => reject(error),
      { enableHighAccuracy: true, timeout: 10000 }
    );
  });
}
 
const location = await getLocation();
console.log(`Lat: ${location.lat}, Lng: ${location.lng}`);

// Parse a URL
const url = new URL("https://example.com/search?q=javascript&page=2#results");
console.log(url.hostname);    // "example.com"
console.log(url.pathname);    // "/search"
console.log(url.hash);        // "#results"
 
// Work with query parameters
const params = url.searchParams;
console.log(params.get("q"));    // "javascript"
console.log(params.get("page")); // "2"
 
// Build query strings
const newParams = new URLSearchParams({ q: "react", sort: "date", page: 1 });
console.log(newParams.toString()); // "q=react&sort=date&page=1"

async function notify(title, body) {
  if (Notification.permission === "default") {
    await Notification.requestPermission();
  }
 
  if (Notification.permission === "granted") {
    new Notification(title, {
      body,
      icon: "/icons/notification.png",
    });
  }
}
 
notify("New Message", "You have a new message from Alice");