Document Object Model + JavaScript

 

 

 

 

 

 

Модель web-страницы в браузере

 

При открытии веб-страницы, браузер:

  • получает исходный текст HTML

  • осуществляет его парсинг (синтаксический разбор)

  • строит модель структуры документа

  • на основе построенной модели отрисовывает страницу на экране.

Представление документа в исходном тексте (коде) HTML  можно:

  • просматривать в браузере,

  • изменять в текстовом редакторе.

Изменения удобно производить в специализированных HTML-редакторах.

 

 

 

HTML-редакторы

 

Web-страницы можно создавать в редакторах двух основных типов:

  • Текстовые редакторы: HomeSite, HotDog, FirstPage, и т.д

  • WYSIWYG-редакторы: Dreamweaver, FrontPage, Expression Web и т.д. .

В редакторах первого типа  пользователь непосредственно пишет HTML-код. Простейший пример текстового HTML редактора - Notepad (Блокнот).

В редакторах второго типа можно обойтись без знания HTML и всего того, что находится за внешней стороной Web-страницы. Вы просто создаете текст или изображение у себя на экране, и сохраняете его в формате html. Генерацию HTML-кода выполняет программа.

 

WYSIWYG (What You See Is What You Get, произносится "визивиг", "что видишь, то и получаешь") - в текстовых процессорах и настольных издательских системах - режим полного графического соответствия печатного варианта и изображения редактируемого документа на экране.

 

 

 

Document Object Model html-документа

 

 

Структура данных, использующаяся браузером называется Document Object Model (DOM, объектная модель документа).

Можно представить html-документ как набор вложенных коробок.

Например: теги <body> и </body> включают в себя другие теги, которые в свою очередь включают теги, или текст.

Для каждой коробки есть объект, с которым мы можем взаимодействовать и узнавать про него разные данные – какой тег он представляет, какие коробки и текст содержит.

 

 

 

JavaScript

 

Язык программирования JavaScript представлен в 1995 году как способ добавлять программы на веб-страницы в браузере.

JavaScript обеспечил интерактивность веб-страницам и дал возможность появиться современным веб-приложениям.

Брендан Айк (Brendan Eich) — создатель языка программирования JavaScript. 

JavaScript обычно используется как встраиваемый язык сценариев для придания интерактивности веб-страницам.

ECMAScript - документ (модель, стандарт), описывающий работу языка JavaScript.

 

 

Douglas Crockford (о JavaScript):

  • Самый неправильно понятый язык программирования  в мире стал самым популярным в мире языком программирования

Marijn Haverbeke:

  • Когда мне первый раз пришлось писать программу на JavaScript, я быстро почувствовал отвращение – язык принимал практически всё, что я писал, при этом интерпретировал это вовсе не так, как я подразумевал. 

  • JavaScript слишком либерален. Задумывалось это как облегчение программирования для начинающих. В реальности, это затрудняет розыск проблем в программе, потому что система о них не сообщает.

  • После того, как я по настоящему изучил и поработал с ним, я научился любить JavaScript.

 

 

 

 

JavaScript и DOM

 

Программы на языке  JavaScript могут:

  • изучать текущий отображаемый браузером документ

  • изменять текущий отображаемый браузером документ через . 

DOM представляет модель документа формируемого браузером, а программа JavaScript может изменять её для изменения видимого документа.

DOM организован в виде дерева, в котором элементы расположены иерархически в соответствии со структурой документа.

Доступ JavaScript (JS) к объектам DOM осуществляется через глобальную переменную document.

Свойство глобальной переменной documentElement ссылается на объект, представляющий тег и предоставляющий свойства head и body, в которых содержатся объекты для соответствующих элементов.

У объектов элементов есть свойства (например: parentNode и childNodes), которы используются для ориентирования на дереве.

Поведение документа или его отдельных элементов можно менять внедряя в модель документа программный код JavaScript.

Внешний вид документа можно изменять через стили, либо добавляя стили к узлам напрямую, либо определяя правила для каких-либо узлов.

У стилей есть очень много свойств, таких, как color или display.

JavaScript может влиять на стиль элемента напрямую через его свойство style.

 

 

 

Деревья

 

 

Структура (модель) данных html-документа может интерпретироваться в качестве синтаксического дерева: каждый узел может ссылаться на другие узлы, у каждого из ответвлений может быть своё ответвление.

Синтаксическое дерево – типичная модель вложенных структур, где элементы содержат подэлементы, похожие на них самих.

Структура данных является деревом, если:

  • она разветвляется,

  • не имеет циклов (узел не может содержать сам себя),

  • имеет единственный ярко выраженный «корень».

В случае DOM html-документа в качестве корня выступает document.documentElement.

Узлы для обычных элементов, представляющих теги HTML, определяют структуру документа.

У них могут быть дочерние узлы.

Пример такого узла — document.body.

Некоторые из этих дочерних узлов могут оказаться листьями – например, текст или комментарии (в HTML комментарии записываются между символами <!-- и -->).

У каждого узлового объекта DOM есть свойство nodeType, содержащее цифровой код, определяющий тип узла.

У обычных элементов он равен 1, что также определено в виде свойства-константы document.ELEMENT_NODE.

У текстовых узлов, представляющих отрывки текста, он равен 3 (document.TEXT_NODE).

У комментариев — 8 (document.COMMENT_NODE).

 

 

 

kmp