JavaScript и объектная модель Javascript


Оглавление (нажмите, чтобы открыть):

Работа с DOM-моделью

Каждый объект Window имеет свойство document, ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.

Обзор модели DOM

— это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.

Прежде всего, следует понимать, что вложенные элементы HTML или XML-документов представлены в виде дерева объектов DOM. Древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и

, и узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

DOM-представление этого документа приводится на следующей диаграмме:

Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно узнать, что терминология для их описания была заимствована у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу. Узлы, находящиеся на том же уровне и имеющие того же родителя, называются сестринскими. Узлы, расположенные на любое число уровней ниже другого узла, являются его потомками. Родительские, прародительские и любые другие узлы, расположенные выше данного узла, являются его предками.

Каждый прямоугольник на этой диаграмме является узлом документа, который представлен объектом Node. Обратите внимание, что на рисунке изображено три различных типа узлов. Корнем дерева является узел Document, который представляет документ целиком. Узлы, представляющие HTML-элементы, являются узлами типа Element, а узлы, представляющие текст, — узлами типа Text. Document, Element и Text — это подклассы класса Node. Document и Element являются двумя самыми важными классами в модели DOM.

Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:

На этой диаграмме следует также отметить наличие большого количества подтипов класса HTMLElement, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов. Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML.

Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

по значению атрибута id;

по значению атрибута name;

по имени класса или классов CSS;

по совпадению с определенным селектором CSS.

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

Выбор элементов по значению атрибута id

Все HTML-элементы имеют атрибуты >getElementById() объекта Document:

Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам id этих элементов и используйте возможность их поиска по этим значениям.

В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.

Выбор элементов по значению атрибута name

HTML-атрибут name первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту id, атрибут name присваивает имя элементу. Однако, в отличие от id, значение атрибута name не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от id, атрибут name допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы и .

Выбрать HTML-элементы, опираясь на значения их атрибутов name, можно с помощью метода getElementsByName() объекта Document:

Метод getElementsByName() определяется не классом Document, а классом HTMLDocument, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект NodeList, который ведет себя, как доступный только для чтения массив объектов Element.

В IE метод getElementsByName() возвращает также элементы, значения атрибутов id которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями браузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов name и id.

Выбор элементов по типу

Метод getElementsByTagName() объекта Document позволяет выбрать все HTML или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты Element всех элементов в документе, можно следующим образом:

Подобно методу getElementsByName(), getElementsByTagName() возвращает объект NodeList. Элементы документа включаются в массив NodeList в том же порядке, в каком они следуют в документе, т.е. первый элемент


в документе можно выбрать так:

Имена HTML-тегов не чувствительны к регистру символов, и когда getElementsByTagName() применяется к HTML-документу, он выполняет сравнение с именем тега без учета регистра символов. Переменная spans, созданная выше, например, будет включать также все элементы , которые записаны как .

Можно получить NodeList, содержащий все элементы документа, если передать методу getElementsByTagName() шаблонный символ «*».

Кроме того, классом Element также определяет метод getElementsByTagName(). Он действует точно так же, как и версия метода в классе Document, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы внутри первого элемента

можно следующим образом:

По историческим причинам класс HTMLDocument определяет специальные свойства для доступа к узлам определенных типов. Свойства images, forms и links, например, ссылаются на объекты, которые ведут себя как массивы, доступные только для чтения, содержащие элементы , и (но только те теги , которые имеют атрибут href). Эти свойства ссылаются на объекты HTMLCollection, которые во многом похожи на объекты NodeList, но дополнительно могут индексироваться значениями атрибутов id и name.

Объект HTMLDocument также определяет свойства-синонимы embeds и plugins, являющиеся коллекциями HTMLCollection элементов . Свойство anchors является нестандартным, но с его помощью можно получить доступ к элементам , имеющим атрибут name, но не имеющим атрибут href. Свойство scripts определено стандартом HTML5 и является коллекцией HTMLCollection элементов

Работа с браузером и BOM

Browser Object Model и объект window

Большое значение в JavaScript имеет работа с веб-браузером и теми объектами, которые он предоставляет. Например, использование объектов браузера позволяет манипулировать элементами html, которые имеются на странице, или взаимодействовать с пользователем.

