◆PROlab Academy

DOM Basics

DOM-дерево, поиск элементов, навигация и изменение страницы

Этап 5 из 8 · Начальный уровень

8 тем

  1. 01

    Браузерное окружение

    Понять разницу между языком JavaScript (ECMAScript) и API браузера (DOM, fetch, localStorage), и какие объекты доступны в браузере.

  2. 02

    DOM-дерево

    Понять, как браузер превращает HTML-код в дерево узлов (DOM tree), и чем DOM отличается от исходного HTML.

  3. 03

    Навигация по DOM

    Научиться находить элементы через querySelector, getElementById, а также перемещаться по дереву: parent, children, siblings.

  4. 04

    Свойства узлов

    Научиться читать и изменять содержимое элементов: textContent, innerHTML, outerHTML, и понимать разницу между ними.

  5. 05

    Атрибуты и свойства

    Понять разницу между HTML-атрибутами (в исходном HTML) и DOM-свойствами (в объекте элемента), особенно для value, checked, disabled.

  6. 06

    Манипуляция DOM

    Научиться создавать, добавлять, вставлять и удалять элементы: createElement, append, prepend, before, after, remove.

  7. 07

    Стили и классы

    Научиться управлять внешним видом элементов через classList (добавление/удаление классов) и style (инлайновые стили), понимая, когда что использовать.

  8. 08

    Загрузка документа

    Понять, когда HTML-код готов для JavaScript: разбор HTML, defer, type="module", DOMContentLoaded, и почему порядок загрузки имеет значение.