DOM Manipulation

// Single element (first match)
document.querySelector('.card');           // CSS selector
document.getElementById('main');           // by id
document.querySelector('#main');           // equivalent

// Multiple elements (static NodeList/HTMLCollection)
document.querySelectorAll('ul > li');      // NodeList (static snapshot)
document.getElementsByClassName('item');   // HTMLCollection (live)
document.getElementsByTagName('div');      // HTMLCollection (live)
document.getElementsByName('email');       // NodeList (live)

// Scoped to element
el.querySelector('.child');
el.querySelectorAll('[data-role]');

// Closest ancestor matching selector
el.closest('.modal');       // walks up the DOM
el.matches('.active');      // boolean — does el match?
el.contains(other);         // boolean — is other a descendant?

// Convert NodeList / HTMLCollection to array
const items = [...document.querySelectorAll('li')];
// or
Array.from(document.getElementsByTagName('li'));

const div = document.createElement('div');
div.className = 'card';
div.textContent = 'Hello';

// Append (end of parent)
parent.append(div);           // accepts Node or string
parent.appendChild(div);      // Node only; returns node

// Prepend (start of parent)
parent.prepend(div);

// Before / after a sibling
ref.before(div);
ref.after(div);

// Replace
ref.replaceWith(div);
parent.replaceChild(div, ref);

// Insert adjacent (string positions)
el.insertAdjacentElement('beforebegin', div); // before el
el.insertAdjacentElement('afterbegin', div);  // first child of el
el.insertAdjacentElement('beforeend', div);   // last child of el
el.insertAdjacentElement('afterend', div);    // after el

el.insertAdjacentHTML('beforeend', '<p>Raw HTML</p>'); // parsed as HTML
el.insertAdjacentText('beforeend', 'Safe text');        // XSS-safe

el.remove();                        // remove self (modern)
parent.removeChild(child);          // remove child
parent.replaceChildren();           // clear all children
el.innerHTML = '';                  // clear (detaches listeners — prefer replaceChildren)

const clone = el.cloneNode(true);   // true = deep clone (children included)
const shallow = el.cloneNode(false);

el.textContent;            // all text (ignores tags); safe to set
el.innerHTML;              // HTML string; setting parses HTML (XSS risk)
el.outerHTML;              // el + its HTML; setting replaces el in DOM

el.textContent = 'Safe';           // always prefer for plain text
el.innerHTML = '<b>Bold</b>';      // use with trusted content only

el.getAttribute('href');            // string or null
el.setAttribute('data-id', '42');
el.removeAttribute('hidden');
el.hasAttribute('disabled');        // boolean
el.toggleAttribute('aria-expanded'); // toggle; returns new state

// data-* attributes via dataset
el.dataset.userId;                  // reads data-user-id
el.dataset.userId = '5';            // sets data-user-id="5"
delete el.dataset.userId;

// Boolean attributes (presence = true)
el.disabled = true;
el.hidden = true;

el.classList.add('active', 'open');
el.classList.remove('hidden');
el.classList.toggle('selected');              // returns new boolean state
el.classList.toggle('selected', force);       // force=true always add
el.classList.replace('old', 'new');           // returns boolean
el.classList.contains('active');              // boolean
el.classList.item(0);                         // first class string
[...el.classList];                            // array of class strings
el.className = 'foo bar';                     // replace all (string)

// Inline styles
el.style.color = 'red';
el.style.fontSize = '1rem';       // camelCase
el.style.cssText = 'color:red; font-size:1rem;'; // bulk replace
el.style.removeProperty('color');

// Computed (includes stylesheets, inherited values)
const styles = getComputedStyle(el);
styles.getPropertyValue('font-size');  // '16px'
styles.color;

// CSS custom properties
getComputedStyle(el).getPropertyValue('--brand-color');
el.style.setProperty('--brand-color', '#f00');

// Bounding box relative to viewport
const rect = el.getBoundingClientRect();
rect.top; rect.left; rect.width; rect.height; rect.x; rect.y;

// Scroll position
window.scrollX;  window.scrollY;
el.scrollTop;    el.scrollLeft;

// Element dimensions (includes padding; excludes border/margin)
el.clientWidth;  el.clientHeight;
// Including border
el.offsetWidth;  el.offsetHeight;
// Full scrollable size
el.scrollWidth;  el.scrollHeight;
// Position relative to offsetParent
el.offsetTop;    el.offsetLeft;

// Scroll to
window.scrollTo({ top: 0, behavior: 'smooth' });
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
el.scrollIntoView(true);  // top of viewport

document.documentElement;      // <html>
document.head;                 // <head>
document.body;                 // <body>
document.title;                // page title
document.URL;                  // current URL string
document.referrer;
document.readyState;           // 'loading' | 'interactive' | 'complete'
document.hidden;               // Page Visibility API
document.visibilityState;      // 'visible' | 'hidden' | 'prerender'

window.innerWidth;  window.innerHeight;   // viewport size
window.outerWidth;  window.outerHeight;   // browser window size
window.devicePixelRatio;                  // DPR (for canvas HiDPI)

document.activeElement;        // currently focused element
document.hasFocus();
document.designMode = 'on';    // make entire page editable

// Document fragment (batch insert without reflows)
const frag = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  frag.append(li);
});
ul.append(frag);

// Template element (parsed but inert)
const tmpl = document.getElementById('my-template'); // <template>
const clone = tmpl.content.cloneNode(true);
document.body.append(clone);

// NodeIterator / TreeWalker
const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: n => n.tagName === 'P' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP }
);
while (walker.nextNode()) console.log(walker.currentNode);

el.focus({ preventScroll: true });
el.blur();
el.focusVisible;             // non-standard; use :focus-visible CSS
document.activeElement;
el.tabIndex = 0;             // make focusable
el.tabIndex = -1;            // programmatically focusable, not in tab order

const shadow = el.attachShadow({ mode: 'open' }); // or 'closed'
shadow.innerHTML = `<style>:host { display:block }</style><slot></slot>`;
shadow.querySelector('slot');
el.shadowRoot;                // null when mode:'closed'

const observer = new MutationObserver(mutations => {
  for (const m of mutations) {
    console.log(m.type, m.addedNodes, m.removedNodes, m.attributeName);
  }
});

observer.observe(target, {
  childList: true,           // child added/removed
  subtree: true,             // all descendants
  attributes: true,          // attribute changes
  attributeFilter: ['class', 'data-id'],
  attributeOldValue: true,
  characterData: true,       // text node changes
  characterDataOldValue: true,
});

observer.disconnect();
const records = observer.takeRecords(); // flush pending