Все объекты, через которые JavaScript взаимодействует с браузером, описываются таким понятием как Browser Object Model (Объектная Модель Браузера).

Browser Object Model можно представить в виде следующей схемы:

В вершине находится главный объект — объект window , который представляет собой браузер. Этот объект в свою очередь включает ряд других объектов, в частности, объект document , который представляет отдельную веб-страницу, отображаемую в браузере.

Объект window

Объект window представляет собой окно веб-браузера, в котором размещаются веб-страницы. window является глобальным объектом, поэтому при доступе к его свойствам и методам необязательно использовать его имя. Например, window имеет метод alert() , который отображает окно сообщения. Но нам необязательно писать:

window можно не использовать:

Но так как данный объект глобальный, то это накладывает некоторые ограничения. Например:

Все объявляемые в программе глобальные переменные или функции автоматически добавляются к объекту window . И поскольку название новой функции будет совпадать с названием метода alert() , то произойдет переопределение этого метода в объекте window новой функцией.

И если мы объявим в программе какую-нибудь глобальную переменную, то она нам доступна как свойство в объекте window:

JavaScript Window-объектная модель обозревателя

Объектная модель обозревателя (BOM) позволяет JavaScript «пообщаться» с браузером.

Объектная модель обозревателя (BOM)

Нет никаких официальных стандартов для Bрядов обжект МOdel (BOM).

Так как современные браузеры реализовали (почти) те же методы и свойства для интерактивности JavaScript, они часто называются методами и свойствами спецификации.

Объект Window

Объект Window поддерживается всеми обозревателями. Он представляет окно обозревателя.

Все глобальные объекты JavaScript, функции и переменные автоматически становятся членами объекта Window.

Мастер Йода рекомендует:  16 лучших генераторов CSS-кода для разработчиков

Глобальные переменные являются свойствами объекта Window.

Глобальные функции — это методы объекта Window.

Даже объект Document (HTML DOM) является свойством объекта Window:


Размер окна

Для определения размера окна обозревателя можно использовать два свойства.

Оба свойства возвращают размеры в пикселях:

  • Window. иннерхеигхт-внутренняя высота окна браузера (в пикселях)
  • Window. innerW >

Окно обозревателя (видовой экран обозревателя) не включает панели инструментов и полосы прокрутки.

Для Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth
  • or
  • document.body.clientHeight
  • document.body.clientWidth

Практическое решение на JavaScript (охватывающее все браузеры):

Пример

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

В примере отображается высота и ширина окна обозревателя: (не включая панели инструментов/полосы прокрутки)

JavaScript. Объектная модель, свойства, методы, события

На этой странице даны общие представления о JavaScript, как о языке программирования.

Объектная модель документа и её назначение

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

Всякий документ разделяется интерпретатором JavaScript на основные его составляющие, такие как: свойства, методы, события. Определяя каждый элемент страницы отдельным объектом с индивидуальным набором свойств.
Обратившись в реальном времени к данному объекту, можно изменить его свойства, изменив методы, события и тем самым изменить документ. Объектная модель документа создаётся и формируется по окончании полной загрузки страницы.

JavaScript свойства

Методы

Существуют методы в Java Script, позволяющие управлять свойствами объектов — open(), write() и др.
Они генерируют или меняют составляющие документа. Нажатие кнопок, закрытие и открытие окон — являются другими примерами методов.

События

В работе с javascript важным инструментом является обработка событий.
Прописав JScript код, в значение обработчика события для существующего элемента ( к примеру button), применив onClik, будет выполнено заданное действие при нажатии пользователем на кнопку.
Одним из наиболее важных инструментов работы с объектами в Jscript является обработка событий. К примеру в разметке HTML существует элемент кнопки – button, на который пользователи могут нажимать. При помощи событий мы сможем отследить и обработать нажатие пользователя на эту кнопку при помощи обработчика события нажатия onClick. В значение обработчика события вписывается JS код, который будет выполнен при нажатии пользователя на кнопку.
Событие обрабатывается только после полной загрузки элемента, для которого это событие заданно.

