Отличный запрос.
Дам тебе не просто "список методов", а профессиональную шпаргалку, как для разработчика уровня middle+, которая охватывает:

  • ✅ Выборку элементов
  • ✅ Навигацию по DOM
  • ✅ Работа с атрибутами и свойствами
  • ✅ Создание и вставку узлов
  • ✅ Управление классами и стилями
  • ✅ События
  • ✅ Работа с формами
  • ✅ Размеры, положение элементов
  • ✅ Манипуляции структурой документа
  • ✅ Разницу между property / attribute
  • ✅ Частые ошибки и best practices

Ты сможешь по этой шпаргалке уверенно отвечать на собеседованиях и писать чистый JS без фреймворков.

📒 Шпаргалка по DOM API (на чистом JS)

📦 1. Выбор элементов

document.getElementById('id'); document.getElementsByClassName('class'); document.getElementsByTagName('div');  document.querySelector('.class');            // первый элемент document.querySelectorAll('.class');         // NodeList (псевдомассив)  document.forms[0];                           // первая форма document.links;                              // все <a> с href

📦 2. Навигация по DOM-дереву

element.parentElement;       // родительский элемент element.children;            // дочерние элементы (HTMLCollection) element.firstElementChild; element.lastElementChild;  element.previousElementSibling; // предыдущий сосед element.nextElementSibling;     // следующий сосед

📦 3. Атрибуты и свойства

element.hasAttribute('name'); element.getAttribute('name'); element.setAttribute('name', 'value'); element.removeAttribute('name');  // Разница: свойство &mdash; это то, что есть в объекте JS element.id;                  // свойство element.getAttribute('id');  // атрибут (как в HTML)
💡 Важно: свойство всегда актуально, атрибут — как записано в разметке.

📦 4. Классы и стили

element.classList.add('my-class'); element.classList.remove('my-class'); element.classList.toggle('my-class'); element.classList.contains('my-class');  element.style.color = 'red'; element.style.backgroundColor = 'blue';
✅ Лучше управлять классами через classList, а не через className.

📦 5. Создание и вставка элементов

const div = document.createElement('div'); div.textContent = 'Hello';  parent.appendChild(div);            // внутрь в конец parent.insertBefore(div, sibling);  // внутрь перед sibling parent.prepend(div);                // внутрь в начало element.before(newElement);         // перед элементом element.after(newElement);          // после элемента element.remove();                   // удалить элемент

📦 6. Работа с событиями

element.addEventListener('click', function(event) {    console.log('Clicked', event.target); });  element.removeEventListener('click', handler);  event.preventDefault();  // отменить поведение по умолчанию event.stopPropagation(); // остановить всплытие события

Делегирование событий

parent.addEventListener('click', function(event) {    if (event.target.matches('.button-class')) {        console.log('Button clicked!');    } });

📦 7. Работа с формами и полями

const input = document.querySelector('input[name="title"]'); console.log(input.value);  const formData = new FormData(form); const title = formData.get('title');  form.reset();  // очистить форму

📦 8. Размеры и положение элементов

element.clientWidth;    // ширина без скроллов element.clientHeight;  element.offsetWidth;    // ширина включая padding + border element.offsetHeight;  element.scrollTop;      // сколько прокручено по вертикали  element.getBoundingClientRect();  // координаты и размеры

📦 9. Манипуляция структурой документа

document.createDocumentFragment();  // для массовой вставки узлов element.cloneNode(true);           // глубокое копирование element.innerHTML = '<b>Hello</b>'; element.textContent = 'Hello';     // безопаснее innerHTML
⚠️ innerHTML небезопасен, если вставляешь пользовательские данные → XSS

📦 10. Утилиты

Проверить, есть ли класс:

if (element.classList.contains('active')) { ... }

Найти ближайшего родителя по селектору:

element.closest('.parent-class');

Преобразовать NodeList в массив:

const elements = Array.from(document.querySelectorAll('div'));

🧩 Бонус: Разница между live и static коллекциями

const liveCollection = document.getElementsByClassName('item'); // live const staticNodeList = document.querySelectorAll('.item');      // static
  • getElementsByClassName возвращает "живую" коллекцию: изменения DOM сразу отражаются.
  • querySelectorAll — статический снимок на момент вызова.

🎯 Если тебя спросят на собеседовании:

Как отвечать
document.querySelector('.class') или getElementsByClassName
element.addEventListener('click', handler)
element.textContent = '...'
event.preventDefault()
element.classList.add('class')
parent.appendChild(element)

🚀 Практика для закрепления

Хочешь — могу дать тебе практическую мини-задачу на закрепление: Например, собрать интерактивную форму на чистом JS (ввод данных, валидация, отправка fetch-запросом, вывод ответа).

Или усложнить: сделать делегирование событий или динамическое создание списка задач.

Что выберешь? 🔥