SlideShare a Scribd company logo
1 of 7
Download to read offline
Введение в DOM
Что такое DOM?
DOM - это W3C (Всемирный Веб Консорциум) стандарт.
DOM определяет стандартный способ доступа к документам
HTML и XML:
"Объектная Модель Документа W3C (от англ. Document Object
Model или DOM) - это интерфейс, независимый от платформы
и языка, который позволяет программам и скриптам
динамически получать доступ и изменять содержимое,
структуру и стиль документа."
<!DOCTYPE HTML>
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
Построим, для начала, дерево DOM для следующего документа.
● DOM-модель – это внутреннее представление HTML-
страницы в виде дерева.
● Все элементы страницы, включая теги, текст,
комментарии, являются узлами DOM.
● У элементов DOM есть свойства и методы, которые
позволяют изменять их.
● IE8- не генерирует пробельные узлы.
DOM нужен для того, чтобы манипулировать страницей –
читать информацию из HTML, создавать и изменять
элементы.
Узел HTML можно получить как document.documentElement, а BODY –
как document.body.
Получив узел, мы можем что-то сделать с ним.
Например, можно поменять цвет BODY и вернуть обратно:
document.body.style.backgroundColor = 'red';
alert( 'Поменяли цвет BODY' );
document.body.style.backgroundColor = '';
alert( 'Сбросили цвет BODY' );
Свойства DOM-элементов
Узлы DOM являются объектами с точки зрения javascript. А у объектов
есть свойства. Поэтому любому узлу можно назначить свойство,
используя обычный синтаксис.
var elem = document.getElementById('MyElement')
elem.mySuperProperty = 5
«Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти
Европалык Союзу тарыбынан финансылоо болгон.​
Бул документин мазмуну толугу менен IT Академиянын
жоопкерчилиги жана эч кандай жолунда Европалык Комиссиянын
көз карашын көргөзбөйт.​
​
Проект «IT тренинг для людей с ограниченными возможностями»
финансирован Европейским Союзом.​
Содержание этого документа полностью является
ответственностью IT Academy и никак не отражает взгляды
Европейской Комиссии.​
​
#programmingwithoutbarriers
#cheksizprogramming

More Related Content

Similar to Введение в DOM

lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdfmmmitioglo
 
C# Desktop. Занятие 09.
C# Desktop. Занятие 09.C# Desktop. Занятие 09.
C# Desktop. Занятие 09.Igor Shkulipa
 
HTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийHTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийVlad Savitsky
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
Google docs
Google docsGoogle docs
Google docsmitkaa20
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTMLssuser3896e2
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTMLDenis Latushkin
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЯковенко Кирилл
 
4. стандарты html
4. стандарты html4. стандарты html
4. стандарты htmlSergei Dubrov
 
DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"Roman Dvornov
 

Similar to Введение в DOM (20)

HTML
HTMLHTML
HTML
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
 
C# Desktop. Занятие 09.
C# Desktop. Занятие 09.C# Desktop. Занятие 09.
C# Desktop. Занятие 09.
 
HTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийHTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад Савицкий
 
Dhtml 1
Dhtml 1Dhtml 1
Dhtml 1
 
XML
XMLXML
XML
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Google docs
Google docsGoogle docs
Google docs
 
DHTML
DHTMLDHTML
DHTML
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
 
Html
HtmlHtml
Html
 
Outreach Project Tool
Outreach Project Tool Outreach Project Tool
Outreach Project Tool
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
 
4. стандарты html
4. стандарты html4. стандарты html
4. стандарты html
 
DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"
 
Html лаб 2
Html лаб 2Html лаб 2
Html лаб 2
 
JavaScript
JavaScriptJavaScript
JavaScript
 

More from IT Academy Project EU

JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)IT Academy Project EU
 
Препроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор WinlessПрепроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор WinlessIT Academy Project EU
 
Использование Google Fonts
Использование Google FontsИспользование Google Fonts
Использование Google FontsIT Academy Project EU
 
Создаем границы для элементов в CSS
Создаем границы для элементов в CSSСоздаем границы для элементов в CSS
Создаем границы для элементов в CSSIT Academy Project EU
 
Работа с графикой (GIMP)
Работа с графикой (GIMP)Работа с графикой (GIMP)
Работа с графикой (GIMP)IT Academy Project EU
 
