Пример работы с объектной моделью документа DOM firstChild и lastChild

Содержание

Модель объектов XML-документов (DOM) XML Document Object Model (DOM)

Класс XML DOM является представлением XML-документа в памяти. The XML Document Object Model (DOM) class is an in-memory representation of an XML document. Модель DOM позволяет читать, обрабатывать и изменять XML-документ программным образом. The DOM allows you to programmatically read, manipulate, and modify an XML document. Класс XmlReader также читает XML, но предоставляет только последовательный доступ для чтения без поддержки кэширования. The XmlReader class also reads XML; however, it provides non-cached, forward-only, read-only access. Это значит, что XmlReader не позволит изменять значения атрибутов или содержимое элемента, а также вставлять и удалять узлы. This means that there are no capabilities to edit the values of an attribute or content of an element, or the ability to insert and remove nodes with the XmlReader. Изменение — основная функция модели DOM. Editing is the primary function of the DOM. Это стандартизованный, структурированный способ представления XML-данных в памяти, хотя на самом деле данные XML хранятся в файлах и пересылаются из других объектов в строковом виде. It is the common and structured way that XML data is represented in memory, although the actual XML data is stored in a linear fashion when in a file or coming in from another object. Далее приведен пример XML-данных. The following is XML data.

Входные данные Input

Далее показано, какая структура будет создана в памяти, когда эти XML-данные считываются в модель структуры DOM. The following illustration shows how memory is structured when this XML data is read into the DOM structure.

Структура XML-документа XML document structure