JavaScript и объектная модель

Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что-угодно. Как известно, всего два языка претендуют на лавры победителя в броузере. Это VBScript — подмножество Visual Basic-а и JavaScript. Вот последним мы и займёмся как наиболее универсальным.

Сами по себе изучать скриптовые языки не имеет смысла, т.к. они тесно связаны с объектной моделью броузера и, по сути дела, большая часть скриптов просто устанавливает соответствующие свойства объектов или вызывает их методы.

Что такое объектная модель?

Давным-давно, когда броузеры ещё имели номер версии равный единице, ничего подобного не было и в помине. Информация просто выводилась на дисплей по мере поступления, не подвергаясь никаким изменениям. Всё было просто, и даже глюков совместимости ещё не было :).

Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим её путь:


  1. Страничка скачивается с сайта и размещается в памяти компьютера;
  2. Производится анализ странички, в результате которого она препарируется на составляющие;
  3. Блоки, из которых состоит страничка, размещаются во временной базе данных соответственно структуре объектной модели;
  4. База данных становится доступной другим программам и, в-частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных броузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.

Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остаётся работать даже после того, как страничка показана на экране дисплея. Это даёт нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.

Структура объектной модели

Чтобы было понятно, о чём мы говорим, рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше:

  • window — объект, дающий доступ к окну броузера
  • frames — объект, дающий доступ к фреймам
    • window.
    • window.
    • .
  • document — объект, содержащий в себе всю страничку
    • all — полная коллекция всех тегов документа
    • forms — коллекция форм
    • anchors — коллекция якорей
    • appleеs — коллекция апплетов
    • embeds — коллекция внедренных объектов
    • filters — коллекция фильтров
    • images — коллекция изображений
    • links — коллекция ссылок
    • plugins — коллекция подключаемых модулей
    • scripts — коллекция блоков
    • selection — коллекция выделений
    • stylesheets — коллекция объектов с индивидуально заданными стилями
  • history — объект, дающий доступ к истории посещенных ссылок
  • navigator — объект, дающий доступ к характеристикам броузера
  • location — объект, содержащий текущий URL
  • event — объект, дающий доступ к событиям
  • screen — объект, дающий доступ к характеристикам экрана

Объектная модель Netscape Navigator-а немного отличается от вышеприведённой, но её смысл точно такой же. А использование JavaScript позволяет нам обойти различия в реализации объектных моделей.

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

Как видите, структура объектной модели достаточно сложна, но строго определена, и существует однозначный способ доступа к любому свойству или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.

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

Как любой язык программирования, JavaScript имеет определённый набор типов переменных, операторов, встроенных функций и объектов. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого. Но, как Вы понимаете, оторванный от объектной модели, он мало полезен сам по себе. А потому я просто расскажу о популярных эффектах, применяемых на страничках, попутно давая пояснения. И надеюсь, что если это Вас заинтересует, то более сложные вещи Вы уже напишете сами.

Понятие объектной модели применительно к JavaScript

Читайте также:

  1. A) Понятие о средних величинах
  2. B.I. Понятие культуры
  3. CASE-инструментарий бизнес-моделирования в нотации BPMN.
  4. CASE-инструментарий объектного моделирования и анализа
  5. CASE-инструментарий системно-объектного моделирования и анализа
  6. CASE-инструментарий системного моделирования и анализа
  7. Cтруктура электронного рынка, модели взаимодействия участников
  8. Ex 28. Образуйте прилагательные от следующих слов по модели
  9. Flash Player или запрещены сценарии JavaScript. Учтите такую возможность и предоставьте этим
  10. I. Погрешность математической модели.
  11. I. Понятие и система принципов конституционного статуса личности
  12. I. ПОНЯТИЕ И СУЩНОСТЬ РЕКЛАМЫ

Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер — это объект, который характеризуется тройкой:

Объектную модель можно представить как способ связи между страницами и браузером. Объектная модель — это представление объектов, методов, свойств и событий, которые присутствуют и происходят в программном обеспечении браузера, в виде, удобном для работы с ними кода HTML и исходного текста сценария на странице. Мы можем с ее помощью сообщать наши пожелания браузеру и далее — посетителю страницы. Браузер выполнит наши команды и соответственно изменит страницу на экране.

Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов. Классы — это описания возможных объектов. Сами объекты появляются только после загрузки документа браузером или как результат работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту, которого нет.

