#dom_in_actionDOM Node у вакуумі.DOM API дозволяє нам створювати вузли, що не приєднані до документа. І поки ми їх туди не вставимо, вони просто висять у памʼяті та не впливають на рендеринг сторінки.Тому будь-який вузол може перебувати фактично у двох станах — приєднаний до живого DOM та, очевидно, відʼєднаний. І так, ми можемо саме відʼєднати елемент, не знищуючи його.Для цього навіть існують спеціальні методи: removeChild(childNode) аби прибрати з дерева дочірній вузол, та node.remove() для самоусунення. Що важливо — вузол при цьому залишається в памʼяті.На практиці це дозволяє робити складні дії над елементом, а то й цілим піддеревом, не вбиваючи швидкодію сторінки. Операції з DOM-деревом часто призводять до суттєвого навантаження на рендеринг. А так — можна зібрати в памʼяті фрагмент дерева будь-якої складності, і потім вставити в фактичний DOM за один раз, зменшивши кількість потенційних викликів reflow та repaint до мінімуму.Є й інший бік медалі. Уявімо, що у вас є елемент і два скрипти. Один, до прикладу, змінює властивості його батька, додає й прибирає дочірні елементи. А другий, припустимо, тримає постійне посилання саме на цей вузол і читає розмір та розташування елемента на сторінці.І от якщо перший скрипт для оптимізації вилучає елемент з DOM для операцій, а другий у цей час намагається прочитати його геометрію, то результат буде дещо передбачуваним. Скрипт не впаде — він має посилання на вузол, тож усе буде чудово. Просто розміри й розташування будуть часто нульові — наприклад, у getBoundingClientRect(). Халепа?Може й так, але запобігти їй можна за допомогою однієї-однісінької властивості будь-якого DOM-вузла — Node.isConnected. Цей ґеттер повідомляє нам, чи вузол зараз знаходиться в живому DOM, а чи теліпається в памʼяті.І, що особливо зручно, isConnected працює й для вкладених вузлів. Тобто це не заміна !!Element.parentElement, повноцінний сигнал — піддерево, у якому знаходиться вузол, зараз не вDOMа. І додавши перевірку на те, чи елемент приєднаний до DOM, ми можемо знати, чи варто в цей момент здійснювати обчислення.Ось тут невеличка стіна консольлогів, яка демонструє, як працює isConnected:console.group('1. Create element in memory:');const element = document.createElement('section');console.log(`element.parentNode: ${!!element.parentNode}`);console.log(`element.isConnected: ${element.isConnected}`);console.groupEnd();console.group('2. Add child:');element.innerHTML = '<div><p>Hello</p></div>';const p = element.querySelector('p');console.log(`p.parentNode: ${!!p.parentNode}`);console.log(`p.isConnected: ${p.isConnected}`);console.groupEnd();console.group('3. Append element to live DOM:');document.body.appendChild(element);console.log(`p.isConnected: ${p.isConnected}`);console.groupEnd();console.group('4. Remove p:');p.remove();console.log(`element.isConnected: ${element.isConnected}`);console.log(`p.isConnected: ${p.isConnected}`);console.groupEnd(); Ставте 🔥, якщо дізналися про isConnected лише сьогодні, і ❤️, якщо знали про це давно[email protected]. І заберіть уже ті кілька квитків на запис нової Співбесіди на сцені.