Document Object Model

1. Document Object Model

2. Document Object Model

Document Object Model, сокращённо DOM – объектная модель
документа, которая представляет все содержимое страницы в
виде объектов, которые можно менять.
Объект document – основная «входная точка». С его помощью
мы можем что-то создавать или менять на странице.

3. HTML-элементы как JS-объекты

4. Поиск элементов

5. Порядок загрузки

6. Порядок загрузки - onload

7. Навигация по DOM-дереву

8. Редактирование DOM-дерева

9. Практическая работа

1. Добавьте на страницу тег p, найдите и сохраните его в
переменную в js-коде, а затем напечатайте при помощи
console.log(). При помощи консоли браузера, изучите
содержимое элемента.
2. Повторите пример со слайда «Редактирование DOMдерева». Кроме того, добавьте id и классы для новых
элементов, а также измените фоновый цвет body.
3. При помощи js создайте и добавьте на страницу новую
картинку (img) и подпись к ней (span или p). Не забудьте
указать для картинки атрибут src и, при необходимости,
width и height.