Примеры использования объектной модели в PHP. DOM


Содержание

Работа с 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 элементов

JavaScript — Объектная модель документа (DOM)

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

Что такое объектная модель документа (DOM)?

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

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

Структура HTML кода

Но перед тем как перейти к изучению объектной модели документа необходимо вспомнить что из себя представляет исходный код веб-страницы (HTML документа).

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

Дерево DOM

Браузер, получая код HTML из интернета, сначала строит дерево узлов (объектов) в своей памяти. А уже потом на основе этого дерева «рисует» картинку этой страницы в своём окне или вкладке.

Илон Маск рекомендует:  Что такое код asp accessnoremoteexecute

Связи между узлами (объектами, элементами) определяются на основе того что каждый элемент в HTML документе вложен в какой-то другой элемент. Элемент, который содержит другие элементы, по отношению к ним является родителем. У любого элемента в HTML коде есть свой родитель и притом только один. Если элемент содержит другие элементы, то для него они являются дочерними (детьми, прямыми потомками). Один элемент может содержать сколько угодно много дочерних элементов. Если все элементы HTML кода «выстроить» в зависимости от их отношения друг к другу, то у нас в результате получится дерево. Строится это дерево браузером сверху вниз.

В самом верху этого дерева находится узел document . Данный узел имеет один дочерний узел html , который образован элементом html ( . ). Узлы head ( . ) и body ( .

Основы 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 является его собственным узлом , который находится в корневом каталоге.

Объекты и классы в PHP

Объектная модель PHP5

Кроме нового названия для конструкторов и появления деструкторов в PHP5 произошло еще достаточно много изменений. Мы не будем обсуждать их подробно, только опишем в общих чертах. Основное изменение – это передача значений параметров класса по ссылке и присвоение объектов по ссылке, а не по значению, как это было в PHP4 . В PHP5 если создаются две равные переменные типа объект , то они указывают на одно значение и изменяются одновременно (мы приводили похожий пример с переменными строкового типа ). В связи с этим появился новый механизм для создания копий объектов – так называемое клонирование . В PHP4 все методы и переменные класса доступны извне, т.е. они всегда являются открытыми. В PHP5 переменные и методы можно делать открытыми (доступными отовсюду), закрытыми (доступными только внутри класса ) и защищенными (доступными внутри класса и в его производных классах ). Кроме того, появилась возможность создавать интерфейсы и абстрактные классы и многое другое. В целом объектная модель в PHP5 значительно усовершенствована для более точного соответствия объектно-ориентированной парадигме программирования .

Решение задачи

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

Теперь напишем файл для обработки этих форм. В нем создадим два класса – статьи и личности. У каждого класса имеется метод для инициализации его переменных и метод для отображения объектов данного класса . При решении задачи будут использованы две функции, встроенные в PHP для работы с классами и объектами . Это функция get_class (объект), возвращающая имя класса , экземпляром которого является объект , переданный ей в качестве параметра. И функция get_class_vars (имя класса ), которая возвращает массив всех свойств класса и их значений по умолчанию. Аналогично можно получить массив имен всех методов класса : get_class_methods (имя класса )

Заключение

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

Основы DOM

(Document Object Model)

Наиболее широко применяемы XML-расширением на сегодняшний день является DOM и simpleXML, оба из них были добавлены в 5 версии PHP. Кроме данных XML-расширений также применяются XML (XML-парсер) и DOMXML, однако эти технологии считаются устаревшими.

Работа с DOM осуществляется в объектно-ориентированном стиле. Для начала работы с ним нужно создать объект domDocument. На практике это выглядит примерно так:

$dom_xml = new DomDocument;

При создании нового объекта domDocument вызывается конструктор DOMDocument=>__construct, имеющий два необязательных аргумента, которые указывают на версию документа и его кодировку

_ _construct ([string version [, string encoding]])

После создания нового объекта domDocument необходимо загрузить данные. Осуществляется это при помощи методов DOMDocument->load() и DOMDocuтeпt->loadXML() , в первом случае данные загружаются из файла, а во втором из строки. На практике это выглядит примерно так:

//Загрузка данных из файла с явным указанием экземпляра класса:

$dom_xml = new DomDocument;
$dom_xml->load(‘file.xml‘);

//Загрузка данных из файла без явного указания экземпляра класса:

$dom_xml=DomDocument:: load(‘file.xml’);

//Загрузка данных из строки с явным указанием экземпляра класса:

$dom_xml = new DomDocument;
$dom_xml->loadXML(‘ volvo ‘);

//Загрузка данных из строки без явного указания экземпляра класса:

$dom_xml = DomDocument::lоаdХМL(‘ volvo ‘);

Если загрузка данных прошла успешно, то будет возвращено TRUE, если нет, то FALSE

После того как данные загружены чаще всего осуществляется разбор их. Осуществить это можно при помощи метода DomDocument->getElementsByTagName(). Этот метод возвращает коллекцию объектов DOMNode.

$dom_xml= new DomDocument();
$dom_xml->loadXML(‘ volvo Lada ‘);
//записываем название модели в переменную

Foreach ($mod as $element) <
echo $element->nodeValue.» «.$element->nodeName.» «.’
‘;
>
?>

volvo model
Lada model

Основные свойства объекта DOMNode

nodeValue Возвращает значения узлов childNodes Возвращает дочерние узлы для текущего узла firstChild Возвращает верхний (первый) дочерний узел lastChild Возвращает последний дочерний узел

Основные методы объекта DOMNode

removeChild() hasChildNodes() Осуществляет проверку на дочерние узлы appendChild() Добавляет элемент replaceChild() Замещает узел hasAttributes() Проверка атрибутов

Примеры работы с DOM можно увидеть на следующих страницах:

Введение

На этой странице

Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) — что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.

