В этом разделе рассматривается объектная модель документа JavaScript, Document Object Model (DOM) и показано, как эффективно манипулировать элементами DOM.
Раздел 1. Начало работы
- Понимание — объектной модели документа в JavaScript
Раздел 2. Выбор элементов
- getElementById() — выбор элементов по идентификатору.
- getElementsByName() — выбор элементов по имени.
- getElementsByTagName() — выбор элементов по имени тега.
- getElementsByClassName() — выбор элементов по одному или нескольким именам классов.
- querySelector() — выбор элементов с помощью селекторов CSS.
Раздел 4. Манипулирование элементами
- createElement() — создать новый элемент.
- appendChild() — добавляет узел в список дочерних узлов указанного родительского узла.
- textContent — получение и установка текстового содержимого узла.
- innerHTML — получить и установить HTML-содержимое элемента.
- innerHTML и createElement — объясните разницу между innerHTML и createElement при создании новых элементов.
- DocumentFragment — узнайте, как составлять узлы DOM и вставлять их в активное дерево DOM.
- after() — вставить узел после элемента.
- append() — вставить узел после последнего дочернего узла родительского узла.
- prepend() — вставить узел перед первым дочерним узлом родительского узла.
- insertAdjacentHTML() — анализирует текст как HTML и вставляет полученные узлы в документ в указанную позицию.
- replaceChild() — заменить дочерний элемент новым элементом.
- cloneNode() — клонирует элемент и всех его потомков.
- removeChild() — удалить дочерние элементы узла.
- insertBefore() — вставляет новый узел перед существующим узлом как дочерний узел указанного родительского узла.
- Вспомогательная функция insertAfter() — вставляет новый узел после существующего узла в качестве дочернего узла указанного родительского узла.
Раздел 5. Работа с атрибутами
- Атрибуты HTML и свойства объекта DOM — понимание взаимосвязи между атрибутами HTML и свойствами объекта DOM.
- setAttribute() — устанавливает значение указанного атрибута элемента.
- getAttribute() — получить значение атрибута элемента.
- removeAttribute() — удалить атрибут из указанного элемента.
- hasAttribute() — проверяет, имеет ли элемент указанный атрибут или нет.
Раздел 6. Управление стилями элементов
- Свойство style — получение или установка встроенных стилей элемента.
- getComputedStyle() — возвращает вычисленный стиль элемента.
- Свойство className — возвращает список классов CSS, разделенных пробелами.
- Свойство classList — управление CSS-классами элемента.
- Ширина и высота элемента — получение ширины и высоты элемента.
Раздел 7. Работа с событиями
- События JavaScript — познакомьтесь с событиями JavaScript, моделями событий и способами обработки событий.
- Обработка событий — рассмотрите три способа обработки событий в JavaScript.
- События загрузки страницы — узнайте о событиях загрузки и выгрузки страницы.
- Событие загрузки — этапы обработки события загрузки, возникающего из элементов документа, изображения и скрипта.
- DOMContentLoaded — узнайте, как правильно использовать событие DOMContentLoaded.
- событие beforeunload — как отобразить диалоговое окно подтверждения перед тем, как пользователи покинут страницу.
- Событие unload — как обрабатывать событие unload, которое возникает, когда страница полностью выгружена.
- События мыши — как обрабатывать события мыши.
- События клавиатуры — как работать с событиями клавиатуры.
- События прокрутки — как эффективно обрабатывать события прокрутки.
- scrollIntoView — узнайте, как прокрутить элемент в поле зрения.
- Фокусные события — рассмотрите фокусные события.
- Событие haschange — узнайте, как обрабатывать событие при изменении хеша URL.
- Делегирование событий — это метод использования всплывающей подсказки событий для обработки событий на более высоком уровне в DOM, чем элемент, в котором возникло событие.
- dispatchEvent — узнайте, как генерировать событие из кода и вызывать его.
- Пользовательские события — определите пользовательское событие JavaScript и прикрепите его к элементу.
- MutationObserver — отслеживает изменения DOM и вызывает обратный вызов при возникновении изменений.
Раздел 8. Написание скриптов веб-форм
- Форма JavaScript — узнайте, как обрабатывать событие отправки формы и выполнять простую проверку веб-формы.
- Радиокнопка (Radio Button) — как написать JavaScript для радиокнопок.
- Checkbox — узнайте, как управлять чекбоксами в JavaScript.
- Поле выбора — узнайте, как работать с полем выбора и его параметрами в JavaScript.
- Добавить/удалить параметры — как динамически добавлять и удалять параметры в поле выбора.
- Удаление элементов из элемента <select> по условию — как удалить элементы из элемента <select> по условию.
- Обработка событий изменения — узнайте, как обрабатывать события изменения входного текста, переключателя, флажка и выбранных элементов.
- Обработка события ввода — обработка события ввода при изменении значения элемента ввода.