3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSSIT Academy Project EU
 
3.1.5 Основные селекторы
3.1.5 Основные селекторы3.1.5 Основные селекторы
3.1.5 Основные селекторыIT Academy Project EU
 
3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифтаIT Academy Project EU
 

More from IT Academy Project EU (20)

Переменные PHP.pdf
Переменные PHP.pdfПеременные PHP.pdf
Переменные PHP.pdf
 
Js. alert, prompt, confirm
Js. alert, prompt, confirmJs. alert, prompt, confirm
Js. alert, prompt, confirm
 
JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)
 
Препроцессор SASS
Препроцессор SASSПрепроцессор SASS
Препроцессор SASS
 
Препроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор WinlessПрепроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор Winless
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Что такое framework?
Что такое framework?Что такое framework?
Что такое framework?
 
1.1.1 Text Alternatives
1.1.1 Text Alternatives1.1.1 Text Alternatives
1.1.1 Text Alternatives
 
Использование Google Fonts
Использование Google FontsИспользование Google Fonts
Использование Google Fonts
 
Создаем границы для элементов в CSS
Создаем границы для элементов в CSSСоздаем границы для элементов в CSS
Создаем границы для элементов в CSS
 
Работа с графикой (GIMP)
Работа с графикой (GIMP)Работа с графикой (GIMP)
Работа с графикой (GIMP)
 
4.5 Веб-дизайн
4.5 Веб-дизайн4.5 Веб-дизайн
4.5 Веб-дизайн
 
3.5.5 Свойства Margin
3.5.5 Свойства Margin3.5.5 Свойства Margin
3.5.5 Свойства Margin
 
3.5.4 Свойства Padding
3.5.4 Свойства Padding3.5.4 Свойства Padding
3.5.4 Свойства Padding
 
3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS
 
3.1 BASICS CSS
3.1 BASICS CSS3.1 BASICS CSS
3.1 BASICS CSS
 
CSS - Цвета
CSS - ЦветаCSS - Цвета
CSS - Цвета
 
3.1.5 Основные селекторы
3.1.5 Основные селекторы3.1.5 Основные селекторы
3.1.5 Основные селекторы
 
3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта
 
2.4.7 HTML - Формы
2.4.7 HTML - Формы2.4.7 HTML - Формы
2.4.7 HTML - Формы
 

Введение в DOM

  • 2. Что такое DOM? DOM - это W3C (Всемирный Веб Консорциум) стандарт. DOM определяет стандартный способ доступа к документам HTML и XML: "Объектная Модель Документа W3C (от англ. Document Object Model или DOM) - это интерфейс, независимый от платформы и языка, который позволяет программам и скриптам динамически получать доступ и изменять содержимое, структуру и стиль документа."
  • 3. <!DOCTYPE HTML> <html> <head> <title>О лосях</title> </head> <body> Правда о лосях </body> </html> Построим, для начала, дерево DOM для следующего документа.
  • 4. ● DOM-модель – это внутреннее представление HTML- страницы в виде дерева. ● Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM. ● У элементов DOM есть свойства и методы, которые позволяют изменять их. ● IE8- не генерирует пробельные узлы.
  • 5. DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Узел HTML можно получить как document.documentElement, а BODY – как document.body. Получив узел, мы можем что-то сделать с ним. Например, можно поменять цвет BODY и вернуть обратно: document.body.style.backgroundColor = 'red'; alert( 'Поменяли цвет BODY' ); document.body.style.backgroundColor = ''; alert( 'Сбросили цвет BODY' );
  • 6. Свойства DOM-элементов Узлы DOM являются объектами с точки зрения javascript. А у объектов есть свойства. Поэтому любому узлу можно назначить свойство, используя обычный синтаксис. var elem = document.getElementById('MyElement') elem.mySuperProperty = 5
  • 7. «Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти Европалык Союзу тарыбынан финансылоо болгон.​ Бул документин мазмуну толугу менен IT Академиянын жоопкерчилиги жана эч кандай жолунда Европалык Комиссиянын көз карашын көргөзбөйт.​ ​ Проект «IT тренинг для людей с ограниченными возможностями» финансирован Европейским Союзом.​ Содержание этого документа полностью является ответственностью IT Academy и никак не отражает взгляды Европейской Комиссии.​ ​ #programmingwithoutbarriers #cheksizprogramming