Что такое Объектная Модель Документа (DOM)?

Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.

Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.

Стандарты W3C DOM и WHATWG DOM формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.

Например: стандарт DOM описывает, что метод getElementsByTagName в коде, указанном ниже, должен возращать список всех элементов

Илон Маск рекомендует:  dialog в HTML

Все свойства, методы и события, доступные для управления и создания новых страниц, организованы в виде объектов. Например, объект document , который представляет сам документ, объект table , который реализует специальный интерфейс DOM HTMLTableElement, необходимый для доступа к HTML-таблицам, и так далее. Данная документация даёт справку об объектах DOM, реализованных Gecko-подобных браузерах.

DOM и JavaScript

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

Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:

API (веб либо XML страница) = DOM + JS (язык описания скриптов)

DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:

Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью JavaScript technologies overview.

Каким образом доступен DOM?

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


При создании сценария с использованием элемента

Примеры использования объектной модели в PHP. DOM

PHP DOM (Document Object Model) Parser is very good at dealing with XML and HTML. It travels based on tree-structure and loads the data into DOM object. The first thing you need to do is to construct a dom document object and then load the html content in it.

Concept of DOM

Everything in a DOM Document is a node. The DOMDocument is a hierarchical tree structure of nodes. It starts with a root node. The root node can have child nodes and child nodes can have child nodes on their own. For example, there is a root element (HTML) with two children (HEAD and BODY).

It has two nodes — A DOMElement with a DOMText child.

It has three nodes — the DOMElement with a DOMAttr holding a DOMText.

There are two important functions that can be used to extract contents from the html structure:

1. Get Elements by Tag Name

The function getElementsByTagName returns an array of objects that contains all the elements with a given tag name. This function is useful when you want to read the content, or attribute of multiple HTML elements that have the same tag.

Example: For Getting Tables

The saveHTML function gets the exact html inside that particular node. To get the total number of elements, you can use the length attribute.

Example: For Getting Links

There are four things — tag name, attribute name, attribute value, and enclosed tag content.

1. To get the text values of the node (enclosed tag content):

2. To check if the href attribute exists:

3. To get the href attribute value:

4. To change the href attribute value:

5. To remove the href attribute and its value:

2. Get Element by >It returns an object that contains the element with a given id, or NULL if the element is not found. This function is useful when you want to read the content, or attribute value of a HTML element with a specified id.

3. DOMXPath in PHP

The DOMXpath class is part of PHP DOM extension. The XPath uses path expressions to select nodes.

Syntax for XPath Query

  • / Selects from the root node
  • // Selects nodes in the document from the current node that match the selection no matter where they are
  • . Selects the current node
  • .. Selects the parent of the current node
  • @ Selects attributes

Parse h1 tag text

Parse h3 and h4 tag text

Parse meta description

Parse meta keywords

Parse Elements with class Name

Справочник JavaScript: объекты, DOM, BOM

Справочник объектов JavaScript

Справочник содержит описание всех свойств и методов стандартных встроенных объектов JavaScript.

Объектная модель документа