Каждый круг на этой иллюстрации представляет собой узел в структуре XML-документа, называемый объектом XmlNode. Within the XML document structure, each circle in this illustration represents a node, which is called an XmlNode object. Объект XmlNode является базовым объектом дерева DOM. The XmlNode object is the basic object in the DOM tree. Класс XmlDocument, расширяющий класс XmlNode, поддерживает методы для операций над документом в целом (например, для загрузки его в память или сохранения XML в файл). The XmlDocument class, which extends XmlNode, supports methods for performing operations on the document as a whole (for example, loading it into memory or saving the XML to a file. Кроме того, XmlDocument предоставляет возможности для просмотра узлов всего XML-документа и выполнения операций над ними. In addition, XmlDocument provides a means to view and manipulate the nodes in the entire XML document. И XmlNode, и XmlDocument обладают улучшенной производительностью, расширенной функциональностью и содержат методы и свойства, которые позволяют следующее. Both XmlNode and XmlDocument have performance and usability enhancements and have methods and properties to:

Получать доступ к DOM-специфичным узлам, например к узлам элементов, узлам ссылок на сущности и т. п., и изменять эти узлы. Access and modify nodes specific to the DOM, such as element nodes, entity reference nodes, and so on.

Получать целые узлы помимо содержащейся в них информации, например текста в узле элемента. Retrieve entire nodes, in addition to the information the node contains, such as the text in an element node.

Для приложений, которым не требуется структуризация или изменение, предоставляемые моделью DOM, классы XmlReader и XmlWriter обеспечат последовательный потоковый доступ к XML без поддержки кэширования. If an application does not require the structure or editing capabilities provided by the DOM, the XmlReader and XmlWriter classes provide non-cached, forward-only stream access to XML. Дополнительные сведения см. в разделах XmlReader и XmlWriter. For more information, see XmlReader and XmlWriter.

Объекты Node обладают набором методов и свойств, а также хорошо определенных базовых характеристик. Node objects have a set of methods and properties, as well as basic and well-defined characteristics. Вот некоторые из этих характеристик: Some of these characteristics are:

У каждого узла есть один родительский узел, то есть узел, находящийся непосредственно над данным. Nodes have a single parent node, a parent node being a node directly above them. Единственный узел, не имеющий родителя — корневой узел документа, так как это узел верхнего уровня, содержащий сам документ и его фрагменты. The only nodes that do not have a parent is the Document root, as it is the top-level node and contains the document itself and document fragments.

У большинства узлов может быть несколько дочерних узлов, то есть узлов, расположенных непосредственно под ними. Most nodes can have multiple child nodes, which are nodes directly below them. Далее следует список типов узлов, которые могут иметь дочерние узлы: The following is a list of node types that can have child nodes.

Document Document

DocumentFragment DocumentFragment

EntityReference EntityReference

Элемент Element

Attribute (XElement Dynamic Property) (Attribute (динамическое свойство XElement)) Attribute

Узлы XmlDeclaration, Notation, Entity, CDATASection, Text, Comment, ProcessingInstruction и DocumentType не могут иметь дочерних узлов. The XmlDeclaration, Notation, Entity, CDATASection, Text, Comment, ProcessingInstruction, and DocumentType nodes do not have child nodes.

Узлы, находящиеся на одном уровне наследования, например узлы book и pubinfo на нашей схеме, называются одноуровневыми. Nodes that are at the same level, represented in the diagram by the book and pubinfo nodes, are siblings.

Одна из характеристик модели DOM — способ обработки атрибутов. One characteristic of the DOM is how it handles attributes. Атрибуты не являются узлами, состоящими в родительских, дочерних и одноуровневых связях. Attributes are not nodes that are part of the parent, child, and sibling relationships. Атрибуты считаются собственностью узла элемента и представляют собой пару «имя-значение». Attributes are considered a property of the element node and are made up of a name and a value pair. Например, если XML-данные представляют собой конструкцию format=»dollar , связанную с элементом price , слово format является именем атрибута, а значением атрибута format является dollar . For example, if you have XML data consisting of format=»dollar » associated with the element price , the word format is the name, and the value of the format attribute is dollar . Чтобы получить атрибут format=»dollar» узла price, воспользуйтесь методом GetAttribute, когда курсор расположен в узле элемента price . To retrieve the format=»dollar» attribute of the price node, you call the GetAttribute method when the cursor is located at the price element node. Дополнительные сведения см. в статье Доступ к атрибутам в модели DOM. For more information, see Accessing Attributes in the DOM.

По мере считывания XML-документа в память создаются узлы. As XML is read into memory, nodes are created. Узлы бывают разных типов. However, not all nodes are the same type. Правила и синтаксис XML-элемента отличаются от правил и синтаксиса инструкции по обработке. An element in XML has different rules and syntax than a processing instruction. Поэтому по мере считывания разнообразных данных каждому узлу присваивается тип. Therefore, as various data is read, a node type is assigned to each node. Тип узла определяет его характеристики и функциональность. This node type determines the characteristics and functionality of the node.

Дополнительные сведения о типах узлов, создаваемых в памяти, см. в статье Типы XML-узлов. For more information on the types of nodes generated in memory, see Types of XML Nodes. Дополнительные сведения об объектах, создаваемых в дереве узлов, см. в статье Сопоставление объектной иерархии с XML-данными. For more information on the objects created in the node tree, see Mapping the Object Hierarchy to XML Data.

Корпорация Майкрософт расширила API-интерфейсы, доступные в DOM уровней 1 и 2 W3C, чтобы облегчить работу с XML-документами. Microsoft has extended the APIs that are available in the World Wide Web Consortium (W3C) DOM Level 1 and Level 2 to make it easier to work with an XML document. Дополнительные классы, методы и свойства полностью совместимы со стандартами W3C и добавляют дополнительную функциональность по сравнению с возможностями W3C XML DOM. While fully supporting the W3C standards, the additional classes, methods, and properties add functionality beyond what can be done using the W3C XML DOM. Новые классы позволяют получить доступ к реляционным данным, предоставляют методы синхронизации с данными ADO.NET, одновременно делая эти данные доступными в виде XML. New classes enable you to access relational data, giving you methods for synchronizing with ADO.NET data, simultaneously exposing data as XML. Дополнительные сведения см. в статье о синхронизации DataSet с XmlDataDocument. For more information, see Synchronizing a DataSet with an XmlDataDocument.

Модель DOM чрезвычайно полезна для считывания XML-данных в память, изменения их структуры, добавления и удаления узлов, изменения данных, принадлежащих узлу (например, текста, содержащегося в документе). The DOM is most useful for reading XML data into memory to change its structure, to add or remove nodes, or to modify the data held by a node as in the text contained by an element. Однако существуют и другие классы, которые в некоторых ситуациях работают быстрее модели DOM. However, other classes are available that are faster than the DOM in other scenarios. Классы XmlReader и XmlWriter предоставляют быстрый последовательный потоковый доступ к XML без поддержки кэширования. For fast, non-cached, forward-only stream access to XML, use the XmlReader and XmlWriter. Если вам нужен произвольный доступ с моделью курсора и XPath, используйте класс XPathNavigator. If you need random access with a cursor model and XPath, use the XPathNavigator class.

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 из интернета, сначала строит дерево узлов (объектов) в своей памяти. А уже потом на основе этого дерева «рисует» картинку этой страницы в своём окне или вкладке.

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

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

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

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

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

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

Рис. 1.9. Иерархия объектов web-страницы

Основным объектом для работы с DOM-моделью является глобальная переменная document, которая ссылается на объект Document, описывающий HTML-документ, отображаемый в окне браузера.

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

  • • links[ ] – массив ссылок на гипертекстовые связи, сформированные в HTML-документе с помощью элементов ;
  • • images[ ] – массив ссылок на изображения, включенные в состав web-страницы с помощью элемента ;
  • • forms[ ] – массив ссылок на формы, созданные посредством элементов .

В этих массивах ссылки на объекты Link, Image и Form содержатся в том же порядке, в котором они встречаются в исходном тексте HTML- документа. Так, images[0] ссылается на первое изображение в составе web- страницы, images[1] – на второе изображение и т. д.

Объект Form ссылается на интерактивные элементы, принадлежащие HTML-форме документа. Несмотря на то, что каждый из элементов является объектом определенного типа (например, Text, Password, Radio, Checkbox и т. д.), для их описания существует также обобщенный тип Element. Соответственно, ссылки на интерактивные элементы, принадлежащие форме, содержатся в свойстве elements объекта Form.

Например, чтобы получить строку текста (value), которую пользователь ввел в первой форме (forms[0]) с помощью 3-го элемента управления (elements[2]), можно использовать следующее выражение: line = document.forms[0].elements[2].value;

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

Для получения ссылки на требуемый объект DOM чаще всего используются методы быстрого поиска элементов HTML:

  • • document.getElementByld(id) – для поиска элементов по значению атрибута id в элементах документа;
  • • document.getElementsByTagName(tag) – возвращает коллекцию всех элементов с определенным гэгом, и среди них можно искать нужный; например, можно получить второй элемент с тэгом : document. getElementsByTagName(‘p’)[1];
  • • document.getElementsByName(name) – возвращает все элементы, у которых имена (атрибут name) равны заданному значению; работает только с элементами, у которых имеется атрибут name, например, form, input, a, select, textarea и ряд других, более редких; данный метод не будет работать с остальными элементами типа div, р и т. п.;
  • • getElementsBy >

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

Для изменения содержания элементов HTML-документа без перерисовки всей страницы нужно использовать свойство innerHTML. Обычно данное свойство используется вместе с функцией getElementByld() для получения ссылки на требуемый элемент документа:

Например, вывод сообщений в тэге можно выполнить следующим образом:

«script type=»text/javascript»> function Msg1()<

‘Попробуй получить сообщение 1 еще раз. ‘;

cinput type=»button» onclick=»Msg1()” value=”Показать сообщение 1″ />

Введенный пользователем текст можно вывести на экран в тэге с >

Передвижение по документу, свойства объекта Node-FirstChild, lastChild, previousSibling, nextSibling, parentNode, nodeName, nodeType.

Обход документа происходит сверху вниз и соблюдая иерархию узлов, исползуя:

• FirstChild свойство возвращает первый дочерний узел указанного узла, как объект Node.

Node — тип возвращаемых данных, т.е. какого типа будет полученная информация. Пример: Получить содержимое HTML первого дочернего узла элемента


    :
    var x = document.getElementById(«myList»).firstChild.innerHTML;

• Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

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

• Свойство NextSibling возвращает узел сразу же после указанного узла, в том же уровне дерева.

Пример: var x = document.getElementById(«item1»).nextSibling.innerHTML;

Возвращенный узел возвращается в виде объекта Node. Разница между этим свойством и nextElementSibling , является то, что NextSibling возвращает следующий узел в качестве родственного узла элемента, текстового узла или узла комментария, в то время как nextElementSibling возвращает следующий узел в качестве родственного узла элемента (игнорирует текст и узлы комментариев).

• Свойство ParentNode возвращает родительский узел указанного узла, как объект Node

В HTML, сам документ является родительским узлом HTML элемента, голова и тело являются дочерними узлами HTML — элемента. Это свойство только для чтения.

• Свойство NodeName возвращает имя указанного узла. (Если узел является узлом элемента, свойство NodeName вернет имя тега. Если узел является узлом атрибута, свойство NodeName возвращает имя атрибута. (Для других типов узлов, свойство NodeName будет возвращать разные имена для разных типов узлов.)

• Свойство NODETYPE возвращает тип узла, как число, указанного узла. (Если узел является узлом элемента, свойство NODETYPE возвращает 1. Если узел является узлом атрибута, свойство NODETYPE вернет 2. Если узел является текстовым узлом, свойство NODETYPE вернет 3. Если узел является комментарием узла, свойство NODETYPE вернется 8. Это свойство только для чтения.)

Примеры управления структурой документа, свойствами и элементами и атрибутами тэгов на основе объектов DOM, стилей и сценариев Java-script.

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией.

Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент, и т.п.

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

Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?

Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

Для манипуляций с DOM используется объект document.

Используя document, можно получать нужный элемент дерева и менять его содержание.

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

1 var ol = document.getElementsByTagName(‘ol’)[0]

2 var hiter = ol.removeChild(ol.firstChild)

3 var kovaren = ol.removeChild(ol.firstChild)

В старых руководствах и скриптах можно встретить модификацию HTML-кода страницы напрямую вызовом document.write.

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

Модель событий DOM, объекты Event (свойства type, target); MouseEvent (свойства button, clientX, clientY, screenX, screenY и др.)

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

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

type: указывает на имя события

target: указывает на элемент, на котором было вызвано событие
Как изменить фоновый цвет с помощью команды Target:

Интерфейс MouseEvent наследует свойства и методы интерфейсов Event и UIEvent, а также определяет следующие дополнительные свойства:

Button

Число, указывающее, какая кнопка мыши изменила свое состояние во время события mousedown, mouseup или click. Значение 0 обозначает левую кнопку, 1 – среднюю кнопку, а 2 – правую кнопку. Это свойство применяется, только когда кнопка изменяет состояние, и не применяется, например, для получения информации о том, удерживается ли нажатой кнопка во время события mouse move.

ClientX, clientY

Эти два свойства указывают координаты X и Y указателя мыши относительно клиентской области или окна браузера. Обратите внимание, что данные координаты не учитывают прокрутку документа: если событие происходит в верхнем крае окна, значение свойства clientY равно 0 независимо от того, насколько далеко был прокручен документ. К сожалению, DOM Level 2 не предоставляет стандартного способа трансляции оконных координат в координаты документа. В браузерах, не относящихся к линейке Internet Exploer, можно сложить значения window.pageXOffset и window.pageYOffset.

ScreenX, screenY

Эти два свойства задают координаты X и Y указателя мыши относительно верхнего левого края дисплея. Эти значения полезны, если вы планируете открыть новое окно в месте возникновения события мыши или рядом с ним.

Последнее изменение этой страницы: 2020-08-10; Нарушение авторского права страницы

1.10. Отображение XML-документов с использованием объектной модели XML DOM

Все современные браузеры имеют встроенные XML анализаторы ( парсеры ) для чтения и обработки XML. Анализатор считывает XML документ, размещает его в памяти и преобразует в XML DOM объект, доступный для языков программирования, например, JavaScript .

Имеются некоторые отличия между анализаторами в Microsoft и в других браузерах. Первый поддерживает как загрузку XML файлов, так и текстовых строк, содержащих XML код, в то время как в других браузерах используются раздельные анализаторы. При этом все анализаторы имеют функции для перемещения по дереву XML-документа, доступа, вставки и удаления узлов в дереве.

Объектная модель, реализованная в Internet Explorer , полностью соответствует рекомендациям REC- DOM -Level- 1 -19981001 Консорциума WWW.

Объектная модель документа, таким образом, как объектная модель, определяет:

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

— семантику (смысл) этих интерфейсов и объектов, включая поведение и атрибуты;

— «родственные» связи и взаимодействие между этими интерфейсами и объектами.

Объектная модель документа представляется узлами XE «Объектная модель документа:узел» ( node ), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы.

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

Узлы в модели DOM документа XML могут быть следующих типов (представлены в табличной форме).

Константы спецификации DOM

Константы MS XML

Ссылка на сущность

Здесь представлены наименования констант для проверки типа документа, определенные в спецификации. В реализации библиотеки MS XML фирмы Микрософт эти константы имеют несколько отличные от указанных наименования ( см . последний столбец таблицы).

Эти узлы и образуют древовидную структуру иерархического документа. Простейший документ XHTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM, будет представлен деревом, показанном на рис. 1.12.

Рис. 1. SEQ Рис. \* ARABIC 12 . Структура простейшего документа

Во главе иерархии находится элемент типа 9 (DOCU­MENT_NODE), представляющий весь документ XML. Он имеет имя # document . От него порождается узел html , хранящий корневой элемент XML-документа (элемент html >), от которого, в свою очередь, происходят узлы head и body , хранящие соответственно элементы head > и body > (все типа 1 – ELEMENT_NODE).

Для быстрого доступа к узлу корневого элемента в DOM предусмотрено свойство document Element объекта # document .

Текстовое содержимое элемента XML хранится в специальном текстовом узле (тип 3). Имя любого текстового узла всегда # text . Этот узел является подчиненным (дочерним) узлом элемента, текстовое содержимое которого он хранит.

Элемент XML может иметь несколько текстовых узлов, если его содержимое определено как смешанное – текст с элементами XML.

Например, рассмотрим следующий фрагмент документа XML:

>Э то содержимое абзаца документа HTML

В объектной модели DOM он будет представлен следующим иерархическим деревом (рис. 1.13).

Рис. 1. SEQ Рис. \* ARABIC 13 . Иерархическое дерево фрагмента документа

На рисунке в текстовых узлах также представлено их содержимое.

В DOM XML содержимое, получаемое с помощью свойства nodeValue узла, может быть только у текстовых узлов и узлов комментария (свойство nodeName равно # comment ), являющихся листьями иерархического дерева объектов документа.

Содержимое текстового узла

Содержимле секции CDATA

Ссылка на сущность

Имя ссылочной сущности

Содержимое инструкции без названия

document type name

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

На примере структуры, создаваемой вложенными списками, продемонстрируем, с помощью каких свойств объектов в модели DOM можно перемещаться по ее узлам:

li > Потомок 1 li >

li i d=»Child2″> Потомок 2 li >

li > Потомок 3 li >

В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями «родства» XE «Объектная модель документа:отношения \»родства\»« , показанной на рис. 1.14.

Рис. 1. SEQ Рис. \* ARABIC 14 . Иерархическое дерево фрагмента документа со списками

Элементы с именами Node 1 , Node 2 и Node 3 являются узлами-потомками элемента-родителя с именем parent . В семействе childNodes объекта parent хранятся ссылки на всех потомков этого элемента (Node 1 , Node 2 и Node 3 ). Для получения ссылок на первого и последнего потомка узла в объектной модели предусмотрены соответственно свойства firstChild и lastChild .

Свойство parentNode объектов-потомков возвращает ссылку родителя объектов, поэтому значением этих свойств объектов Node 1 , Node 2 и Node 3 будет ссылка на узел parent .

Объекты Node 1 , Node 2 и Node 3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью своих свойств previousSibling (предыдущий ближайший родственник) и nextSibling (следующий ближайший родственник). Если у элемента-узла нет соответствующих ближайших родственников, то эти свойства возвращают значение null .

Конечно, если все элементы HTML-документа заданы с уникальными атрибутами >DOM ). Но идентифицировать все элементы страницы дело утомительное, поэтому для перемещения по объектной модели можно использовать указанные выше свойства узлов.

Для изменения, установки или получения содержимого текстового узла (узлы остальных типов не имеют текстового содержимого) в DOM используется свойство nodeValue , тогда как в модели DHTML следует применять свойства innerHTML и innerText для любого элемента HTML:

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

Node.childNodes [0]. nodeValue = «Новое содержимое»;

Node.innerHTML = «Новое содержимое»;

Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В DOM текстовое содержимое элемента HTML может храниться в одном или нескольких узлах-потомках типа 3, непосредственно порождаемых элементом HTML. Тогда как в объектной модели DHTML достаточно использовать одно из свойств innerHTML или innerText объекта, соответствующего элементу HTML.

Для доступа к объектной модели DOM загруженной в браузер страницы HTML прежде всего необходимо иметь ссылку на корневой элемент # document . Она создается автоматически и хранится в объекте window.document . Получить в DOM ссылку на корневой объект документа, соответствующий элементу, задаваемому тегом , можно единственным способом – использовать свойство documentElement объекта document .

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

XML DOM используется для обхода XML-деревьев, доступа, вставки и удаления узлов.

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

Парсер XML считывает XML и преобразует его в объект XML DOM, чтобы он мог быть доступен с помощью JavaScript.

Пример 14. Загрузка XML- строки .

Использование XML Document Object Model

Язык XML все чаще используется для хранения информации, обмена ею между приложениями и Web-узлами. Во многих приложениях этот язык применяется в качестве базового для хранения данных, в других — для экспортирования и импортирования XML-данных. Из этого следует, что разработчикам пора задуматься над тем, как можно использовать XML-данные в собственных приложениях.

В этой статье мы рассмотрим XML Document Object Model (DOM) и ее реализацию фирмой Microsoft — Microsoft XML DOM.

XML DOM — это объектная модель, предоставляющая в распоряжение разработчика объекты для загрузки и обработки XML-файлов. Объектная модель состоит из следующих основных объектов: XMLDOMDocument, XMLDOMNodeList, XMLDOMNode, XMLDOMNamedNodeMap и XMLDOMParseError. Каждый из этих объектов (кроме XMLDOMParseError) содержит свойства и методы, позволяющие получать информацию об объекте, манипулировать значениями и структурой объекта, а также перемещаться по структуре XML-документа.

Рассмотрим основные объекты XML DOM и приведем несколько примеров их использования в Borland Delphi.

Использование XML DOM в Borland Delphi

Для того чтобы использовать Microsoft XML DOM в Delphi-приложениях, необходимо подключить к проекту соответствующую библиотеку типов. Для этого мы выполняем команду Project | Import Type Library и в диалоговой панели Import Type Library выбираем библиотеку Microsoft XML version 2.0 (Version 2.0), которая обычно находится в файле Windows\System\MSXML.DLL

После нажатия кнопки Create Unit будет создан интерфейсный модуль MSXML_TLB, который позволит нам воспользоваться объектами XML DOM: DOMDocument, XMLDocument, XMLHTTPRequest и рядом других, реализованных в библиотеке MSXML.DLL. Ссылка на модуль MSXML_TLB должна быть указана в списке Uses.

Устройство XML DOM

Document Object Model представляет XML-документ в виде древовидной структуры, состоящей из ветвей. Программные интерфейсы XML DOM позволяют приложениям перемещаться по дереву документа и манипулировать его ветвями. Каждая ветвь может иметь специфический тип (DOMNodeType), согласно которому определяются родительская и дочерние ветви. В большинстве XML-документов можно встретить ветви типа element, attribute и text. Атрибуты (attribute) представляют собой особый вид ветви и не являются дочерними ветвями. Для управления атрибутами используются специальные методы, предоставляемые объектами XML DOM.

Помимо реализации рекомендованных World Wide Web Consortium (W3C) интерфейсов, Microsoft XML DOM содержит методы, поддерживающие XSL, XSL Patterns, Namespaces и типы данных. Например, метод SelectNodes позволяет использовать синтаксис шаблонов XSL (XSL Pattern Syntax) для поиска ветвей по определенному контексту, а метод TransformNode поддерживает использование XSL для выполнения трансформаций.

Тестовый XML-документ

В качестве примера XML-документа возьмем каталог музыкальных CD-ROM, который имеет следующую структуру:

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

XML-документ — объект XMLDOMDocument

Работа с XML-документом начинается с его загрузки. Для этого мы используем метод Load, который имеет всего один параметр, указывающий URL загружаемого документа. При загрузке файлов с локального диска указывается только полное имя файла (протокол file:/// в данном случае можно опустить). Если XML-документ хранится в виде строки, для загрузки такого документа следует использовать метод LoadXML.

Для управления способом загрузки документа (синхронный или асинхронный) используется свойство Async. По умолчанию это свойство имеет значение True, указывающее на то, что документ загружается асинхронно и управление возвращается приложению еще до полной загрузки документа. В противном случае документ загружается синхронно, и тогда приходится проверять значение свойства ReadyState, чтобы узнать, загрузился документ или нет. Также можно создать обработчик события OnReadyStateChange, который получит управление при изменении значения свойства ReadyState.

Ниже показано, как загрузить XML-документ, используя метод Load:

После того как документ загружен, мы можем обратиться к его свойствам. Так, свойство NodeName будет содержать значение #document, свойство NodeTypeString — значение document, свойство URL — значение file:///C:/DATA/DATA.xml.

Обработка ошибoк

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

Чтобы написать обработчик ошибки, можно добавить следующий код:

Чтобы узнать, какая информация возвращается в случае ошибки, изменим следующий элемент каталога:

убрав закрывающий элемент во второй строке:

Теперь напишем код, возвращающий значения свойств объекта XMLDOMParseError:

и выполним наше приложение. В результате получаем следующую информацию об ошибке .

Как видно из приведенного примера, возвращаемой объектом XMLDOMParseError информации вполне достаточно для того, чтобы локализовать ошибку и понять причину ее возникновения.

Теперь восстановим закрывающий элемент в нашем документе и продолжим обсуждение XML DOM.

Доступ к дереву документа

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

Для нашего XML-документа мы получим следующий текст .

Если нас интересует какая-то специфическая ветвь или ветвь уровнем ниже первой дочерней ветви, мы можем воспользоваться либо методом NodeFromID, либо методом GetElementByTagName объекта XMLDOMDocument.

Метод NodeFromID требует указания уникального идентификатора, определенного в XML Schema или Document Type Definition (DTD), и возвращает ветвь с этим идентификатором.

Метод GetElementByTagName требует указания строки со специфическим элементом (тэгом) и возвращает все ветви с данным элементом. Ниже показано, как использовать данный метод для нахождения всех исполнителей в нашем каталоге CD-ROM:

Для нашего XML-документа мы получим следующий текст

Отметим, что метод SelectNodes объекта XMLDOMNode обеспечивает более гибкий способ для доступа к ветвям документа. Но об этом чуть ниже.

Ветвь документа — объект XMLDOMNode

Объект XMLDOMNode представляет собой ветвь документа. Мы уже сталкивались с этим объектом, когда получали корневой элемент документа:

Для получения информации о ветви XML-документа можно использовать свойства объекта XMLDOMNode (табл. 1).

Для доступа к данным, хранимым в ветви, обычно используют либо свойство NodeValue (доступно для атрибутов, текстовых ветвей, комментариев, инструкций по обработке и секций CDATA), либо свойство Text, возвращающее текстовое содержимое ветви, либо свойство NodeTypedValue. Последнее, однако, может использоваться только для ветвей с типизованными элементами.

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

Объект XMLDOMNode предоставляет множество способов для перемещения по дереву документа. Например, для доступа к родительской ветви используется свойство ParentNode (тип XMLDOMNode), доступ к дочерним ветвям осуществляется через свойства ChildNodes (тип XMLDOMNodeList), FirstChild и LastChild (тип XMLDOMNode) и т.д. Свойство OwnerDocument возвращает объект типа XMLDOMDocument, идентифицирующий сам XML-документ. Перечисленные выше свойства позволяют легко перемещаться по дереву документа.

Теперь переберем все ветви XML-документа:

Как уже отмечалось выше, SelectNodes объекта XMLDOMNode обеспечивает более гибкий способ доступа к ветвям документа. Кроме того, существует метод SelectSingleNode, возвращающий только первую ветвь документа. Оба эти метода позволяют задавать XSL-шаблоны для поиска ветвей.

Рассмотрим процесс использования метода SelectNodes для извлечения всех ветвей, у которых есть ветвь CD и подветвь PRICE:

В коллекцию Nodes будут помещены все подветви PRICE ветви CD. К обсуждению XSL-шаблонов вернемся чуть позже.

Манипуляция дочерними ветвями

Для манипуляции дочерними ветвями мы можем воспользоваться методами объекта XMLDOMNode (табл. 2).

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

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

В приведенном выше примере мы удалили не первую ветвь … , а первый элемент ветви — … .

Теперь добавим новую ветвь. Ниже приведен код, показывающий, как добавить новую запись о музыкальном CD-ROM :

Приведенный выше код показывает следующую последовательность действий по добавлению новой ветви:

  • Создание новой ветви методом CreateNode:
    • создание элемента методом CreateNode;
    • добавление элемента к ветви методом AppendChild;
    • установка значения элемента через свойство Text;
    • … повторить для всех элементов.
  • Добавление новой ветви к документу методом AppendChild.

Напомним, что метод AppendChild добавляет ветвь в конец дерева. Для того чтобы добавить ветвь в конкретное место дерева, необходимо использовать метод InsertBefore.

Трансформации

Два метода объекта XMLDOMNode — TransformNode и TransformNodeToObject — могут использоваться для трансформации ветви в строку или объект. Эти методы базируются на XSL-синтаксисе.

Набор ветвей — объект XMLDOMNodeList

Объект XMLNodeList содержит список ветвей, который может быть построен с помощью методов SelectNodes или GetElementsByTagName, а также получен из свойства ChildNodes.

Мы уже рассматривали использование этого объекта в примере, приведенном в разделе «Перемещение по дереву документа». Здесь же мы приведем некоторые теоретические замечания.

Число ветвей в списке может быть получено как значение свойства Length. Ветви имеют индексы от 0 до Length-1, и каждая отдельная ветвь доступна через элемент массива Item с соответствующим индексом.

Перемещение по списку ветвей также может осуществляться с помощью метода NextNode, возвращающего следующую ветвь в списке, или Nil, если текущая ветвь — последняя. Чтобы вернуться к началу списка, следует вызвать метод Reset.

Создание и сохранение документов

Итак, мы рассмотрели, как можно добавлять ветви и элементы в существующие XML-документы. Теперь создадим XML-документ «на лету». Прежде всего напомним, что документ может быть загружен не только из URL, но и из обычной строки. Ниже показано, как создать корневой элемент, который затем может использоваться для динамического построения остальных элементов (что мы уже рассмотрели в разделе «Манипуляция дочерними ветвями»):

После построения XML-документа сохраним его в файле с помощью метода Save. Например:

Помимо сохранения в файле метод Save позволяет сохранять XML-документ в новом объекте XMLDOMDocument. В этом случае происходит полная обработка документа и, как следствие, проверка его структуры и синтаксиса. Ниже показано, как сохранить документ в другом объекте:

В заключение отметим, что метод Save также позволяет сохранять XML-документ в другие COM-объекты, поддерживающие интерфейсы IStream, IPersistStream или IPersistStreamInit.

Использование XSL-шаблонов

Обсуждая метод SelectNodes объекта XMLDOMNode, мы упомянули о том, что он обеспечивает более гибкий способ доступа к ветвям документа. Гибкость заключается в том, что в качестве критерия для выбора ветвей можно указать XSL-шаблон. Такие шаблоны предоставляют мощный механизм для поиска информации в XML-документах. Например, для того, чтобы получить список всех названий музыкальных CD-ROM в нашем каталоге, можно выполнить следующий запрос:

Чтобы узнать, диски каких исполнителей выпущены в США, запрос формируется следующим образом:

Ниже показано, как найти первый диск в каталоге:

Чтобы найти диски Боба Дилана, можно выполнить следующий запрос:

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

Более подробное обсуждение синтаксиса XSL требует отдельной публикации. Чтобы заинтриговать читателей и подтолкнуть к дальнейшим исследованиям, приведу всего один небольшой пример возможного использования XSL. Допустим, нам необходимо преобразовать наш каталог в обычную HTML-таблицу. Пользуясь традиционными способами, мы должны перебрать все ветви дерева и для каждого полученного элемента сформировать соответствующие тэги … .

Используя XSL, мы просто создаем шаблон (или таблицу стилей), в котором указываем, что и как надо преобразовать. Затем накладываем этот шаблон на наш каталог — и готово: перед нами текст XSL-шаблона, преобразующего каталог в таблицу (листинг 2).

Код для наложения XSL-шаблона на наш каталог выглядит так:

Завершая наше обсуждение XSL, следует сказать, что в настоящее время этот язык активно используется для трансформации между различными XML-документами, а также для форматирования документов.

Заключение

По вполне понятным причинам в одной статье невозможно рассмотреть все объекты Microsoft XML DOM и привести примеры их использования. Здесь мы лишь коснулись основных вопросов использования XML DOM в приложениях. В табл. 3 показаны все объекты, реализованные в Microsoft XML DOM.

Пример работы с объектной моделью документа DOM firstChild и lastChild

9. Лекция: Отображение XML-документов с использованием сценариев объектной модели документа

В восьмой лекции вы познакомились с программной моделью Data Source Object (DSO), которая позволяет вам использовать либо связывание данных, либо сценарии для отображения XML-документа с HTML-страницы. DSO хранит данные XML как набор записей, что удобно для отображения только тех XML-документов, которые имеют симметричную структуру записей.

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

Примечание. Консорциум W3C использует термин Объектная модель документа (Document Object Model, или DOM) для обозначения более широкой объектной модели, которая обеспечивает доступ, как к HTML-элементам, так и к XML-документам. (См. спецификацию «Document Object Model (DOM) Level 1 Specification» по адресу http://www.w3.org/TR/REC-DOM-Level-1.) Однако здесь этот термин применяется к обычной модели DOM XML, поддерживаемой Internet Explorer и рассчитанной на доступ конкретно к XML-документам.

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

Ссылка. Для получения более подробной информации о DOM обратитесь к двум Web-страницам, предлагаемым Microsoft Developer Network (MSDN): «XML DOM User Guide» по адресу http://msdnmicrosoft.com/xml/xmlguide/dom-guide-overview.asp и «XML DOM Reference» по адресу http://msdn.microsoft.com/xml/reference/xmldom/start.asp.

Связывание XML-документа с HTML-страницей

Чтобы получить доступ к XML-документу с использованием DOM, вы должны связать XML-документ с HTML-страницей. Самый простой способ – сделать это через фрагмент данных. Напомним, что фрагмент данных создается через HTML-элемент с именем XML. Например, следующий элемент BODY HTML-страницы содержит фрагмент данных, который связывает XML-документ, хранящийся в файле Book.xml:

Подробнее о фрагментах данных рассказано в разделе «Шаг первый: установка связи XML-документа с HTML-страницей» в лекции 8.

Идентификатор ID, который вы назначаете фрагменту данных, указывает на DSO документа (см. лекцию 8). Вы можете использовать составляющую XMLDocument DSO для доступа к DOM, как показано в следующей строке кода сценария:

Член XMLDocument содержит корневой объект DOM, известный как узел Документ (Document node). Вы можете использовать узел Документ для доступа к другим объектам DOM.

Так, создание фрагмента данных на HTML-странице предписывает Internet Explorer создать как DSO (представленный непосредственно через ID фрагмента данных), так и DOM (доступ к которой осуществляется через член XMLDocument DSO).

Подсказка. Если вы хотите иметь доступ к нескольким XML-документам с HTML-страницы, вы можете поместить фрагмент данных для каждого из них. Кроме того, вы можете включить несколько фрагментов данных для одного XML-документа. (Последний прием может оказаться полезным для поддержки нескольких различных версий данных XML, если ваша страница модифицирует содержимое данных DOM, накопленных в памяти. В этой лекции, однако, эти приемы модификации данных DOM не рассматриваются.)

Структура DOM

В DOM программные объекты, представляющие XML-документ, называются узлами. Когда Internet Explorer обрабатывает связанный XML-документ и сохраняет его в DOM, он создает узел для каждого из основных компонентов XML-документов, таких как элементы, атрибуты и инструкции по обработке.

DOM использует различные типы узлов для представления различных типов компонентов XML. Например, элемент хранится в узле Element, а атрибут – в узле Attribute. В таблице 9.1 представлены наиболее важные типы узлов.

Таблица 9.1. Основные типы узлов, используемых для представления различных компонентов XML-документа.

Компоненты XML-документа, представляемые узлом

Имя узла (свойство nodeName объекта)

Значение узла (свойство nodeValue объекта)

Корневой узел иерархии документа (т. е. он представляет весь XML-документ)

Имя типа элемента (например, BOOK)

null (любые символьные данные, содержащиеся в элементе, находятся в одном или нескольких дочерних узлах Text)

Текст, принадлежащий элементу, атрибуту или примитиву, которые представлены родителем этого узла

Текст родительского XML-компонента

Атрибут (а также другие пары имя-значение, такие как имя и значение в инструкции по обработке)

Имя атрибута (например, Binding)

Значение атрибута (например, hardcover)

Инструкция по обработке (объявление XML или пользовательская инструкция по обработке)

Предназначение инструкции по обработке (например, xml)

Полное содержимое инструкции по обработке, за исключением предназначения (например, version=»1.0″)

Весь текст внутри ограничителей комментария

Содержимое раздела CDATA

Объявление типа документа

Имя корневого элемента, содержащееся в объявлении DOCTYPE (например, INVENTORY)

Объявление примитива в DTD

Имя примитива (например, image)

null (значение примитива содержится в дочернем узле Text)

Объявление нотации в DTD

Имя нотации (например, BMP)

null (системный литерал нотации содержится в дочернем узле Attribute с именем SYSTEM)

Вы можете получить каждое из имен узлов (они приведены в третьем столбце) из свойства узла nodeName. Имена, начинающиеся с символа #, представляют компоненты XML, не поименованные в документе. (Например, комментарий в XML-документе не обладает именем. В связи с этим DOM использует стандартное имя #comment.) Другие имена узлов получаются из имен, присвоенных соответствующим компонентам в XML-документе. (Например, узел Element, представляющий элемент типа BOOK, также должен носить имя BOOK.)

Вы можете получить каждое из значений узла (перечисленные в последнем столбце) из свойства узла nodeValue. Если компонент XML имеет соответствующее значение (например, атрибут), это значение будет храниться в значении узла. Если компонент XML не имеет значения (например, элемент), DOM устанавливает в качестве значения узла null. Подробнее о большинстве типов узлов, перечисленных в таблице 9.1, вы узнаете далее в этой лекции.

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

Возьмем, например, XML-документ из Листинга 9.1. Этот документ состоит из объявления XML, комментария и корневого элемента, который включает дочерние элементы, а также атрибуты. На рисунке 9.1 показана иерархическая организация узлов, которые создает DOM для представления документа. Для каждого компонента рассматриваемого документа на рисунке указан тип узла, используемого для представления компонента (например, Document, Comment и Element), а также имя узла (оно указано в скобках – например, #document, #comment и INVENTORY).

Листинг 9.1. Inventory Dom.xml

Каждый узел, как программный объект, имеет свойства и методы, которые позволяют вам осуществлять доступ, отображать, обрабатывать и получать информацию о соответствующем компоненте XML. Например, свойства nodeName и nodeValue (см. таблицу 9.1) дают имя компонента и его значение.

Все типы узлов используют общий набор свойств и методов. Эти свойства и методы разработаны для работы с узлами вообще. В таблице 9.2 представлены некоторые наиболее полезные свойства. Более подробную информацию и примеры использования этих свойств вы найдете далее в этой лекции.

Таблица 9.2. Некоторые полезные свойства, поддерживаемые всеми типами узлов

Множество NamedNodeMap всех дочерних узлов-атрибутов данного узла

AttributeNode = Element.attributes.getNamedItem («Binding»);

Множество NodeList всех дочерних узлов, не являющихся атрибутами, данного узла

FirstNode = Element.childNodes (0);

Тип данных этого узла (применительно только к определенным типам узлов Attribute)

Первый дочерний узел данного узла, не являющийся атрибутом

Последний дочерний узел данного узла, не являющийся атрибутом

Следующий узел на том же уровне данного узла

Имя данного узла

Цифровой код, указывающий на тип данного узла

Строка, содержащая тип данного узла, строчными буквами (например, «element» или «attribute»)

Значение данного узла (или null, если он не содержит значения)

Корневой узел Document документа, содержащего данный узел

Узел, для которого данный узел является дочерним (не действует для узла Attribute)

Предыдущий узел на том же уровне данного узла

Все текстовое содержимое данного узла и все подчиненные узлы Element

Все содержимое XML данного узла и все его подчиненные узлы

Подсказка . Если вы хотите познакомиться со всеми свойствами, методами и событиями, принадлежащими различным типам объектов-узлов, обратитесь к следующей Web-странице, предоставленной MSDN: http://msdn.microsoft.com/xml/reference/scriptref/xmldom_Objects.asp. Обратите внимание, что на этой странице каждому имени узла, которые приведены в Таблице 9.1, предшествует префикс XMLDOM – например, XMLDOMDocument, XMLDOMElement и XMLDOMText. (Это имена программных интерфейсов для каждого типа узла.) Обратите внимание также, что общие свойства и методы узлов представлены под именем XMLDOMNode.

Помимо общих свойств и методов, каждому типу узла присущи дополнительные свойства и методы, разработанные для работы с определенным XML-компонентом, который представляет узел. Например, узел Document имеет свойство parseError, которое содержит информацию о любой ошибке, возникающей в процессе обработки документа. Данное свойство присуще только узлу Document. Далее в этой лекции вы познакомитесь с таблицей 9.3, в которой представлены наиболее полезные свойства и методы для некоторых типов узлов.

Подсказка . Свойство будет иметь значение null, если данное свойство не применимо к определенному узлу. Например, если узел представляет XML-компонент, который не имеет атрибутов (например, узел Document или Comment), его свойство attributes будет иметь значение null. Если узел представляет XML-компонент, который не имеет типа данных (тип данных имеют только определенные атрибуты), его свойство dataType будет иметь значение null. Если узел не имеет дочернего узла, не являющегося атрибутом, его свойство firstChild будет иметь значение null. Если узел относится к типу, который не имеет значений (например, узел Document или Element), его свойство nodeValue также будет иметь значение null

Обратите внимание в таблице 9.2, что каждый узел обладает набором свойств, которые позволяют вам перемещаться в иерархии узла – т. е. получать доступ к другим узлам от текущего узла. Например, рассмотрим документ из Листинга 9.1. Если переменная Document содержит корневой узел Document, следующий код приведет к отображению содержимого комментария, расположенного в начале документа (этот комментарий DOM хранит как второй дочерний узел узла Document):

Эта строка вызовет отображение сообщения, содержащего текст «Имя файла: Inventory Dom.xml».

В предыдущем разделе вы узнали, как осуществлять доступ к корневому узлу Document через член XMLDocument DSO, который получается из фрагмента данных XML. Узел Document является шлюзом к XML-документу. Вы можете использовать его для доступа к другим узлам. В последующих разделах вы познакомитесь с особыми способами доступа к узлам.

Доступ и отображение элементов XML-документа

В этом разделе вы познакомитесь с основными приемами использования HTML-страницы и DOM для отображения элементов XML-документа. Эти приемы демонстрируются в Листингах 9.2 и 9.3.

Листинг 9.2. Book.xml

Листинг 9.3. DomDemo Fixed.htm

Листинг 9.2 содержит простой XML-документ, который описывает одну книгу. Его корневой элемент, BOOK, содержит пять дочерних элементов (TITLE, AUTHOR, BINDING, PAGES и PRICE), каждый из которых содержит символьные данные, описывающие характеристики книги.

Листинг 9.3 содержит HTML-страницу, которая отображает содержимое каждого из дочерних элементов в XML-документе. На рисунке 9.2 показано как эта страница выглядит в Internet Explorer.

XML-документ связан со страницей через следующий фрагмент данных:

Страница отображает XML-документ посредством следующего блока кода сценария, который содержится в элементе HEAD страницы:

Установки атрибутов FOR=»window» и EVENT=»ONLOAD» предписывают браузеру выполнять код из элемента SCRIPT при первом открытии окна страницы до того, как будет отображено содержимое страницы.

Ссылка . Примеры сценариев в этой лекции написаны на языке Microsoft JScript – версии Microsoft родового языка для сценариев JavaScript. Полную информацию о JScript, включая учебник, вы можете найти на следующих Web-сайтах, предоставленных MSDN: http://msdn.microsoft.com/workshop/c-frame.htm#/workshop/languages/jscript/handling.asp и http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/default.htm.

Сценарий первым делом получает узел Document, который представляет весь документ и формирует корневой элемент иерархии узлов DOM. Он делает это через член XMLDocument DSO, как было описано ранее в этой лекции:

Далее сценарий получает доступ и отображает символьные данные, содержащиеся в каждом из дочерних элементов корневого элемента (TITLE, AUTHOR, BINDING, PAGES и PRICE). Например, он отображает содержимое первого дочернего элемента (TITLE) следующим образом:

Вот пояснение выражения, стоящего справа от знака равенства.

Document содержит узел Document в основании (корне) иерархии узлов DOM.

documentElement представляет собой свойство узла Document. Оно содержит узел Element, представляющий корневой элемент XML-документа – в нашем примере, BOOK.

Примечание . Свойство documentElement является одним из специфических для конкретного узла свойств, предоставляемых узлом типа Document. В таблице 9.3 представлены другие полезные свойства, а также методы, относящиеся к узлу Document. Имейте в виду, что для узла Document вы можете использовать и общие свойства узлов, представленные в таблице 9.2.

childNodes является свойством узла Element для корневого элемента. Оно содержит множество всех дочерних узлов корневого узла Element, не являющихся атрибутами. В нашем примере оно содержит узлы Element для пяти дочерних XML-элементов: TITLE, AUTHOR, BINDING, PAGES и PRICE. Выражение childNodes(0) ссылается на первый из этих дочерних узлов (а именно, на элемент TITLE).

Примечание. В рассматриваемом примере страницы (Листинг 9.3) вы можете использовать выражение Document.childNodes(2), чтобы получить доступ к узлу корневого элемента. (Выражение Document.childNodes(0) относится к узлу XML-объявления, а выражение Document.childNodes(1) относится к узлу комментария.) Однако преимущество использования свойства documentElement узла Document заключается в том, что его значение не зависит от положения корневого элемента внутри XML-документа. Например, если бы вы удалили комментарий в начале документа, либо если бы добавили объявление типа документа, выражение Document.childNodes(2) больше не представляло бы корневой элемент.

text является свойством узла, возвращаемого выражением childNodes(0). Оно предоставляет весь текст, содержащийся в этом узле, а также текст, принадлежащий любому подчиненному узлу Element. В нашем примере TITLE не имеет подчиненных элементов, поэтому свойство text содержит только собственно текст элемента TITLE, «The Adventures of Huckleberry Finn».>

Примечание . Свойства childNodes и text относятся к общим свойствам узлов (см. таблицу 9.2).

Таблица 9.3. Полезные свойства и методы, предоставляемые узлами Document. Общие свойства приведены в таблице 9.2

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

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

Оставь комментарий!

7 thoughts on “ #16 — DOM (объектная модель документа). ”

Клёво, как раз сейчас plain js учу. Помогло!

Здравствуйте! Поясните, пожалуйста, что есть elems? Т.е.
var elems = document.getElementsByTagName(«p»);
Я пробовал перебирать elems, как массив, и всё работает!
Я пробовал перебирать elems, как объект, и всё снова работает!
Я пробовал выводить тип elems с помощью typeof и мне написало, что это объект, но если выводить elems в консоль, то элементы находятся в квадратных скобках, т.е. это массив? Чего-то я тут не понял. Очень жду ответа.

Elems — это набор DOM элементов — массив.

На остальные вопросы вы найдете ответы внимательно посмотрев уроки про объекты и массивы.

Результат запроса getElementsByTagName — это не массив, а специальный объект.

а почему Вы не использовали previousElementSibling и nextElementSibling?

У меня есть предположение,потому что это не кроссбраузерно(в IE
function getNextElement(elem) <

if (elem.nextElementSibling !== undefined) <
return elem.nextElementSibling;
>
var current = elem.nextSibling;

На ipad у видео плеера нету кнопки чтоб смотреть видео на весь экран(ipad 4)

Добавить комментарий Отменить ответ

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

16. DOM — ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА

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

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

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

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

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

Представление документа в виде древовидной структуры

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

Рис. 19. Представление HTML-документа в виде древовидной структуры

В модели DOM к элементу можно обратиться непосредственно по его идентификатору id , воспользовавшись методом getElementById объекта Document:

Ruby on Rails c нуля!

Замечательный JavaScript ч. 3: Работа с DOM и BOM

декабря 10, 2011 | Published in ClientSide, JavaScript

BOM — Browser Object Model — объектная модель браузера
BOM — представляет собой древовидную структуру, иерархию объектов браузера. Во главе этой структуры стоит объект window и представляет он собой само окно браузера. window также является глобальным объектом, то есть внутри него расположена глобальная область видимости и любая глобальная функция или переменная является соответственно методом или свойством объекта window.

Наиболее интересными функциями и свойствами window являются следующие:

window.navigator — информация о браузере.

window.innerHeight , window.innerWidth — внутренняя высота и ширина браузера, то есть размер области, которая отображает сайт.

window.outerHeight , window.outerWidth — внешняя высота и ширина, то есть размер самого окна браузера.

window.load() — функция-обработчик события загрузки сайта.

window.location — объект предоставляет информацию об адресе страницы и методы для редиректа, обновления страницы и т.д.

screen — объект предоставляющий информацию о пользовательском дисплее.

screenLeft(screenX) , screenTop(screenX) — положение верхнего левого угла окна браузера.

scrollY , scrollX — положения горизонтальной и вертикальной полос прокрутки.

В этой статье мы рассматриваем BOM достаточно поверхностно так как для разработки веб-приложений нам это не сильно нужно знать. Интерес представляют только свойства дающие информацию о браузере пользователя, размерах экрана/браузера и локация.

DOM — Document Object Model — объектная модель документа.

DOM является структурой вложенной в BOM. DOM содержит дерево всех элементов страницы и методы для работы с ними. Самыми популярными методами являются:

document.getElementById() — позволяет получить элемент по его ID.

document.getElementsByClassName() — позволяет получить элементы по их классу.

document.getElementsByName() — позволяет получить элементы по их имени.

document.getElementsByTagName() — позволяет получить элементы по имени тега.

document.getElementsByTagNameNS() — позволяет получить элементы по их имени, которые содержатся в определенной области видимости (оптимизированная версия getElementsByTagName ).

Прежде, чем мы продолжим знакомится с остальными методами и свойствами для работы с DOM давайте подробнее рассмотрим что это такое и из чего DOM состоит. DOM описывается сразу тремя спецификациями разработанными W3C (W3C Level 1 DOM, W3C Level 2 DOM, W3C Level 3 DOM), которые были разработаны в разное время и соответственно в разной степени поддерживаются браузерами. В этой статье мы в первую очередь будем обращать внимание на DOM Level 1 так как он поддерживается полностью (или почти полностью) всеми современными (и не очень современными) браузерами. Вообще каждый Leve l является наслоением над предыдущим и добавляет определение новых свойств и методов для работы с DOM.

DOM состоит из узлов (node). О типах узлов позже.

Можно изобразить так:

Я буду концентрировать внимание в статье только на реально необходимых вещах, то есть работать мы будем всего с 3 типами узлов: ELEMENT_NODE(1) , ATTRIBUTE_NODE(2) , TEXT_NODE(3 ). Все остальные узлы необходимы очень-редко и то в очень-очень специальных приложениях.

ELEMENT_NODE(1) — узел представляющий собой элемент (тег).
ATTRIBUTE_NODE(2) — узел представляющий собой атрибут элемента.
TEXT_NODE(3) — узел представляющий собой текст (текст параграфа, текст ссылки и т.д.).
CDATA_SELECTION_NODE(4) — узел представляет содержание CDATA.
ENTITY_REFERENCE_NODE(5) — представляет ссылку на сущность.(XML)
ENTITY_NODE(6) — представляет сущность.(XML)
PROCESSING_INSTRUCTION_NODE(7) — узел представляет инструкцию обработки (XML)
COMMENT_NODE(8) — узел представляет собой комментарий в HTML коде.
DOCUMENT_NODE(9) — узел представляет собой документ, является корнем остальных узлов.
DOCUMENT_TYPE_NODE(10) — узел представляет собой документа.
DOCUMENT_FRAGMENT_NODE(11) — узел представляет упрощенный или урезанный document.
NOTATION_NODE(12) — узел представляет описание не-XML данных используемых внутри XML

Приведенное в скобках число — индекс узла, который возвращается при вызове для узла метода .nodeType() . .nodeType() — представляет достаточно поверхностную информацию об узле — один только >.nodeName .

Существует также полезнейшие get, set аксессоры .nodeValue , которые предоставляют содержимое узла или позволяют установить это содержимое.

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

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

Имеются также специальные свойства доступа к первому и последнему потомкам: firstChild и lastChild соответственно.

Для перемещения по одному уровню (по дочерним элементам одного родителя) существуют специальные свойства nextSibling и previousSibling .

Умение перемешаться по дереву DOM очень важно, однако чаще всего приходится обращаться к определенному элементу, позиция которого заранее может быть не известна. Для такой работы предназначены описанные выше методы getElementsByTagName , getElementsByTagNameNS , getElementsByClassName , getElementsByName , getElementById .

Еще важной возможность в работе с DOM является возможность добавлять и удалять элементы. Для добавления элемента необходимо использовать метод .appendChild() , но предварительно элемент необходимо создать используя метод .createElement() . Для удаления вложенного элемента следует использовать метод .removeChild() .

Давайте остановимся и попрактикуемся в работе с DOM. Для этого мы будем использовать совсем простой HTML код:

И инструменты разработчика в браузере. Chrome уже поставляется с замечательным набором разработчика, который включает в себя JavaScript REPL (его еще называют просто консолью), отладчик, профайлер и просмотрщик HTML и CSS. В Firefox нет встроенного инструмента разработчика (он появился только в FireFox Aurora), но имеется замечательный аддон — FireBug.

1. Обращаемся к элементам.
1.1. Получаем список всех элементов в именем div:

1.2. Получаем список всех элементов с классом paragraphs:

1.3. Получаем div с >

1.4. Использование CSS-селекторов для выборки элементов

2. Путешествуем по дереву DOM
2.1. Дочерние узлы

2.2. Соседние узлы

2.3. Родительский узел

3. Работа с атрибутами и содержимым узла
3.1. Работа с текстовым узлом: содержание узла

3.2. Работа с текстовым узлом: меняем значение

3.3. Работа с узлом атрибутов

3.4. Аксессоры к атрибутам

3.5. Аксессоры к inline-стилям

3.6. Работа с атрибутами

4. Работа с потомками
4.1. Добавление узлов

4.2. Удаление дочерних узлов

4.3. Замена узла

5.Дополнительно
5.1. innerHTML

Метод innerHTML позволяет легко манипулировать содержимым узла — вложенными ELEMENT_NODE и TEXT_NODE . Проще говоря, вы можете легко получить кусок HTML кода или вставить его.

В следующей статье поговорим о событиях и их обработке в JavaScript.

Лучшая благодарность автору — ваши комментарии!

Илон Маск рекомендует:  Insert - Процедура Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL