Essential JavaScript Web APIs

Core Web APIs

JavaScript provides fundamental interfaces for web developmant:

DOM (Document Object Model): Manages document structure
BOM (Browser Object Model): Controls browser interactions
Web Storage: Client-side data persistence

Document Object Model

DOM Tree Structure

The DOM represents documents as node trees:

<document>
  ├── <html>
  │   ├── <head>
  │   └── <body>
  │       └── <div>

Element Selection Methods

// Get by identifier
const mainElement = document.getElementById('primary');

// Select by tag
const allDivs = document.getElementsByTagName('div');

// Modern selectors
const firstCard = document.querySelector('.card');
const allCards = document.querySelectorAll('.card');

Event Handling

Basic event pattern: source → type → handler

const actionButton = document.querySelector('#action-btn');

// Event binding
actionButton.addEventListener('click', handleInteraction);

function handleInteraction(event) {
  console.log('Event triggered:', event.type);
}

// Event unbinding
actionButton.removeEventListener('click', handleInteraction);

Element Manipulation

// Content modification
const contentArea = document.querySelector('#content');
contentArea.textContent = 'Updated text content';
contentArea.innerHTML = '<strong>Formatted</strong> content';

// Attribute handling
const profileImage = document.querySelector('#avatar');
profileImage.setAttribute('src', 'new-profile.jpg');

Node Operations

// Node creation
const newItem = document.createElement('li');
newItem.textContent = 'New list item';

// Node insertion
const parentList = document.querySelector('#list-container');
parentList.appendChild(newItem);

// Node cloning
const clonedItem = newItem.cloneNode(true);

Event Flow Mechanics

DOM events follow capture → target → bubble sequence

document.body.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('Origin element:', e.target);
}, true);

Browser Object Model

Window Management

// Page load events
window.addEventListener('DOMContentLoaded', initApp);

// Viewport resizing
window.addEventListener('resize', adjustLayout);

Scheduling Operations

// Delayed execution
const timeoutId = setTimeout(performAction, 1500);

// Periodic execution
const intervalId = setInterval(updateStatus, 3000);

// Canceling timers
clearTimeout(timeoutId);
clearInterval(intervalId);

Browser Navigation

// URL manipulation
console.log('Current path:', location.pathname);
location.assign('/new-page.html');

// History management
history.go(-2);

Web Storage Mechanisms

Session Storage

// Temporary data storage
sessionStorage.setItem('sessionToken', 'xyz789');

// Data retrieval
const token = sessionStorage.getItem('sessionToken');

// Data removal
sessionStorage.removeItem('sessionToken');

Persistant Storage

// Long-term data storage
localStorage.setItem('userPreferences', JSON.stringify({theme: 'dark'}));

// Retrieving stored data
const preferences = JSON.parse(localStorage.getItem('userPreferences'));

// Clearing storage
localStorage.clear();

Tags: DOM BOM WebStorage javascript EventHandling

Posted on Wed, 20 May 2026 03:08:48 +0000 by kratos-2012

Freaks City