Объектная модель документа (Document Object Model, DOM) – это интерфейс программирования приложений (Application Programming Interface, API) для XML, который был расширен также для работы с HTML.

В DOM всё содержимое страницы (элементы и текст) представляется как иерархия узлов. Рассмотрим следующий код:

Этот код можно изобразить с помощью DOM как иерархию узлов:

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

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

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

Справочник по DOM содержит описание объектов Document, Element, Event и NodeList, включая описание их методов и свойств:

Справочник BOM

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

BOM-объекты обеспечивают доступ к функционалу браузера независимо от контента веб-страницы. Тема BOM интересна и одновременно сложна, потому что из-за длительного отсутствия спецификации производители браузеров свободно расширяли BOM по своему усмотрению. Многие элементы, схожие в разных браузерах, стали стандартами де-факто, которые соблюдаются и по сей день из соображений взаимной совместимости. Чтобы стандартизировать эти фундаментальные аспекты JavaScript, консорциум W3C определил основные BOM-элементы в спецификации HTML5.

Справочник содержит описание всех свойств и методов каждого из объектов:

DOM (объектная модель документа)

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

Введение :
Объектная модель документа (DOM) — это интерфейс программирования для документов HTML и XML (расширяемый язык разметки). Он определяет логическую структуру документов и способ доступа к документу и манипулирования им.

Примечание . Он называется логической структурой, потому что DOM не определяет отношения между объектами.

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

Структура DOM :

DOM можно рассматривать как дерево или лес (более одного дерева). Термин модель структуры иногда используется для описания древовидного представления документа. Одним из важных свойств структурных моделей DOM является структурный изоморфизм : если любые две реализации DOM используются для создания представления одного и того же документа, они будут создавать одинаковую структурную модель с точно такими же объектами и отношениями.

Почему называется объектной моделью?

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

Свойства DOM :

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

  1. Window Object: Window Object всегда находится на вершине иерархии.
  2. Объект документа: когда документ HTML загружается в окно, он становится объектом документа.
  3. Объект формы: он представлен тегами формы .
  4. Объекты ссылок: он представлен тегами ссылок .
  5. Якорные объекты: это представлено тегами href .
  6. Элементы управления формой: Форма может иметь множество элементов управления, таких как текстовые поля, кнопки, переключатели и флажки и т. Д.

Методы объекта документа :

  1. write («строка»): записывает данную строку в документ.
  2. getElementById (): возвращает элемент, имеющий заданное значение id.
  3. getElementsByName (): возвращает все элементы, имеющие заданное значение имени.
  4. getElementsByTagName (): возвращает все элементы, имеющие заданное имя тега.
  5. getElementsByClassName (): возвращает все элементы, имеющие заданное имя класса.


Пример :

code-sidebar-button generate-url-and-run-button «> ссылка
brightness_4
код

Чем DOM не является ?

  1. Объектная модель документа не является двоичным описанием, где она не определяет никакого двоичного исходного кода в своих интерфейсах.
  2. Объектная модель документа не используется для описания объектов в XML или HTML, тогда как DOM описывает документы XML и HTML как объекты.
  3. Объектная модель документа не представлена набором структур данных ; это интерфейс, который определяет представление объекта.
  4. Объектная модель документа не показывает критичность объектов в документах, т. Е. Не имеет информации о том, какой объект в документе соответствует контексту, а какой нет.

Уровни DOM :

  1. Уровень 0: обеспечивает низкоуровневый набор интерфейсов.
  2. Уровень 1: Уровень DOM 1 можно описать в двух частях: CORE и HTML .
    • CORE предоставляет низкоуровневые интерфейсы, которые можно использовать для представления любого структурированного документа.
    • HTML предоставляет высокоуровневые интерфейсы, которые можно использовать для представления документа HTML.
  3. Уровень 2: состоит из шести спецификаций: CORE2,Views,СОБЫТИЕ,СТИЛЬ,траверсы и RANGE.
    • CORE2 : расширяет функциональность CORE, указанную уровнем DOM 1.
    • ПРОСМОТРЫ : представления позволяют программам динамически обращаться к содержимому документа и манипулировать им.
    • СОБЫТИЯ : События — это сценарии, которые либо выполняются браузером, когда пользователь реагирует на веб-страницу.
    • STYLE : позволяет программам динамически получать доступ и управлять содержимым таблиц стилей.
    • TRAVERSAL : позволяет программам динамически перемещаться по документу.
    • RANGE : позволяет программам динамически идентифицировать диапазон содержимого в документе.
  4. Уровень 3: состоит из пяти различных спецификаций: Core3,загрузки и сохранения,валидация,события и XPATH.
    • CORE3 : расширяет функциональность CORE, заданную уровнем 2 DOM.
    • LOAD и SAVE : позволяет программе динамически загружать содержимое документа XML в документ DOM и сохранять документ DOM в документ XML путем сериализации.
    • VALIDATION : позволяет программе динамически обновлять содержимое и структуру документа, в то же время гарантируя, что документ остается действительным.
    • СОБЫТИЯ : расширяет функциональность событий, указанных в DOM Level 2.
    • XPATH : XPATH — это язык путей, который можно использовать для доступа к дереву DOM.
