1 of 18

Объектная модель браузера. �Использование объектов HTML и объектной модели документа

2 of 18

Понятие DOM и BOM

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером, чтобы работать со всем, кроме документа.

3 of 18

Объекты BOM

4 of 18

Объект Window

Объект Window представляет собой открытое окно браузера.
Данный объект является корневым и все свойства, методы, функции и даже переменные являются его свойствами и методами.

5 of 18

Свойства объекта Window

6 of 18

Методы объекта Window

7 of 18

Объект Navigator

Объект Navigator содержит информацию о браузере пользователя.
Методы объекта Navigator:

8 of 18

Свойства объекта Navigator

9 of 18

Объект Document

С помощью данного объекта можно добавлять, изменять и удалять HTML элементы на странице из скриптов.

10 of 18

Свойства объекта Document

11 of 18

Методы объекта Document

12 of 18

DOM-дерево

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом.
Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

13 of 18

Пример DOM

14 of 18

Пример DOM

DOM – это представление HTML-документа в виде дерева тегов. Вот как оно выглядит:

15 of 18

Навигация по DOM-элементам

Все операции с DOM начинаются с объекта document. Из него можно получить доступ к любому узлу.

16 of 18

documentElement и body

Самые верхние элементы дерева доступны как свойства объекта document:

<html> = document.documentElement

Самый верхний узел документа: document.documentElement. В DOM он соответствует тегу <html>.

<body> = document.body

Другой часто используемый DOM-узел – узел тега <body>: document.body.

<head> = document.head

Тег <head> доступен как document.head.

17 of 18

Дети: childNodes, firstChild, lastChild

Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например, <head> и <body> являются детьми элемента <html>.
Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.

18 of 18

Пример

Детьми тега <body> являются теги <div> и <ul>.

Потомки <body>– это и прямые дети <div>, <ul> и вложенные в них: <li> (потомок <ul>) и <b> (потомок <li>) – в общем, все элементы поддерева.