Agent skill

dom-apis

DOM manipulation and browser APIs including element selection, events, storage, fetch, and modern Web APIs.

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/pluginagentmarketplace/custom-plugin-javascript/tree/main/skills/dom-apis

SKILL.md

DOM & Browser APIs Skill

Quick Reference Card

Element Selection

javascript
// Modern (preferred)
document.querySelector('#id');
document.querySelector('.class');
document.querySelectorAll('div.item');

// Scoped
container.querySelector('.child');

// Cache references
const els = {
  form: document.querySelector('#form'),
  input: document.querySelector('#input'),
  btn: document.querySelector('#btn')
};

DOM Manipulation

javascript
// Safe text (XSS-safe)
el.textContent = userInput;

// Create elements (safest)
const div = document.createElement('div');
div.className = 'card';
div.textContent = title;
parent.appendChild(div);

// Batch updates (performance)
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
list.appendChild(fragment);

Event Handling

javascript
// Event delegation (best practice)
list.addEventListener('click', (e) => {
  if (e.target.matches('.delete')) {
    e.target.closest('li').remove();
  }
});

// Options
el.addEventListener('click', handler, {
  once: true,      // Remove after first call
  passive: true,   // Never preventDefault
  capture: false   // Bubbling phase
});

// Cleanup with AbortController
const controller = new AbortController();
el.addEventListener('click', handler, { signal: controller.signal });
controller.abort(); // Remove listener

Storage APIs

javascript
// LocalStorage (persistent)
localStorage.setItem('key', JSON.stringify(data));
const data = JSON.parse(localStorage.getItem('key'));

// SessionStorage (tab-only)
sessionStorage.setItem('token', value);

// Safe wrapper
const storage = {
  get: (k, def = null) => {
    try { return JSON.parse(localStorage.getItem(k)) ?? def; }
    catch { return def; }
  },
  set: (k, v) => localStorage.setItem(k, JSON.stringify(v))
};

Fetch API

javascript
// GET
const res = await fetch('/api/data');
const data = await res.json();

// POST
await fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

// With error handling
async function fetchJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

Modern Web APIs

javascript
// Intersection Observer (lazy loading)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      observer.unobserve(e.target);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

// Clipboard
await navigator.clipboard.writeText(text);

// Geolocation
navigator.geolocation.getCurrentPosition(
  pos => console.log(pos.coords),
  err => console.error(err)
);

Troubleshooting

Common Issues

Problem Symptom Fix
Element not found null returned Check if DOM loaded
Event not firing Handler not called Verify selector/delegation
XSS vulnerability Script execution Use textContent
Memory leak Growing memory Remove listeners

Debug Checklist

javascript
// 1. Verify element exists
const el = document.querySelector('#id');
console.assert(el, 'Element not found');

// 2. Check event target
el.addEventListener('click', (e) => {
  console.log('target:', e.target);
  console.log('currentTarget:', e.currentTarget);
});

// 3. Monitor DOM changes
new MutationObserver(console.log)
  .observe(el, { childList: true, subtree: true });

Production Patterns

Form Handling

javascript
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));

  try {
    btn.disabled = true;
    await submitData(data);
    form.reset();
  } catch (err) {
    showError(err.message);
  } finally {
    btn.disabled = false;
  }
});

Debounced Input

javascript
const debouncedSearch = debounce(async (query) => {
  const results = await search(query);
  renderResults(results);
}, 300);

input.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

Related

  • Agent 05: DOM & Browser APIs (detailed learning)
  • Skill: asynchronous: Fetch and promises
  • Skill: ecosystem: Framework alternatives

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

pluginagentmarketplace/custom-plugin-javascript

debugging

JavaScript debugging techniques using DevTools, Node.js debugger, and advanced troubleshooting.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

patterns

JavaScript design patterns and architectural best practices.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

asynchronous

Master asynchronous JavaScript patterns including callbacks, promises, async/await, event loop mechanics, and real-world async patterns.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

testing

JavaScript testing with Jest, Vitest, and Testing Library for comprehensive test coverage.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

ecosystem

JavaScript ecosystem including npm, build tools (Webpack, Vite), testing (Jest, Vitest), linting, and CI/CD integration.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

functions

Advanced function patterns including declaration styles, closures, scope chains, hoisting, and this binding. Master function composition and advanced techniques.

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results