Chapters: JavaScript HTML & CSS JSON XML YAML Go Java ← Full TOC

🌐 DOM & Browser — DOM manipulation, events, localStorage, fetch in browser

The Document Object Model (DOM) is the browser's in-memory representation of HTML. JavaScript manipulates the DOM to create interactive web pages. All DOM operations are browser-only — not available in Node.js.

📋 Methods & APIs

Name	Signature / Syntax	Description
document.querySelector	document.querySelector(css) → Element	Select first matching element
document.querySelectorAll	document.querySelectorAll(css) → NodeList	Select all matching elements
document.getElementById	document.getElementById(id) → Element	Select element by ID
document.createElement	document.createElement(tag) → Element	Create new DOM element
element.innerHTML	element.innerHTML = '<b>text</b>'	Set/get HTML content (careful: XSS risk)
element.textContent	element.textContent = 'text'	Set/get text content (safe, no HTML parsing)
element.setAttribute	element.setAttribute(name, value)	Set attribute value
element.getAttribute	element.getAttribute(name) → string	Get attribute value
element.classList.add	element.classList.add('active')	Add CSS class
element.classList.remove	element.classList.remove('active')	Remove CSS class
element.classList.toggle	element.classList.toggle('dark')	Toggle CSS class
element.classList.contains	element.classList.contains('x') → bool	Check if class present
element.style	element.style.color = 'red'	Set inline CSS
element.appendChild	parent.appendChild(child)	Append child node
element.remove	element.remove()	Remove element from DOM
element.insertAdjacentHTML	el.insertAdjacentHTML('beforeend', html)	Insert HTML at position
addEventListener	el.addEventListener('click', fn)	Attach event listener
removeEventListener	el.removeEventListener('click', fn)	Remove event listener
event.preventDefault	event.preventDefault()	Prevent default browser behavior
event.stopPropagation	event.stopPropagation()	Stop event bubbling
localStorage.setItem	localStorage.setItem('key', JSON.stringify(val))	Persist data across sessions
localStorage.getItem	JSON.parse(localStorage.getItem('key'))	Retrieve persisted data
sessionStorage	sessionStorage.setItem/getItem(...)	Session-scoped storage
window.location	window.location.href = url	Navigate to URL
window.history	window.history.pushState(state, '', path)	SPA routing without reload
IntersectionObserver	new IntersectionObserver(fn, opts)	Detect element visibility
MutationObserver	new MutationObserver(fn)	Watch DOM changes
ResizeObserver	new ResizeObserver(fn)	Watch element size changes
requestAnimationFrame	requestAnimationFrame(fn)	Run fn before next repaint (animations)

💡 Example

Run with node script.js or save as HTML and open in browser.

// DOM Manipulation — save as index.html and open in browser
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS DOM Demo | MyWebUniversity</title>
  <style>
    body { font-family: Arial; max-width: 600px; margin: 40px auto;
           background: #0f172a; color: #e5e7eb; padding: 20px; }
    .card { background: #1e293b; border: 1px solid #334155;
            border-radius: 8px; padding: 16px; margin: 8px 0; }
    .card.highlight { border-color: #facc15; }
    button { padding: 8px 16px; background: #ca8a04; color: #fff;
             border: none; border-radius: 4px; cursor: pointer; margin: 4px; }
    #score { font-size: 2em; color: #facc15; text-align: center; padding: 10px; }
  </style>
</head>
<body>
  <h1>JS DOM Demo</h1>
  <div id="score">0</div>
  <button id="inc">+1</button>
  <button id="dec">-1</button>
  <button id="reset">Reset</button>
  <div id="list"></div>
  <input id="newItem" placeholder="Add item..." style="padding:8px;margin:8px 0;width:200px">
  <button id="add">Add</button>

  <script>
    // Counter with localStorage persistence
    let count = parseInt(localStorage.getItem('count') || '0');
    const scoreEl = document.getElementById('score');
    const update = () => { scoreEl.textContent = count; localStorage.setItem('count', count); };
    update();

    document.getElementById('inc').addEventListener('click', () => { count++; update(); });
    document.getElementById('dec').addEventListener('click', () => { count--; update(); });
    document.getElementById('reset').addEventListener('click', () => { count = 0; update(); });

    // Dynamic list
    const listEl  = document.getElementById('list');
    const input   = document.getElementById('newItem');
    const items   = JSON.parse(localStorage.getItem('items') || '[]');

    const renderList = () => {
      listEl.innerHTML = '';
      items.forEach((item, i) => {
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `<span>\${item}</span>
          <button onclick="items.splice(\${i},1);saveAndRender()">Remove</button>`;
        card.addEventListener('click', () => card.classList.toggle('highlight'));
        listEl.appendChild(card);
      });
    };
    const saveAndRender = () => {
      localStorage.setItem('items', JSON.stringify(items));
      renderList();
    };
    document.getElementById('add').addEventListener('click', () => {
      if (input.value.trim()) { items.push(input.value.trim()); input.value = ''; saveAndRender(); }
    });
    renderList();
  </script>
</body>
</html>

← Promises & Async | 🏠 Index | Node.js →