Существует четыре версии JavaScript.

• JavaScript 1.0. Первая версия языка, поддерживаемая Internet Explorer 3.0 и Netscape Navigator 2.0.

• JavaScript 1.1. Поддерживается Netscape Navigator 3.0 и Internet Explorer 4.0 (почти полностью).


• JavaScript 1.2. Поддерживается Netscape Navigator 4.0 и Internet Explorer 4.0 (частично).

• JavaScript 1.3. Поддерживается Netscape Navigator 4.5.

2. Описание функций в JavaScript.

JavaScript — язык для составления скриптов, встраиваемых в Web-страницы для придания им привлекательного вида. В отличие от VBScript, который поддерживается только в Internet Explorer, JavaScript поддерживается большинством популярных браузеров.

JavaScript — это не Java ! Язык Java был разработан компанией Sun Microsistems, а JavaScript – фирмой Netscape (первоначально этот продукт Netscape назывался LiveScript и только после бума Java, фирма Netscape купила у Sun лицензию и переименовало свое детище в JavaScript). Хотя синтаксис Java и JavaScript во многом схож, однако возможности и назначение языков разные. Если апплеты Java представляют собой независимые программы с широкой гаммой возможностей, встраиваемые в HTML-страницу, то скрипты JavaScript в основном нацелены на использование существующей объектной модели Web-браузера, а также позволяют расширять ее, создавая собственные объекты.

Программы на Java представляют собой байт-код, а программы на JavaScript непосредственно включаются в Web-страницу в виде исходного текста. Таким образом, Java – это язык для написания программ, а JavaScript – это язык для написания скриптов управления HTML-страницами. Для включения программ на JavaScript в HTML-страницу необходимы те же теги , что и для программ на VBScript, выглядящие примерно так:

Принцип размещения и написания JavaScript программ заключается в объектно-ориентированном подходе, с манипулированием объектами Window, Document, Form и др. через их свойства, методы и события.

В лекции основной упор будет сделан на решение ряда задач (создание анимации, управление слоями и др.).

Начиная с версии JavaScript 1.2, программы на JavaScript могут не включаться непосредственно в текст HTML-страницы, а быть оформлены в виде отдельного файла, с расширением js.

Дата добавления: 2014-12-23 ; Просмотров: 458 ; Нарушение авторских прав? ;

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

JavaScript и объектная модель документа. Ключевые объекты.

При генерации страниц в Web возникает дилемма, связанная с архитектурой «клиент-сервер». Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JS. Т.о. JS – это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Основная идея JS состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображении в процессе просмотра HTML- страницы пользователем. При этом перезагрузки страницы не происходит. На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение.

JS – объетно-ориентированный скриптовый язык программирования. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. На JS оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом легким для использования непрограммистами.

JS используется для написания прикладного ПО. Одним из ярких примеров является Mozilla Firefox, 57% исходного кода которого написано на JS. JS используется в офисных приложениях для автоматизации рутинных действий, написания макросов.

На сегодняшний день поддержку JS обеспечивают современные версии всех наиболее часто используемых браузеров: IE, Mozilla Firefox, Opera

Синтаксис языка JS во многом напоминает синтаксис Си и Java. В JS:

— все идентификаторы регистрозависимы;

— в названиях переменных можно использовать буквы, подчеркивание, символ доллара, арабские цифры;

— названия переменных не могут начинаться с цифры;

— для оформления однострочных комментариев используются //, многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */.

Для добавления JS-код на страницу, можно использовать теги .

Исполняет JS-код браузер. В него встроен интерпретатор JS.

DOM (Document Object Model – объектная модель документа) – не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML, XNL- документов, а также изменять содержимое, структуру и оформление таких документов.

Учитывая существование различных реализаций DOM в веб-браузерах, среди программистов распространена привычка проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера, и только потом использовать их. Из-за несовместимости браузеров использование DOM иногда приводит к трудностям HTML-верстки и низкой надежности страниц.