Илон Маск рекомендует:  Fscanf форматный ввод из файла

Использование HTML DOM (Document Object Model) в скриптах на базе Windows Script Host

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

Данная статья будет полезна скриптописателям на базе Windows Script Host, а также начинающим веб-мастерам (ведь в клиентском JavaScript вовсю используется DOM) и программистам самых различных направлений (если ваша среда разработки в состоянии выступить в роли OLE-клиента, вы всегда можете использовать DOM). Все примеры кода в настоящей статье приводятся на языке VBScript для административных сценариев Windows Script Host. Для понимания изложенного материала желательно немного знать основы HTML и VBScript.

Что такое DOM

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

Объектная модель документов представляет документ в виде дерева. Структура такого дерева полностью описывает весь HTML-документ, представляя каждый тег и его текстовое содержимое в виде узла дерева. В этом дереве определены отношения «родительский», «дочерний» и «родственный», позволяющие обойти всё дерево, т.е. весь HTML-документ. С помощью DOM можно манипулировать деревом документа любым требуемым образом, создавая новые узлы, удаляя существующие узлы и перемещая узлы в рамках дерева. Это эквивалентно добавлению новых, удалению и перемещению существующих тегов HTML и их текстового наполнения.

Имея дело с современными браузерами, вы можете быть уверены в полной поддержке DOM. Мы будем рассматривать DOM с позиций скриптописательства на базе Windows Script Host, поэтому нам в первую очередь интересен COM-объект «InternetExplorer.Application», который доступен через механизм OLE Automation. Этот объект предоставляет функциональность всего браузера, включая меню, панели инструментов, строку состояния и прочее, и находится в библиотеке «Microsoft Internet Controls» (shdocvw.dll в каталоге system32).

Структура DOM представляет собой иерархию объектов, похожую на объектую иерархию JavaScript или любого другого объектно-ориентированного языка. DOM предлагает свой полезный API, не привязанный к какому-либо конкретному языку программирования. Конечно же, в этой статье нет исчерпывающего перечня всех свойств и методов DOM. Полную информацию по этому вопросу вы можете почерпнуть на веб-узле Microsoft в библиотеке MSDN.

Создадим примерный HTML-документ, которым затем будем пользоваться в наших примерах скриптов:

Сохраните этот HTML-документ в файле C:\Temp\test.html

Все дальнейшие примеры в этой статье будут использовать этот HTML-документ, загружая его в объект браузера примерно такой строкой кода:

Это ни в коем случае не означает, что вы можете работать только с локальными HTML-файлами. Вместо локального пути всегда можно использовать URL, наподобие такого:

Программные точки входа в DOM

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

Существует несколько «точек входа» в DOM через различные программные объекты.

Самая простая «точка входа» в DOM состоит в использовании свойства «all» объекта документа «InternetExplorer.Application»:

Не используйте вышеприведённый способ в клиентском JavaScript на веб-страницах, т.к. это может работать не во всех браузерах.

Способ, почти аналогичный предыдущему:

Оба вышеприведённых способа получают необходимый узел дерева с помощью его id. Конечно, это требует, чтобы уникальный идентификатор элементу был присвоен.

Ещё одна «точка входа» — получение списка всех узлов дерева с указанным именем тега:

Ещё одна «точка входа» — получение списка всех узлов дерева с указанным атрибутом name или id:

И наконец, можно обходить документ, начиная с его корня:

Свойства и атрибуты узла дерева DOM

Объект узла дерева предоставляет несколько свойств (nodeName, nodeValue, tagName, nodeType), смысл которых понятен из их имён:

Значение указанного атрибута узла проще всего получить методом getAttribute:

