JavaScript DOM Cheatsheet

Selecting elements

document.querySelector('.card');
document.querySelectorAll('[data-role="tab"]');
element.closest('.card');
element.matches('.is-active');

Creating and inserting

const item = document.createElement('li');
item.textContent = 'New item';
list.append(item);

Events

button.addEventListener('click', (event) => {
  event.preventDefault();
  console.log(event.currentTarget);
});

Use event delegation for lists that change frequently.