Объектная модель документа является стандартом, предложенным веб-консорциумом, и регламентирует способ представления содержимого документа (в частности веб-страницы) в виде набора объектов. Под содержимым понимается все, что может находиться на веб-странице: рисунки, ссылки, абзацы, текст и т.д. В отличие от объектной модели браузера, которая уникальна для каждого браузера, объектная модель документа является стандартом и должна поддерживаться всеми браузерами. И хотя на практике поддержка DOM реализована не в полной мере, тем не менее необходимо стремиться следовать требованиям этого стандарта как производителям браузеров, так и разработчикам веб-сайтов.

Следует заметить, что DOM может применяться не только в веб-страницах, но и в любых других документах.

DOM является развивающимся стандартом и разбит на три уровня. Первый уровень является первой версией стандарта и пока что единственной законченной. Он состоит из двух разделов: первый является ядром и определяет принципы манипуляции со структурой документа (генерация и навигация), а второй посвящен представлению в DOM элементов HTML, определяемых одноименными тегами. Второй и третий уровни описывают модель событий, дополняют таблицы стилей, проходы по структуре.

В DOM документ представляется в виде древовидной структуры, являющейся одной из наиболее употребительных структур в программировании. В модели DOM к элементу можно обратиться непосредственно по его идентификатору id.

Объект в JS – наиболее важная единица, используемая в языке программирования JS, это самый главный тип данных. Большая часть работы с объектами в JS сводится к работе со встроенными объектами, т.к. создание собственных объектов не является респектабельным ввиду того, что они смогут работать только в пределах одной единственной страницы.


JS – это язык программирования, основанный на объектах. Все объекты, доступные сценарию на языке JS, подразделяются на три группы:

— встроенные объекты исполняющей системы;

— объекты среды, в которой исполняется сценарий (т.е. либо объекты клиента, либо объекты сервера);

— пользовательские объекты, создаваемые сценарием в процессе его выполнения.

Объект в JS – это неупорядоченный набор свойств. Для доступа к свойству объекта используется синтаксис:

Основные объекты:

Array (массив) – собрание элементов данных, расположенных в определенном порядке, что-то вроде картотеки, состоящей из множества ящиков. Каждый такой «ящик» имеет имя, которое называется индексом. Обычно значения индексов начинаются с 0 и последовательно увеличиваются на единицу. Размещаются значения индексов в квадратных скобках после имени массива.

Lengthобозначает число элементов в массиве.

Prototype– функция, позволяющая назначать объекту новые свойства и методы.

23.Классификация и действие вирусов.

Взаимодействие HTML5 и JavaScript (HTML5 and JavaScript interaction)

В статье описываются особенности создания графических приложений для WEB, связанных с аффинными преобразованиями. В Web приложениях элементы интерфейса описывается в HTML файлах, а логика приложения – в коде javascript (JS).

При создании программных систем стремятся, чтобы описание данных, по возможности, было отделено от описания управляющих процедур. Это позволяет легко структурировать данные. Отделение данных от управляющих процедур обусловило создание новых языков, обеспечивающих описание данных и управление ими.

HTML (HyperText Markup Language) – язык разметки гипертекста для описания структуры Web-страницы. Основным компонентом HTML является тег (tag) – код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. HTML не является языком программирования, но для организации динамических Web-страниц в него можно включать программы на языке Javascript, в пределах тегов .

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

В HTML5 определен элемент как «растровый холст, который может быть использован для отображения 2D графики. Каждый холст имеет контекст рисования, для которого определены методы и свойства рисования. Объект canvas позволяет также получить WebGL контекст, который обеспечивает 3D графику, используя возможности библиотеки OpenGL.

Структура HTML документа

HTML (HyperText Markup Language) – язык разметки гипертекста, предназначенный для создания Web-страниц [16]. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. Основным компонентом HTML является тег (tag) – это код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. Теги имеют атрибуты, значения которых могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения. Теги представляют собой зарезервированные последовательности символов, начинающиеся с (знаком больше). Закрытие тега отличается от открытия только наличием символа ‘/‘. Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом , и мы хотим применить его к словам «Это мой текст». HTML-последовательность кодов будет выглядеть так:

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

