Ванильные манипуляции с DOM: руководство по методам JavaScript для прямого взаимодействия с DOM

Под «ванильным манипулированием DOM» подразумевается манипулирование объектной моделью документа (DOM) с использованием простого JavaScript без использования каких-либо внешних библиотек или платформ. Он предполагает прямое взаимодействие с элементами HTML и их свойствами для достижения желаемых эффектов или изменений на веб-странице.

Вот некоторые распространенные методы, используемые при манипулировании стандартным DOM:

  1. getElementById(): извлекает элемент из DOM по его уникальному идентификатору.
  2. getElementsByClassName(): возвращает коллекцию элементов с определенным именем класса.
  3. getElementsByTagName(): извлекает коллекцию элементов с определенным именем тега.
  4. querySelector(): возвращает первый элемент, соответствующий указанному селектору CSS.
  5. querySelectorAll(): возвращает статический NodeList, представляющий список элементов, соответствующих указанному селектору CSS.
  6. createElement(): создает новый элемент.
  7. appendChild(): добавляет дочерний элемент к родительскому элементу.
  8. removeChild(): удаляет дочерний элемент из родительского.
  9. parentNode: доступ к родительскому узлу элемента.
  10. childNodes: извлекает коллекцию дочерних узлов элемента.
  11. innerHTML: получает или задает HTML-содержимое элемента.
  12. className: Получает или задает имена классов элемента.
  13. стиль: доступ к встроенным стилям CSS элемента.
  14. addEventListener(): присоединяет обработчик событий к элементу.
  15. removeEventListener(): удаляет обработчик событий из элемента.