Реалізуйте функцію, яка виконає callback для всіх елементів певної гілки DOM-дерева.

Повне пояснення

Що це і навіщо

Рекурсивний обход DOM‑дерева потрібен, коли треба виконати дію над усіма елементами певної гілки (наприклад, оновити атрибути, збирати дані).

Принцип роботи / алгоритм

1. Викликати callback для поточного вузла.
2. Перебрати childNodes і рекурсивно застосувати ту ж функцію.
3. Завершити, коли досягнуто листа (node.childNodes.length===0).

Реалізація (JS)

function traverseDOM(node, cb){
  if(!node) return;
  cb(node);
  node.childNodes.forEach(child=>traverseDOM(child, cb));
}

Тестування

test('traverseDOM visits all nodes', () => {
  const div = document.createElement('div');
  div.innerHTML = '<span>1</span><p>2</p>';
  const visited = [];
  traverseDOM(div, n=>visited.push(n.tagName));
  expect(visited).toEqual(['DIV','SPAN','P']);
});

Проблеми та edge cases

1. Текстові вузли – node.nodeType===3; callback може їх ігнорувати.
2. Циклічні структури – DOM не має циклів, але при маніпуляціях треба уникати рекурсивного додавання себе.
3. Велика глибина – перевищення стеку; можна замінити на ітеративний стек.
4. Селектори – якщо потрібен лише елементи, перевіряти node.nodeType===1.
5. Скорочення – використання for...of замість forEach для кращої продуктивності.

Оптимізація та продуктивність

• Використовувати for...of замість Array.prototype.forEach, бо перетворює NodeList у масив.
• Якщо callback не змінює дерево, можна кешувати childNodes перед рекурсією.

Без JS / архітектурні альтернативи

Для простих задач можна застосувати CSS‑селектор querySelectorAll('*') і обробити результати через for...of. Якщо потрібна реактивність, можна використати MutationObserver.

Cheatsheet + follow-up

• Cheatsheet: node.childNodes → усі вузли, node.children → лише елементи.
• Interview: Як уникнути перевищення стеку при глибокому DOM? – використати ітеративний стек або Tail‑call оптимізацію (не підтримується в браузерах).