Действие вложенных тегов объединяется. Например, если внутрь тега, создающего жирное начертание шрифта, вложен тег курсива, то в результате получится жирный курсив.

HTML- программа должна начинаться тегом и заканчиваться тегом . Суммируя вышесказанное приведем общую структуру HTML-файла :

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java. Для вставки в HTML-программу фрагмента, написанного на языке JavaScript или Viual Basic Script сценариев, используют теги .

JavaScript – это скриптовый язык программирования, код которого, выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу. Javascript – не Java, а совсем другой язык. Он похоже называется, но не более того.

Подключение и выполнение JavaScript

Можно выделить 3 способа подключения скриптов:

  1. подключение в любом месте;
  2. вынос скриптов в заголовок HEAD;
  3. внешние скрипты.

Когда браузер читает HTML-страничку, и видит

Основы JavaScript: Изучаем работу с DOM! (Часть 1)

Дата публикации: 2020-03-22


От автора: объектная модель документа, или «DOM», определяет логическую структуру документов HTML и по существу выступает в качестве интерфейса для веб-страниц. Благодаря использованию языков программирования, таких как JavaScript, мы можем получить доступ к DOM, чтобы управлять веб-сайтами и делать их интерактивными.

В этой статье мы рассмотрим объект document, дерево DOM и узлы. Мы также узнаем все о том, как получить доступ к элементам и, в целом, как происходит работа с DOM JavaScript. Давайте начнем!

Что такое DOM?

По своей сути веб-сайт должен состоять из HTML-документа index.html. Используя браузер, мы просматриваем веб-сайт, который отображает HTML-файлы и любые CSS-файлы, которые добавляют правила стиля и макета.

Браузер также создает представление этого документа, известное как объектная модель документа. Благодаря использованию DOM JavaScript может получать доступ и изменять содержимое и элементы веб-сайта.

Чтобы просмотреть DOM с помощью веб-браузера, кликните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть код». Будут открыты Инструменты разработчика:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

DOM отображается на вкладке Элементы. Вы также можете просмотреть его, выбрав вкладку «Консоль» и введя «document».

Объект document

Объект document является встроенным объектом, содержащим множество свойств и методов. Мы обращаемся к этому объекту и манипулируем им с помощью JavaScript. А манипулируя DOM, мы можем сделать веб-страницы интерактивными! Поскольку мы больше не ограничены только созданием статических сайтов со стилизованным HTML-контентом.

Теперь мы можем создавать приложения, которые обновляют данные страницы без необходимости обновления страницы, мы можем дать пользователям возможность настраивать макет страницы, мы можем создавать элементы перетаскивания, браузерные игры, часы, таймеры и сложную анимацию. Работа с DOM открывает множество возможностей!

Итак, давайте выполним нашу первую манипуляцию с DOM… Перейдите на сайт www.google.com и откройте Инструменты разработчика. Затем выберите вкладку Консоль и введите следующее:

Нажмите Enter, и вы увидите, что цвет фона теперь изменился на оранжевый. Конечно, вы не редактировали исходный код Google (!), но вы изменили способ отображения содержимого локально в вашем браузере, манипулируя объектом document.
document является объектом, свойство body которого мы выбрали для редактирования путем доступа к атрибуту style и изменения значения свойства backgroundColor на orange.

Обратите внимание, что в JavaScript мы используем способ написания имен backgroundColor, а не background-color, как в CSS. Любое свойство CSS через дефис будет записано в JavaScript в camelCase. Вы можете увидеть настройки DOM в разделе элемента body на вкладке Elements или набрав document.body в консоли.

Поскольку мы работаем в браузере напрямую с DOM, мы фактически не меняем исходный код. Если вы обновите браузер, все вернется в исходное состояние.

Дерево DOM и узлы

Во многом из-за структуры DOM, его часто называют Дерево DOM.

Дерево состоит из объектов, называемых узлами. Существует много разных типов узлов, но чаще всего вы будете работать с узлами элементов (элементы HTML), текстовыми узлами (любое текстовое содержимое) и узлами комментариев (закомментированный код). Объект document является его собственным узлом , который находится в корневом каталоге.