Можно воспользоваться методом getAttributeNode, получив специальный объект атрибута:

Для получения информации обо всех атрибутах узла можно воспользоваться коллекцией attributes:

Для навигации по родственным узлам можно воспользоваться свойствами узла дерева nextSibling и previousSibling:

Вышеприведённый пример получает узел с идентификатором «text» (в нашем примере — это тег абзаца), а затем получает предыдущий родственный узел до тех пор, пока это возможно (пока свойство previousSibling не вернёт пустой объект). Точно так же пример осуществляет навигацию и в противоположную сторону: пока свойство nextSibling не вернёт пустой объект.

Для навигации по дочерним узлам можно воспользоваться свойством childNodes, которое представляет из себя коллекцию дочерних узлов:

Вышеприведённый пример получает узел с идентификатором «text» (в нашем примере — это тег абзаца), затем с помощью метода hasChildNodes проверяет, есть ли у этого узла дочерние узлы, и, если есть, перебирает их.

Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему узлу:

C помощью коллекции childNodes несложно рекурсивно обойти весь документ от его корня:

И наконец, для перехода к родительскому узлу дерева можно воспользоваться его свойством parentNode:

Модификация дерева DOM

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

Вышеприведённый пример удаляет тег абзаца («p») из тела («body») документа и после этого делает окно Internet Explorer видимым. Если вы обновите страницу в этом окне, абзац появится, т.к. файл C:\Temp\test.html будет перезагружен (а наш скрипт этот файл не изменяет). Впрочем, мы всегда можем записать изменённый HTML-документ, к примеру, в другой файл:

Метод removeAttribute позволяет удалить указанный атрибут узла:

Вышеприведённый пример удаляет атрибут «border» у таблицы в HTML-документе, и таблица отображается без обрамления.

Примечание: свойства и методы, описываемые в настоящем разделе, могут не работать одинаково «гладко» во всех браузерах. Например, при динамическом удалении атрибута в каком-то браузере на экране может ничего не измениться. В данной статье нас интересует DOM сам по себе, но не веб-мастеринг c клиентским JavaScript как таковой. Поэтому имейте в виду, что не все приводимые здесь способы модификации дерева DOM пригодны для буквального использования при вёрстке сайтов.

Создание нового элемента дерева DOM выглядит несколько сложнее, чем все предыдущие примеры:

В вышеприведённом примере происходит следующее, по шагам:

  • с помощью метода createElement создаётся объект абзаца, пока что никак не привязанный к дереву документа;
  • с помощью метода setAttribute для свежесозданного абзаца устанавливается атрибут «align» со значением «right»;
  • с помощью метода createTextNode создаётся объект текстового содержимого, пока что тоже ни к чему не привязанный;
  • с помощью метода appendChild объект текстового содержимого добавляется в конец списка дочерних узлов абзаца, созданного ранее;
  • и наконец, с помощью метода appendChild объект абзаца добавляется в конец списка дочерних узлов тела документа (узел «body»).

Таким образом, новые узлы дерева DOM создаются вначале как отдельные объекты, и только затем включаются в дерево тем или иным способом.

Метод appendChild всегда добавляет новый объект в конец списка дочерних узлов, и это, конечно, не единственный способ добавить новый узел в дерево. Метод insertBefore позволяет указать дочерний узел, перед которым должен быть вставлен новый узел. В качестве первого аргумента метода передаётся сам новый узел, а во втором аргументе передаётся узел, перед которым должна произойти вставка:

В вышеприведённом примере вставка нового абзаца происходит перед первым дочерним элементом тела документа («body»).

Ещё один метод — replaceChild — работает аналогично методу insertBefore, но не вставляет новый элемент перед указанным, а заменяет указанный элемент на новый. Для демонстрации вы можете просто заменить в предыдущем примере «insertBefore» на «replaceChild».

И наконец, метод cloneNode позволяет скопировать узел:

В вышеприведённом примере в конец тела документа («body») добавляется копия существующего абзаца с идентификатором «text». Метод cloneNode принимает необязательный булев параметр, который указывает, что необходимо рекурсивно скопировать всех потомков данного узла (если параметр опущен или равен False, потомки не скопируются). Как правило, копировать необходимо именно рекурсивно, т.к. например, собственно текстовое содержимое абзаца является его дочерним узлом, и не будет скопировано, если это не указано явно.

Людоговский Александр, 15.06.2008г.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL