> Как реализовать обработку клика на любой div внутри root и выводить в консоль только id этого div в JavaScript (JavaScript)

Для реализации обработки клика на любой div внутри root с выводом в консоль только его id можно использовать делегирование событий. Это эффективнее, чем вешать обработчик на каждый элемент отдельно.

JAVASCRIPT
document.getElementById('root').addEventListener('click', function(event) {
  // Проверяем, что кликнули именно по div
  if (event.target.tagName === 'DIV') {
    const id = event.target.id;
    if (id) {
      console.log(id);
    }
  }
});

Объяснение:

• Обработчик вешается на родительский элемент root (один раз).
• Событие всплывает от дочерних div к родителю.
• event.target указывает на конкретный элемент, по которому кликнули.
• Проверка tagName === 'DIV' гарантирует, что обрабатываются только div (а не вложенные элементы вроде span или p).
• Выводится только id, если он существует (иначе пустая строка).

Альтернативный вариант (если нужно игнорировать вложенные элементы внутри div):

JAVASCRIPT
document.getElementById('root').addEventListener('click', function(event) {
  let target = event.target;
  // Поднимаемся по дереву до тех пор, пока не найдем div внутри root
  while (target && target !== this) {
    if (target.tagName === 'DIV' && target.parentNode === this) {
      console.log(target.id);
      break;
    }
    target = target.parentNode;
  }
});

Этот вариант обрабатывает клик на любом вложенном элементе внутри div, но выводит id только прямого дочернего div от root.