DOM и JavaScript

Дерево документа (Document Tree)

Когда браузер загружает страницу, он создает иерархическое отображение ее содержимого похожее на ее HTML структуру. Это результат древообразной организации узлов, каждый из которых содержит элемент, атрибут, текстовый или любой другой объект.

Узлы (Nodes)

Каждый их этих различных типов объектов имеет свои уникальные методы и свойства, а также обеспечивает взаимосвязь узлов ( Nodes ). Это общие установки методов и свойств, связанные с древообразной структурой документа. Чтобы лучше понять, как все это происходит, рассмотрим простое дерево узлов.

Каждый узел (Node) содержит свойства, отражающие эту структуру и позволяющие перемещаться по всем узлам дерева документа. Ниже показаны примеры взаимоотношений этих узлов:

  • NodeA .firstChild = NodeA1
  • NodeA .lastChild = NodeA3
  • NodeA .childNodes.length = 3
  • NodeA .childNodes[0] = NodeA1
  • NodeA .childNodes[1] = NodeA2
  • NodeA .childNodes[2] = NodeA3
  • NodeA1 .parentNode = NodeA
  • NodeA1 .nextSibling = NodeA2
  • NodeA3 .previousSibling = NodeA2
  • NodeA3 .nextSibling = null
  • NodeA .lastChild.firstChild = NodeA3a
  • NodeA3b .parentNode.parentNode = NodeA

Типы узлов (Node Types)

В Объектной Модели Документа определены несколько типов узлов, но в разметке web-страницы в основном используются element и text .

Узел Element соответствует отдельному тэгу или паре тэгов в HTML коде. У него могут быть дочерние узлы (child node), которые могут быть элементами или текстовыми узлами.


Узел Text представляет обычный текст, или набор символов. У него предполагается наличие родительского узла (parent node), могут быть соседние узлы от того же родительского (sibling), но не может быть дочерних узлов (child node).

Методы узлов

  • node.insertBefore(newNode,oldNode) — Добавляет newNode в качестве дочернего по отношению к узлу node и размещает его перед уже существующим узлом oldNode.
  • node.removeChild(oldNode) — Удаляет из узла node его дочерний узел oldNode. Пример удаления последнего (lastChild) узла внутри узла sample1:
  • node.appendChild(newNode) — Добавляет newNode в качестве дочернего по отношению к узлу node и делает его последним дочерним узлом.
  • newNode = node.cloneNode(bool) — Создает newNode, как копию узла node. Если bool=true, newNode будет содержать также все дочерние узлы оригинального node.
  • node.replaceChild(newNode, oldNode) — Заменяет дочерний узел oldNode узла node на новый newNode.
  • node.normalize() — Вызов этого метода «подчищает» дерево узлов, собирая соседние текстовые узлы в единый текстовый узел и удаляя пустые.
  • node.getElementsByTagName(tagname) . — Находит все дочерние по отношению к node элементы с тегом, указанным в tagname и возвращает их в виде массива объектов. Для примера, сделать все ссылки на странице красными можно таким образом:
  • node.getElementsByName(‘name’) — Находит все элементы с аттрибутом name, значение которого указано в name и возвращает их в виде массива объектов.
  • node.getAttribute() — получить значение атрибута элемента
  • node.setAttribute() — установить значение атрибута элемента. Альтернативное обращение

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

  • node.nodeType — Возвращает константу, которая соответствует типу данного узла node (1 = элемент, 2 = атрибут, 3 = текст. ).
  • node.nodeName — Возвращает имя узла node в зависимости от его типа.
  • node.nodeValue — Возвращает или устанавливает значение узла node в зависимости от его типа (в случае с текстовым узлом возвращает непрерывное текстовое содержимое узла). Пример:
  • node.lastChild — возвращает последний дочерний элемент для , т.е. тэг .
  • node.firstChild — возвращает первый дочерний элемент внутри .
  • node.tagName — возвращает название тэга, в данном случае «p» .
  • document.documentElement — возвращает тэг .

Корень Документа (Document Root)

