В чём разница между событиями DOMContentLoaded и load? Когда использовать каждое из них?

Использовать событие DOMContentLoaded.

document.addEventListener('DOMContentLoaded', () => {
  // Код, который будет выполнен после загрузки DOM
});

Альтернативно, можно проверить свойство document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    // Код
  });
} else {
  // DOM уже загружен
}

Событие DOMContentLoaded срабатывает после полной загрузки и парсинга HTML-документа, но до загрузки внешних ресурсов, таких как стили и изображения.

Для определения полной загрузки страницы, включая все ресурсы, используется событие load:

window.addEventListener('load', () => {
  // Код, который будет выполнен после полной загрузки страницы
});