IGS

IGS
Вернуться к Курс

Базовый курс JavaScript

0% Завершено
0/25 Шагов
  1. 1) console.log(), Переменные
  2. 2) Типы данных, Операторы
  3. 3) Условные конструкции
  4. 4) Объекты, массивы
  5. 5) Циклы
  6. 6) Функции. Диалоговые окна
  7. 7) Результат функции. Стрелочная фукция
  8. 8) callback, find, filter
  9. 9) Введение в методы и свойства
  10. 10) Методы строк и чисел
  11. 11) Методы массивов
  12. 12) Работа с DOM
  13. 13) Элементы,HTMLCollection и NodeList
  14. 14) Создание, добавление, замена и удаление элементов. Управление атрибутами элементов. Свойство className
  15. 15) addEventListener()
  16. 16) window, event
  17. 17) Работа с формами
  18. 18) Таймеры. this
  19. JSON
  20. 19) Обработка ошибок
  21. 20) JSON, Promise, async и await
  22. 21) callBack()
  23. 22) fetch
  24. 7) Взаимодействие с DOM (Document Object Model)
  25. 23) LocalStorage, sessionStorage
Базовый курс JavaScript 14) Создание, добавление, замена и удаление элементов. Управление атрибутами элементов. Свойство className
В прогрессе
Урок 14 из 25
В прогрессе

14) Создание, добавление, замена и удаление элементов. Управление атрибутами элементов. Свойство className

Создание элемента

DOM-узел можно создать двумя методами:

document.createElement(tag)

Создаёт новый элемент с заданным тегом:

				
					let div = document.createElement('div');

document.createTextNode(text)

Создаёт новый текстовый узел с заданным текстом:

				
					let textNode = document.createTextNode('А вот и я');

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в document.body.

Для этого есть метод append, в нашем случае: document.body.append(div).

 

Вот методы для различных вариантов вставки:

  • node.append(...nodes or strings) – добавляет узлы или строки в конец node,
  • node.prepend(...nodes or strings) – вставляет узлы или строки в начало node,
  • node.before(...nodes or strings) –- вставляет узлы или строки до node,
  • node.after(...nodes or strings) –- вставляет узлы или строки после node,
  • node.replaceWith(...nodes or strings) –- заменяет node заданными узлами или строками.

Удаление узлов

Для удаления узла есть методы node.remove().

Управление атрибутами элементов

Для управления атрибутами элементов JavaScript предоставляет ряд методов:

  • getAttribute(attr): возвращает значение атрибута attr

  • createAttribute(attr): создает атрибут attr

  • setAttribute(attr, value): устанавливает для атрибута attr значение value. Если атрибута нет, то он добавляется

  • removeAttribute(attr): удаляет атрибут attr и его значение

Свойство classList

Выше было рассмотрено, как добавлять классы к элементу, однако для управления множеством классов гораздо удобнее использовать свойство classList. Это свойство представляет объект, реализующий следующие методы:

  • add(className): добавляет класс className

  • remove(className): удаляет класс className

  • toggle(className): переключает у элемента класс на className. Если класса нет, то он добавляется, если есть, то удаляется