js vanilla cookbook

// JSON
const data = await (await fetch('/my-url')).json();

// Post
await fetch('/my-url', { method: 'POST', body: data });

// Request
try {
const resp = await fetch('/my-url');
// ...
} catch (e) {
// ...
}

// Fade In
el.animate({ opacity: 1 }, 400);

// Fade Out
el.animate({ opacity: 0 }, 400);

// Hide
el.hidden = true;

// Show
el.hidden = false;

// After
target.after(el);

// Append
target.append(el);

// Before
target.before(el);

// Each
for (const el of document.querySelectorAll(selector)) {
// ...
}

// Empty
el.replaceChildren(); // or el.textContent = '', depending on which you find clearer

// Filter
[...document.querySelectorAll(selector)].filter(filterFn);

// Get Height
el.clientHeight;

// Get Width
el.clientWidth;

// Matches
el.matches('.my-class');

// Remove
el.remove();

// Delegate
document.addEventListener(eventName, e => {
const match = e.target.closest(elementSelector);
if (match) {
  handler.call(match, e);
}
});

// Trigger Custom
el.dispatchEvent(new CustomEvent('my-event', { detail: { some: 'data' } }));

// Trigger Native
el.dispatchEvent(new Event('change'));

// Extend
Object.assign({}, objA, objB);

// Parse HTML
(new DOMParser()).parseFromString(htmlString);

// Type
obj[Symbol.toStringTag];