Почему современные JavaScript-фреймворки препятствуют прямому взаимодействию с DOM

@HDJEMAI дал ссылку на эту статью, которую я повторю, так как это хороший совет: https://www.reddit.com/r/javascript/comments/6btma7/whats_so_wrong_with_direct_dom_manipulation/

Я подробно остановлюсь на некоторых из этих причин ниже:

• Современные фреймворки, такие как Angular и React, спроектированы так, чтобы скрыть DOM, потому что они хотят абстрагировать DOM. Используя DOM напрямую, вы нарушаете абстракцию и делаете свой код уязвимым для изменений, внесенных во фреймворк.

• Есть много причин абстрагироваться от DOM, и ссылка на страницу Reddit в основном сосредоточена на «управлении состоянием», потому что ваша структура (Angular, React и т. д.), Скорее всего, будет делать предположения о состоянии DOM, которое будет нарушено, если вы напрямую манипулируете DOM, например:

  function this_is_your_code() {
  
      tell_angular_to_make_my_sidebar_500px_wide();
  
      document.getElementById('mysidebar').style.width = 700px;
  
      var sidebar_width = ask_angular_for_sidebar_width();
      console.info( sidebar_width ); // will print "500px"
  }
  

• Другая причина абстрагироваться от DOM - убедиться, что ваш код работает с нетрадиционными DOM, помимо типичной среды DOM document / window веб-браузера, например, "серверный Angular" - это то, где часть кода Angular выполняется на сервере для предварительный рендеринг HTML для отправки клиенту, чтобы минимизировать задержку запуска приложения или разрешить веб-браузерам без JavaScript получать доступ к вашим веб-страницам, в этих ситуациях обычная модель W3C DOM больше не доступна, но доступна «поддельная» модель DOM, но она предоставляется Angular - и он работает только через абстракции Angular - он не будет работать, если вы напрямую манипулируете document, например:

  function this_is_your_code_that_runs_in_nodejs() {
  
      tell_angular_to_make_my_sidebar_500px_wide(); // this works and Angular's built-in abstraction of the DOM makes the appropriate change to the rendered server-side HTML
  
      document.getElementById('mysidebar').style.width = 500px; // fails because `document` is not available
  }
  

Действительно хороший ответ от @Dai выше, я хотел бы добавить к этому. В большинстве случаев вам не следует напрямую манипулировать dom. Бывают случаи, когда нужно, и это правильно.

Например, в React и Vue есть концепция ref. Это может быть похоже на идентификатор и дает вам доступ к узлу dom. Предположим, вы создаете приложение чата, в котором вы получаете старые чаты, когда пользователь прокручивает вверх, и вам нужно держать в фокусе последний видимый чат.

Такие ситуации есть, и нам нужен доступ к dom. Хорошая практика - держать такой код инкапсулированным и использовать каркасный способ доступа к чему-либо вместо обращения к документу / dom.