Объект document является основанием дерева документа. Он обслуживается тем же интерфейсом, что и узел ( Node ). У него есть дочерние узлы (child nodes), но отсутствуют родительский узел (parent node) и узлы одного с ним уровня, так как он начальный узел. В добавление к существующему Node-интерфейсу, он содержит Document-интерфейс.

Этот интерфейс содержит методы доступа к другим узлам и создания новых узлов в дереве документа. Вот некоторые из них:

  • document.getElementById() . Для работы с ним необходимо добавить атрибут id тэгу , тогда появляется возможность обращаться к элементу напрямую:
  • document.createElement() — создает html-элемент указанного типа (тега)

Сперва здесь создаем два новых элемента: тэги

и . Затем элементу параграфа (P) добавляем новый текстовый узел со строкой «Этот новый параграф с «. Таким же образом добавляем «полужирным» элементу B. Затем добавляем этот элемент B (включая его дочерний текстовый узел) к параграфу. И следующий текстовый узел со строкой » текстом, добавлен в DIV» также добавляем к параграфу.

В данном случае элемент параграфа содержит три дочерних узла: текстовый узел (text node); узел элемента для тэга ; еще один текстовый узел. У элемента B только один текстовый узел. Завершающий этап — добавление вновь созданного параграфа существующему на странице тэгу

Перемещение по Дереву Документа

Формально, объект document имеет только один дочерний элемент (child element) устанавливаемый как document.documentElement . Для web-страниц он установлен тэгом , который является корневым элементом дерева документа. У него есть дочерние элементы, установленные тэгами и , у которых в свою очередь, есть другие дочерние элементы.

Учитывая это и используя методы интерфейса Node можно перемещаться по дереву документа и обращаться к любому узлу этого дерева. Рассмотрим пример:

  • previousSibling — Возвращает узел, находящийся непосредственно перед узлом node.
  • nextSibling — Возвращает узел, находящийся непосредственно после узла node.
  • childNodes — Возвращает список, который содержит все дочерние узлы узла node. Первый и последний дочерний узел можно найти с помощью node.firstChild и node.lastChild, которые возвращают объект.
  • parentNode — Возвращает родительский узел узла node в качестве объекта.

Атрибуты узлов

Атрибуты можно добавлять и изменять getAttribute() и setAttribute() .

Атрибуты можно удалять из узла элемента, используя метод removeAttribute() или removeAttributeNode() , а также заменяя element.attributeName пустой строкой («»).

Изменение атрибутов — один из вариантов создания динамических эффектов. Например можно легко изменить выравнивание текста по правому или левому краю:

className и HTMLfor — Некоторые названия атрибутов HTML-элементов состоят из зарезервированных слов. Поэтому вместо class следует использовать className и HTMLfor вместо for.

Атрибуты стилей

Большинство атрибутов для HTML тэгов примитивны, они могут определять значение свойства только конкретному тэгу. Применение стилей более интересно. Как известно, CSS может быть использовано для применения параметров стилей к одному тэгу, всем однотипным тэгам или назначено с помощью классов ( class ). Более того, некоторые элементы наследуют стили вышестоящих элементов.

Вы можете добавлять стили элементам. Для примера, можно изменить атрибут style или class HTML тэгу. Но этот метод добавит элементу все параметры стилей. Часто приходится только какой-нибудь один или несколько параметр стиля убрать или изменить, не трогая остальные.

Атрибут style узла элемента определен как объект со свойствами для всех возможных параметров стилей. Можно получить доступ и изменить каждый отдельный параметр стиля как угодно. Следующий пример похож на предыдущий:

Здесь какой-то текст.

Но в этом случае выравнивание текста определено параметрами стилей вместо атрибута align . Вот фрагмент кода:

Здесь следует обратить внимание на то, что названия свойств в CSS пишутся через дефис «-» (text-align), тогда как название свойства style здесь будет написано textAlign , т.е. убираем дефис и следующую за ним букву делаем прописной.

А кроме этого, если параметры стилей изначально не были присвоены элементу, им все-равно можно устанавливать значения используя DOM. Например, в коде выше атрибут style= тэга «p» можно было вообще не указывать.

Мастер Йода рекомендует:  MMS эксплоит для Windows mobile телефонов
Добавить комментарий