младшим ). Все элементы дерева являются потомками корня, а тот является их предком . При этом все элементы и тексты, образующие их содержимое, являются узлами дерева документа.
Каждый элемент данного дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и набор атрибутов. Для перехода к объектной модели документа остается сделать единственный шаг: назвать все элементы дерева объектами, а их атрибуты сделать доступными для чтения и для изменения из сценариев и аплетов. В результате дерево элементов HTML-документа становится динамически управляемым; более того, теперь мы можем легко добавлять к каждому элементу новые свойства, помимо стандартных атрибутов HTML.
Именно такой подход был положен в основу динамической модели HTML обозревателей Microsoft, а затем принят за основу стандартов W3C, получивших название объектная модель документа (Document Object Model или DOM). При этом W3C расширил понятие DOM на любые XML-документы, рассматривая HTML DOM как специализированный частный случай с дополнительными возможностями. Таким образом, DOM это модель HTML- и XML-документов, независимая от платформы и языка программирования, которая определяет:
- интерфейсы и объекты, которые используются для представления документа и манипулирования им;
- семантику этих интерфейсов и объектов, включая их атрибуты и реакцию на события;
- взаимосвязи между этими интерфейсами и объектами.
На сегодняшний день W3C стандартизовал DOM первого и второго уровней (DOM 1 и DOM 2); в стадии рабочего проекта находится DOM 3. Эти аббревиатуры соответственно обозначают следующее:
- DOM 1 описывает базовое представление XML- и HTML-документов в виде деревьев объектов;
- DOM 2 расширяет базовые интерфейсы DOM 1 и добавляет к ним поддержку событий и стилей;
- DOM 3 описывает загрузку и синтаксический анализом документов, а также их отображение и форматирование.
Учитывая текущее состояние вещей, мы рассматриваем здесь только DOM 2 (и содержащуюся в нем DOM 1). DOM 2 состоит из следующих групп взаимосвязанных интерфейсов:
- Core базовые интерфейсы, определяющие представление любого XML-документа в виде дерева;
- View интерфейсы, описывающие возможные отображения документа;
- Event интерфейсы, определяющие порядок генерации и обработки событий;
- Style интерфейсы, определяющие применение к документам таблиц стилей;
- Traversal & Range интерфейсы, определяющие прохождение дерева документа и манипулирование областями его содержимого;
- HTML интерфейсы, определяющие представление HTML-документа в виде дерева.
Начнем с определения базовых интерфейсов, лежащих в основе всех дальнейших спецификаций.
4.2.2. Основные понятияDOM 2 Core представляет XML-документы в виде деревьев, состоящих из узлов, которые, в свою очередь, также являются объектами и реализуют более специализированные интерфейсы. Одни типы узлов могут иметь детей, т. е. сами являться поддеревьями, другие являются листьями, т. е. детей не имеют. В следующей таблице сведены все возможные типы узлов абстрактного документа; для каждого типа узлов перечислены те узлы, которые могут быть его детьми. О понятиях, соответствующих перечисленным узлам, см. описание структуры XML-документа .
| Документ | Element (не более одного), ProcessingInstruction , Comment , DocumentType (не более одного) | |
| Фрагмент документа | Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference | |
| DocumentType | Тип документа | детей не имеет |
| EntityReference | Ссылка на раздел | Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference |
| Element | Элемент | Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference |
| Attr | Атрибут | Text , EntityReference |
| ProcessingInstruction | Директива XML | детей не имеет |
| Comment | Комментарий | детей не имеет |
| Text | Текст | детей не имеет |
| CDATASection | Секция CDATA | детей не имеет |
| Entity | Раздел | Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference |
| Notation | Нотация | детей не имеет |
Кроме того, DOM 2 Core содержит спецификацию интерфейсов NodeList (упорядоченные списки узлов, доступных по номеру в списке) и NamedNodeMap (неупорядоченные списки узлов, доступных по своему имени). Эти объекты являются живыми , т. е. любое изменение документа автоматически влечет изменение всех связанных с ним списков.
Следует подчеркнуть, что DOM 2 Core содержит два набора интерфейсов, каждый из которых обеспечивает полный доступ ко всем элементам документа. Первый набор представляет объектно-ориентированный подход со следующей иерархией наследования: документ составляющие его элементы их атрибуты и текстовое содержимое. При таком рассмотрении дерева документа мы говорим о иерархии объектов . Второй подход построен по принципу "все есть узлы (Nodes)". Здесь все составляющие документа рассматриваются как равноправные узлы его дерева, и мы можем говорить только о иерархии узлов . Таким образом, DOM 2 по своей сути является избыточной, но предоставляет нам возможность в зависимости от задачи рассматривать документ тем или иным способом.
Все интерфейсы DOM 2 Core подразделяются на основные (fundamental) и дополнительные (extended). Основными являются интерфейсы , , , , Node , NodeList , NamedNodeMap , CharacterData , Attr , Element , Text и Comment . Эти интерфейсы должны поддерживаться всеми реализациями DOM, как для XML-, так и для HTML-документов. Дополнительные интерфейсы ориентированы на XML-документы, поэтому реализации DOM для HTML могут их не поддерживать. К ним относятся CDATASection , DocumentType , Notation , Entity , EntityReference и ProcessingInstruction .
В целях независимости от языка и платформы DOM определяет следующие типы:
DOMString Текстовая строка, состоящая из символов Unicode в формате UTF-16 . В JavaScript и в Java реализуется типом String. DOMTimeStamp Дата и время в приемлемом для конкретного языка формате. Например, в JavaScript это будет объект Date , а в Java целое число типа long , содержащее количество миллисекунд.Ниже приведено краткое описание всех интерфейсов DOM с указанием уровня модели (DOM 1 или DOM 2), в которой определено то или иное свойство интерфейса. Спецификации W3C написаны на платформо-независимом языке IDL. Мы же приводим их в соответствии с синтаксисом JavaScript, который на сегодня является основным сценарным языком.
Вместе с описание стандарта мы приводим краткое описание его реализации в объектных моделях Microsoft и Gecko. При этом следует учитывать, что реализации Microsoft для XML и HTML совершенно независимы (они реализуются соответственно программными компонентами XMLDOM и MSHTML), тогда как в Gecko объектная модель одинакова для HTML- и XML-документов. Основное внимание в последующем изложении уделено DOM для HTML; XML DOM подробно будет рассмотрена в Части VIII.
4.2.3. Исключения: интерфейс DOMExceptionОбъект DOMException является прототипом всех исключительных ситуаций, которые могут возникнуть в процессе обработки документа. Он имеет единственное свойство code типа Number , которое содержит номер исключения согласно следующей таблицы:
| INDEX_SIZE_ERR | 1 | Выход индекса за пределы допустимого диапазона. | DOM 1 |
| DOMSTRING_SIZE_ERR | 2 | Заданный текст не может быть приведен к типу . | DOM 1 |
| HIERARCHY_REQUEST_ERR | 3 | Попытка вставить узел в ненадлежащее место дерева. | DOM 1 |
| WRONG_DOCUMENT_ERR | 4 | Недопустимый тип документа. | DOM 1 |
| INVALID_CHARACTER_ERR | 5 | Встречен недопустимый символ. | DOM 1 |
| NO_DATA_ALLOWED_ERR | 6 | Узел не содержит данных. | DOM 1 |
| NO_MODIFICATION_ALLOWED_ERR | 7 | Попытка недопустимой модификации объекта. | DOM 1 |
| NOT_FOUND_ERR | 8 | Обращение к несуществующему узлу. | DOM 1 |
| NOT_SUPPORTED_ERR | 9 | Параметр или операция не реализованы. | DOM 1 |
| INUSE_ATTRIBUTE_ERR | 10 | Попытка добавления атрибута, который уже существует. | DOM 1 |
| INVALID_STATE_ERR | 11 | Обращение к несуществующему объекту. | DOM 1 |
| SYNTAX_ERR | 12 | Синтаксическая ошибка. | DOM 2 |
| INVALID_MODIFICATION_ERR | 13 | Попытка изменения типа объекта. | DOM 2 |
| NAMESPACE_ERR | 14 | Попытка создания или изменения объекта, не соответствующая пространству имен XML . | DOM 2 |
| INVALID_ACCESS_ERR | 15 | Параметр или операция не поддерживаются объектом. | DOM 2 |
Интерфейс DOMImplementation содержит методы, выполнение которых не зависит от конкретной объектной модели документа. Он доступен через свойство объекта .
Метод createCSSStyleSheet Синтаксис : объект .createCSSStyleSheet(title, media) Аргументы : title, media выражения типа Результат : новый объект CSSStyleSheet Исключения : SYNTAX_ERR ПоддержкаМетод createCSSStyleSheet создает новый объект CSSStyleSheet и возвращает указатель на него. Этот метод должен поддерживаться только теми реализациями DOM, которые поддерживают CSS. Объект создается вне контекста документа; DOM 2 не позволяет поключить вновь созданную таблицу стилей к документу. Аргумент title задает титул таблицы стилей, а media список устройств отображения через запятую.
Метод createDocument Синтаксис : объект .createDocument(namespaceURI, qualifiedName, doctype) Аргументы : namespaceURI, qualifiedName выражения типа doctype выражение типа DocumentType Результат : новый объект Исключения : INVALID_CHARACTER_ERR, NAMESPACE_ERR, WRONG_DOCUMENT_ERR Поддержка : Не поддерживается. Не поддерживается.Метод createDocument создает новый объект и возвращает указатель на него. Он предназначен для создания XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен корневого элемента документа, qualifiedName его ограниченное имя , а doctype тип создаваемого документа (может иметь значение null ).
Метод createDocumentType Синтаксис : объект .createDocumentType(qualifiedName, publicId, systemId) Аргументы : qualifiedName, publicId, systemId выражения типа Результат : новый узел DocumentType Исключения Поддержка : Не поддерживается. Не поддерживается.Метод createDocumentType создает пустой узел типа DocumentType и возвращает указатель на него. Он предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент qualifiedName задает ограниченное имя создаваемого типа документа, publicId публичный идентификатор внешнего раздела , а systemId системный идентификатор внешнего раздела .
Метод hasFeature Синтаксис : объект .hasFeature(feature, version) Аргументы : feature, version выражения типа Результат : логическое значение Исключения : нет ПоддержкаМетод hasFeature возвращает true , если реализация DOM поддерживает указанное свойство, и false в противном случае. Имя свойства (в любом регистре) задается аргументом feature ; оно должно соответствовать правилам образования имен XML . Аргумент version задает имя версии проверяемого свойства. Если он не задан, то возвращается true , если поддерживается хотя бы какая-то версия данного свойства.
В Gecko значениями feature могут быть строки "XML" и "HTML", а значением version строки "1.0" и "2.0". Пример:
Alert(document.implementation.hasFeature("HTML", "1.0")); alert(document.implementation.hasFeature("HTML", "2.0")); alert(document.implementation.hasFeature("HTML", "3.0"));
Первые два оператора alert выведут строку true , а третий false .
В Microsoft XMLDOM значениями feature могут быть строки "XML", "DOM" и "MS-DOM", а значением version строка "1.0". Пример:
Var objDoc = new ActiveXObject("Microsoft.XMLDOM"); alert(objDoc.implementation.hasFeature("XML", "1.0")); alert(objDoc.implementation.hasFeature("XML", "2.0"));
Первый оператор alert выведет строку true , а второй false .
4.2.5. Фрагмент документа: интерфейс DocumentFragment Поддержка : Только для XML-документов (XMLDOMDocumentFragment). Соответствует DOM 1.Интерфейс DocumentFragment является потомком интерфейса Node и наследует все его свойства и методы. Как и вытекает из его названия, он предназначен для операций с фрагментами документов (извлечение части дерева документа, создание нового фрагмента документа, вставка фрагмента в качестве сына какого-либо узла и т. п.). Отметим, что при вставке объекта типа DocumentFragment в узел Node , способный иметь детей, вставляются все дети этого объекта, но не сам объект. Примеры см. в описании интерфейса Node .
4.2.6. Документ: интерфейс Document Поддержка : Поддерживается для XML-документов (XMLDOMDocument); для HTML-документов поддерживается частично. DOM 1 полностью, DOM 2 частично.Интерфейс Document соответствует XML- или HTML-документу. Он является основой для доступа к содержанию документа и для создания его составляющих.
| DOM 1 | Создает атрибут. | |
| DOM 2 | Создает атрибут с учетом пространства имен. | |
| DOM 1 | Создает секцию CDATA. | |
| DOM 1 | Создает комментарий. | |
| DOM 1 | Создает новый фрагмент документа. | |
| DOM 1 | Создает новый элемент. | |
| DOM 2 | Создает элемент с с учетом пространства имен. | |
| DOM 1 | Создает ссылку на раздел. | |
| DOM 2 | Создает новый объект Event . | |
| DOM 1 | Создает директиву. | |
| DOM 1 | Создает новый текстовый узел. | |
| DOM 2 | Возвращает элемент с заданным идентификатором. | |
| DOM 1 | Возвращает коллекцию всех элементов, имеющих данный тег. | |
| DOM 2 | Возвращает коллекцию всех элементов, имеющих данный тег с учетом пространства имен. | |
| DOM 2 | Импортирует узел из другого документа. |
Свойство doctype возвращает тип данного документа (типа DocumentType). Для HTML-документов и для XML-документов, не имеющих декларации типа документа , возвращается null .
Свойство documentElement Синтаксис : документ .documentElement Изменяемое : нет Поддержка : Соответствует стандарту. Соответствует стандарту.Свойство documentElement возвращает корневой элемент данного документа (типа Element). Для HTML-документов возвращается элемент HTML . Пример: оператор
Alert(document.documentElement.tagName);
выведет на экран строку HTML .
Свойство implementation Синтаксис : документ .implementation Изменяемое : нет Поддержка : Только для XML-документов. Соответствует DOM 1.Свойство implementation возвращает объект типа , описывающий данную реализацию DOM.
Свойство styleSheets Синтаксис : документ .styleSheets Изменяемое : нет Поддержка : Только для HTML-документов. Соответствует стандарту.Свойство styleSheets возвращает объект типа StyleSheetList , соответствующий списку внешних и внутренних таблиц стилей документа. Это свойство поддерживается только теми реализациями DOM, которые поддерживают динамические таблицы стилей .
Метод createAttribute Синтаксис : документ .createAttribute(name) Аргументы : name выражение типа Результат : новый объект Attr Исключения : INVALID_CHARACTER_ERR Поддержка : Только для XML-документов. Соответствует стандарту.Метод createAttribute создает новый объект типа Attr и возвращает указатель на него. Аргумент name задает имя создаваемого атрибута. У нового объекта атрибут nodeName имеет значение name , а атрибуты localName , prefix и namespaceURI равны null . В дальнейшем созданный атрибут может быть присвоен какому-либо элементу методом Element.setAttributeNode .
Пример создания атрибута для элемента HTML:
Var myDiv = document.getElementById("idDiv"); var attr = document.createAttribute("temp"); attr.value = "temporary"; myDiv.setAttributeNode(attr); alert(myDiv.getAttribute("temp"));
Оператор alert выведет строку temporary .
Пример создания атрибута в Microsoft XMLDOM:
Var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load("c:\My Documents\books.xml"); var root = xmlDoc.documentElement; var newAttr = xmlDoc.createAttribute("temp"); newAttr.value = "temporary"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));
Здесь оператор alert также выведет строку temporary .
Метод createAttributeNS Синтаксис : документ .createAttributeNS(namespaceURI, qualifiedName) Аргументы : namespaceURI, qualifiedName выражения типа Результат : новый объект Attr Исключения : INVALID_CHARACTER_ERR, NAMESPACE_ERR Поддержка : Не поддерживается. Не поддерживается.Метод createAttributeNS создает новый объект типа Attr и возвращает указатель на него. Он предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен , а qualifiedName ограниченное имя создаваемого атрибута в этом пространстве имен. Созданный объект типа Attr имеет следующие атрибуты:
В дальнейшем созданный атрибут может быть присвоен какому-либо элементу методом Element.setAttributeNode .
Метод createCDATASection Синтаксис : документ .createCDATASection(data) Аргументы : data выражение типа Результат : новый объект CDATASection Исключения : NOT_SUPPORTED_ERR Поддержка : Соответствует стандарту. Соответствует стандарту.Метод createCDATASection создает новый объект типа CDATASection и возвращает указатель на него. Он предназначен только для XML-документов; попытка вызвать его в HTML DOM генерирует исключение NOT_SUPPORTED_ERR . Аргумент data задает содержимое создаваемой. Пример создания секции CDATA в Microsoft XMLDOM:
Var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load("c:\My Documents\books.xml"); var root = xmlDoc.documentElement; var newSection = xmlDoc.createCDATASection("Hello World!"); root.appendChild(newSection);
Метод createComment Синтаксис : документ .createComment(data) Аргументы : data выражение типа Результат : новый объект Comment Исключения : нет Поддержка : Только для XML-документов. Соответствует стандарту.Метод createComment создает новый объект типа Comment и возвращает указатель на него. Аргумент data задает содержимое создаваемого комментария. Пример создания комментария в Gecko:
Var root = document.documentElement.firstChild; var comm = document.createComment("Это комментарий."); root.appendChild(comm);
Метод createDocumentFragment Синтаксис : документ .createDocumentFragment() Результат : новый объект Исключения : нет Поддержка : Только для XML-документов. Соответствует стандарту.Метод createDocumentFragment создает новый пустой объект типа и возвращает указатель на него. Пример создания фрагмента документа в Gecko:
Var elem = document.documentElement.firstChild; var o = document.createDocumentFragment(); elem.appendChild(o);
Метод createElement Синтаксис : документ .createElement(tagName) Аргументы : tagName выражение типа Результат : новый объект Element Исключения : INVALID_CHARACTER_ERR Поддержка : Соответствует стандарту (см. прим. 2). Соответствует стандарту.Метод createElement создает новый объект типа Element и возвращает указатель на него. Аргумент tagName задает тег создаваемого элемента. У нового объекта атрибут nodeName имеет значение tagName , а атрибуты localName , prefix и namespaceURI равны null . Если объект имеет атрибуты со значениями по умолчанию, то автоматически создаются соответствующие узлы Attr и присоединяются к элементу.
Примечания :
| ATTRIBUTE_NODE | Атрибут ownerElement равен null , specified равен true . Все потомки исходного узла рекурсивно копируются в новый узел Attr , независимо от значения deep . |
| DOCUMENT_FRAGMENT_NODE | Если deep равен true , то производится импорт заданного фрагмента документа; в противном случае создается пустой узел . |
| DOCUMENT_NODE , DOCUMENT_TYPE_NODE | Не могут быть импортированы. |
| ELEMENT_NODE | В новый узел Element копируются все атрибуты исходного узла, кроме заданных по умолчанию в исходном документе. Затем создаются атрибуты по умолчанию, принятые в данном документе для элементов с этим именем. Если deep равен true , то производится импорт всего поддерева исходного элемента. |
| ENTITY_NODE | Узлы Entity DocumentType |
| ENTITY_REFERENCE_NODE | Копируется только сам узел EntityReference , независимо от значения deep . Если в нашем документе есть определение раздела с данным именем, то оно заносится в новый узел. |
| NOTATION_NODE | Узлы Notation могут быть импортированы, но в DOM 2 объект DocumentType доступен только для чтения, поэтому импорт таких узлов не имеет смысла. |
| PROCESSING_INSTRUCTION_NODE | Копируются значения атрибутов target и data исходного узла. |
| TEXT_NODE, CDATA_SECTION_NODE, COMMENT_NODE | Копируются значения атрибутов data и length исходного узла. |
DOM API не особенно сложен, но прежде чем переходить к обсуждению программирования с использованием DOM, следует разобраться с некоторыми вопросами архитектуры DOM.
Представление документов в виде деревьев
HTML-документы имеют иерархическую структуру, представленную в DOM в виде дерева. Узлы дерева представляют различные типы содержимого документа. В первую очередь, древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и
И узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие комментарии HTML.1 Рассмотрим следующий
простой HTML-документ.
Sample Document
An HTML DocumentThis is a simple document.
Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно знать, что они заимствуют терминологию у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу.
Узлы, находящиеся на том же уровне и имеющие того же родителя, называются братьями. Узлы, расположенные на любое
число уровней ниже другого узла, являются его потомками. Родительские,прародительские и любые другие узлы, расположенные выше данного узла, являются его предками.
Узлы
Древовидная структура DOM представляет собой дерево объектов Node различных типов. Интерфейс Node1 определяет свойства и методы для перемещения по дереву и манипуляций с ним. Свойство childNodes объекта Node возвращает список дочерних узлов, свойства firstChild, lastChild, nextSibling, previousSibling и parentNode предоставляют способ обхода узлов дерева. Такие методы, как appendChild(), removeChild(), replaceChild() и insertBefore(), позволяют добавлять узлы в дерево документа и удалять их.
Типы узлов
Типы узлов в дереве документа представлены специальными подынтерфейсами интерфейса Node. У любого объекта Node есть свойство nodeType, определяющее тип данного узла. Если свойство nodeType узла равно, например, константе Node.ELEMENT_NODE, значит, объект Node является также объектом Element, и можно использовать с ним все методы и свойства, определенные ин-терфейсом Element.
Свойство document-Element этого объекта ссылается на объект Element, представляющий корневой элемент документа. Для HTML-документов это тег, явно или неявно присутствующий в документе. (Помимо корневого элемента узел Document может иметь другие дочерние элементы, такие как объекты Comment.)
Основная часть дерева DOM состоит из объектов Element, представляющих такие теги, как и , и объектов Text, представляющих строки текста. Если анализатор документа сохраняет комментарии, эти комментарии представляются в дереве как объекты DOM Comment.
Атрибуты
Атрибуты элемента (например, атрибуты src и width тега ) могут быть прочитаны, установлены и удалены с помощью методов getAttribute(), set-Attribute() и removeAttribute() интерфейса Element.
Другой, менее удобный способ работы с атрибутами – это метод getAttribute-Node(), который возвращает объект Attr, представляющий атрибут и его значение. (Одной из причин выбора этой менее удобной технологии является наличие у интерфейса Attr свойства specified, позволяющего определять, указан ли данный атрибут в документе явно или для него принимается значение по умолчанию.) Однако обратите внимание, что объекты Attr не присутствуют в массиве childNodes элемента и непосредственно не являются частью дерева документа, как узлы Element и Text.
Спецификация DOM позволяет обращаться к узлам Attr через массив attributes интерфейса Node, но в Microsoft Internet Explorer определяется другой несовместимый массив attributes, что делает невозможным использование этого массива переносимым образом.
DOM HTML API
Стандарт DOM предназначен для работы как с XML, так и с HTML. Базовый DOM API – интерфейсы Node, Element, Document и другие – относительно универсален и применим к обоим типам документов. Стандарт DOM также включает интерфейсы, специфические для документов HTML. HTMLDocument – это специфический для HTML подынтерфейс интерфейса Document, а HTMLElement – специфический для HTML подынтерфейс интерфейса Element. Кроме того, DOM определяет интерфейсы для многих элементов HTML, относящиеся к конкретным тегам. Эти интерфейсы, такие как HTMLBodyElement и HTMLTitleElement, обычно определяют набор свойств, отражающих атрибуты данного тега HTML. Интерфейс HTMLDocument определяет различные свойства документа и методы, поддерживавшиеся броузерами до появления стандарта W3C. В их число входят свойство location, массив forms и метод write().
Интерфейс HTMLElement определяет свойства id, style, title, lang, dir и className, обеспечивающие удобный доступ к значениям атрибутов id, style,title, lang, dir и class, которые могут применяться со всеми тегами HTML.
Теги HTML не принимают никаких атрибутов, кроме шести только что перечисленных, и потому полностью представимы интерфейсом HTMLElement.
Для всех остальных тегов HTML в части спецификации DOM, относящейся
к HTML, определяются специальные интерфейсы. Для многих тегов HTML
эти интерфейсы не делают ничего, кроме предоставления набора свойств, соответствующих атрибутам HTML. Например, тегу
- соответствует интерфейс HTMLU ListElement, а для тега есть соответствующий интерфейс HTMLBodyElement. Поскольку эти интерфейсы просто определяют свойства, стандартизованные в HTML, они не документируются в этой книге подробно.
Можно спокойно предположить, что объект HTMLElement, представляющий определенный тег HTML, имеет свойства для каждого из стандартных атрибутов этого тега (см. соглашения о назначении имен в следующем разделе). Обратите внимание, что стандарт DOM определяет свойства для атрибутов HTML для удобства создателей сценариев. Общий (и, пожалуй, предпочтительный) способ чтения и установки значений атрибутов предоставляют методы getAttribute() и setAttribute() объекта Element. Некоторые из интерфейсов, описанных в HTML DOM, определяют дополнительные свойства или методы, отличные от тех, что соответствуют значениям атрибутов HTML. Например, интерфейс HTMLInputElement определяет методы focus() и blur(), а интерфейс HTMLFormElement – методы submit() и reset() и свойство length. Такие методы и свойства обычно присутствовали до стандартизации DOM и были сделаны частью стандарта для обратной совместимости с принятой практикой программирования. Подобные интерфейсы документированы в «Справочнике по W3C DOM» (часть V). Кроме того, информацию о частях этих интерфейсов, относящихся к «принятой практике», можно найти в части IV «Справочник по клиентскому JavaScript», хотя зачастую эта информация приведена под именем, использовавшимся до стандартизации DOM, – так, HTMLFormElement и HTMLInputElement в «Справочнике по клиентскому JavaScript» описаны в разделах «Form» и «Input».
Соглашения о назначении имен для HTML
При работе со специфическими для HTML частями стандарта DOM необхомимо иметь в виду некоторые простые соглашения о назначении имен. Имена свойств, специфических для интерфейсов HTML, начинаются со строчных букв. Если имя свойства состоит из нескольких слов, первые буквы второго и последующих слов являются прописными. Таким образом, атрибут maxlength тега транслируется в свойство maxLength интерфейса HTMLInputElement.
Когда имя атрибута HTML конфликтует с ключевым словом JavaScript, для разрешения конфликта к имени добавляется префикс «html». Например, атрибут for тега транслируется в свойство htmlFor интерфейса HTMLLabelElement. Исключение из этого правила составляет атрибут class (кото-рый может быть указан для любого элемента HTML) – он транслируется в свойство className1 интерфейса HTMLElement.
Уровни и возможности DOM
Имеются две версии, или два «уровня», стандарта DOM. DOM Level 1 был стандартизован в октябре 1998 года. Он определяет базовые интерфейсы DOM, такие как Node, Element, Attr и Document, а также различные интерфейсы, специфические для HTML. DOM Level 2 был стандартизован в ноябре 2000 года.2 Кроме некоторых изменений в базовых интерфейсах, эта версия DOM была сильно расширена за счет определения стандартных API для работы с событиями документа и каскадными таблицами стилей (CSS), а также с целью предоставления дополнительных инструментальных средств для работы с непрерывными областями документов. На момент написания этой книги рабочая группа DOM в W3C занимается стандартизацией DOM Level 3. Кроме того, иногда вы можете встретить упоминание о DOM Level 0. Этот термин не относится к какому-либо формальному стандарту, а служит для неформальной ссылки на общие средства объектных моделей документа, реализованных в Netscape и Internet Explorer до стандартизации консорциумом W3C. В DOM Level 2 стандарт стал модульным. Базовый модуль, определяющий основную древовидную структуру документа с помощью (среди прочих) интерфейсов Document, Node, Element и Next, – это единственный модуль, являющийся обязательным. Все остальные модули не обязательны и могут либо поддерживаться, либо нет, в зависимости от реализации. Реализация DOM в веб-броузере, очевидно, должна поддерживать модуль HTML, так как веб-документы пишутся на HTML. Броузеры, поддерживающие таблицы стилей CSS, обычно поддерживают модули StyleSheets и CSS, поскольку стили CSS играют ключевую роль в программировании Dynamic HTML. Аналогично, так как большинство интересных программ JavaScript требует наличия средств обработки событий, можно предполагать поддержку веб-броузерами модуля Events спецификации DOM.
К сожалению, модуль Events был лишь недавно определен спецификацией DOM Level 2 и не имел широкой поддержки на момент написания этой книги.
Соответствие DOM
На момент написания этой книги не существовало броузера, полностью соответствующего стандарту DOM. Последние релизы Mozilla ближе всего по-дошли к этому, и полная совместимость с DOM Level 2 является целью проекта Mozilla. Броузер Netscape 6.1 соответствует большинству важных модулей Level 2, а Netscape 6.0 отличает достаточно хорошая совместимость, но с некоторым пробелами. Internrt Explorer 6 в основном совместим (по крайней мере, за одним неприятным исключением) c DOM Level 1, но не поддерживает многие модули Level 2, в частности, модуль Events. Internet Explorer 5 и 5.5 имеют значительные пробелы в совместимости, но достаточно хорошо поддерживают ключевые методы DOM Level 1, чтобы запускать большинство примеров из этой главы. В версии IE для Macintosh реализована значительно более полная поддержка DOM, чем в IE 5 для Windows. Кроме Mozilla, Netscape, Internet Explorer и несколько других броузеров предлагают как минимум частичную поддержку DOM. Количество доступных броузеров стало слишком велико, а изменения в сфере поддержки стандартов происходят слишком быстро, чтобы даже пытаться в этой книге определенно утверждать, какие средства DOM поддерживает конкретный броузер. Следовательно, при определении совместимости реализации DOM в любом конкретном броузере вам придется полагаться на другие источники информации. Одним из источников информации о совместимости является сама реализация. В совместимой реализации свойство implementation объекта Document ссылается на объект DOMImplementation, определяющий метод под названием hasFeature(). Посредством этого метода (если он существует) можно получить сведения о наличии поддержки определенного модуля (или возможностей) стандарта DOM. Например, определить, поддерживает ли реализация DOM в веб-броузере базовые интерфейсы DOM Level 1 для работы с документами HTML, можно с помощью следующего кода:
If (document.implementation &&
document.implementation.hasFeature &&
document.implementation.hasFeature("html", "1.0")) {
// Броузер заявляет о поддержке базовых интерфейсов Level 1
// и интерфейсов HTML
}
Метод hasFeature() принимает два аргумента: первый – это имя проверяемого модуля, а второй – номер версии в виде строки. Он возвращает true, если указанная версия указанного модуля поддерживается.
Например, если hasFeature() указывает, что поддерживается модуль MouseEvents, это подразумевает, что также поддерживается модуль UIEvents, который, в свою очередь, подразумевает поддержку модулей Events, Views и Core.В Internet Explorer 6 (под Windows) hasFeature() возвращает true только для модуля «HTML» и версии «1.0». Он не сообщает о совместимости с любыми другими модулями
В Netscape 6.1 hasFeature() возвращает true для большинства имен модулей и номеров версий, за исключением модулей Traversal и Mutation-Events. Метод возвращает false для модулей Core и CSS2 версии 2.0, указывая на неполную совместимость (даже несмотря на то, что поддержка этих модулей очень хороша).
В этой книге документируются интерфейсы, составляющие все модули DOM. Модули Core, HTML, Traversal и Range рассматриваются в этой главе. Модули StyleSheets, CSS и CSS2 рассматриваются в главе 18, а различные модули, относящиеся к событиям (за исключением MutationEvents) – в главе 19. Часть V «Справочник по W3C DOM» содержит полное описание всех модулей.
Метод hasFeature() не абсолютно надежен. Как отмечалось выше, IE 6 сообщает о совместимости Level 1 со средствами HTML, даже несмотря на то, что в этой совместимости есть некоторые проблемы. С другой стороны, Netscape 6.1 сообщает о несовместимости с Level 2 Core, даже несмотря на то, что этот броузер почти совместим с этим модулем. В обоих случаях нужны более подробные сведения о том, что именно совместимо, а что нет. Но объем этой ин-формации слишком велик, и она слишком изменчива, чтобы включать ее в печатное издание.
Те, кто активно занимается веб-разработкой, несомненно, уже знают или скоро узнают о многих специфических для броузеров деталях совместимости. Кроме того, в Интернете есть ресурсы, которые могут оказаться полезными. Самое важное, что организация W3C (в сотрудничестве с Национальным институтом стандартов и технологии США) работает над созданием набора с открытыми исходными текстами для тестирования реализаций DOM. На
момент написания этой книги разработка тестового набора только начиналась, но он должен стать неоценимым средством тонкой проверки на совместимость реализации DOM. Подробности можно найти на сайте http://www.w3c.org/DOM/Test/.
Организация Mozilla имеет несколько тестовых наборов для различных стандартов, в том числе для DOM Level 1 (доступных на странице http://www.mozilla.org/qualitybrowser_sc.html). Компания Netscape опубликовала тестовый набор, включающий некоторые тесты для DOM Level 2 (доступный на странице http://developer.netscape.com/evangelism/tools/testsuites/). Netscape также опубликовала предвзятое (и устаревшее) сравнение совместимости с DOM ранних релизов Mozilla и IE 5.5 (доступное на странице http://home.netscape.com/browsers/future/standards.html). И наконец, вы также можете найти информацию о совместимости и соответствии стандартам на независимых сайтах в Интернете. Один из достойных упоминания сайтов публикует Петер-Пауль Кох (Peter-Paul Koch). Ссылку на таблицу совместимости DOM можно найти на его главной странице, посвященной JavaScript (http://www.xs4all.nl/~ppk/js/).
Совместимость с DOM в Internet Explorer
Поскольку IE – наиболее широко используемый веб-броузер, несколько особых замечаний о его совместимости со спецификациями DOM будут здесь уместны. IE 5 и более поздние версии достаточно хорошо поддерживают базовые и HTML-средства Level 1, чтобы запускать примеры из этой главы, и достаточно хорошо поддерживают ключевые возможности CSS Level 2 для того, чтобы запускать большинство примеров8. К сожалению, IE 5, 5.5 и 6 не поддерживают модуль Events из DOM Level 2, даже несмотря на то, что корпорация Microsoft участвовала в определении этого модуля и имела достаточно времени для его реализации в IE 6. Как мы увидим в главе 19, обработка событий играет ключевую роль в клиентском Java-Script, и отсутствие в IE поддержки стандартной модели обработки событий затрудняет разработку развитых клиентских веб-приложений. Хотя IE 6 заявляет (через свой метод hasFeature()) о поддержке базовых и HTML-интерфейсов стандарта DOM Level 1, фактически эта поддержка не полна. Наиболее вопиющая проблема, с которой вы, скорее всего, столкнетесь, – небольшая, но неприятная: IE не поддерживает константы типов узлов, определяемых в интерфейсе Node. Вспомните, что каждый узел в документе имеет свойство nodeType, задающее тип данного узла. СпецификацияDOM также утверждает, что интерфейс Node определяет константы, представляющие каждый из определяемых им типов узлов. Например, константа Node.ELEMENT_NODE представляет узел Element. В IE (по крайней мере, до версии 6 включительно) эти константы просто не существуют.
Примеры в этой главе были изменены, чтобы обойти это препятствие, и содержат целые литералы вместо соответствующих символических констант.
Например:
if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)
// Проверяем, что n является объектом Element
Хороший стиль программирования требует, чтобы в код помещались константы, а не жестко кодируемые целые литералы, и те, кто захочет сделать код переносимым, могут включить в программу следующий код для определения констант, если они отсутствуют:
If (!window.Node) {
var Node = { // Если объект Node отсутствует, определяем
ELEMENT_NODE: 1, // его со следующими свойствами и значениями.
ATTRIBUTE_NODE: 2, // Обратите внимание, что это только типы узлов
TEXT_NODE: 3, // HTML. Для XML-узлов вам нужно определить
COMMENT_NODE: 8, // здесь другие константы.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
Независимые от языка интерфейсы DOM
Хотя стандарт DOM появился благодаря желанию иметь общий API для программирования динамического HTML, модель DOM интересна не только веб-программистам. На самом деле сейчас этот стандарт наиболее интенсивно используется серверными программами на Java и C++ для анализа документов XML и манипуляции ими. Из-за наличия многих вариантов использования стандарт DOM был определен как независимый от языка. В данной книге описывается только привязка DOM API к JavaScript, но необходимо иметь в виду и некоторые другие моменты. Во-первых, заметьте, что свойства объекта в привязке к JavaScript обычно соответствуют паре методов get/set в привязке к другим языкам. Следовательно, когда программист, пишущий на Java, спрашивает вас о методе getFirstChild() интерфейса Node, надо понимать, что в JavaScript привязка Node API не определяет метода getFirst-Child(). Вместо этого она просто определяет свойство firstChild, и чтение этого свойства в JavaScript эквивалентно вызову метода getFirstChild() в Java. Другая важная особенность привязки DOM API к JavaScript в том, что некоторые объекты DOM ведут себя как массивы JavaScript. Если интерфейс определяет метод с именем item(), объекты, реализующие этот интерфейс, ведут себя так же, как доступные только для чтения массивы с числовым индексом. Предположим, что в результате чтения свойства childNodes узла по-лучен объект NodeList. Отдельные объекты Node из списка можно получить, во-первых, передав номер нужного узла методу item(), а во-вторых, рассматривая объект NodeList как массив и обращаясь к нему по индексу. Следующий код иллюстрирует эти две возможности:
Var n = document.documentElement; // Это объект Node.
var children = n.childNodes; // Это объект NodeList.
var head = children.item(0); // Это один из способов
// использования NodeList.
var body = children; // Но есть более простой способ!
Аналогично, если у объекта DOM есть метод namedItem(), передача строки этому методу – то же самое, что использование строки как индекса массива. Например, следующие строки кода представляют собой эквивалентные способы доступа к элементу формы:
Var f = document.forms.namedItem("myform");
var g = document.forms["myform"];
var h = document.forms.myform;
Стандарт DOM может использоваться различными способами, поэтому разработчики стандарта аккуратно определили DOM API таким образом, чтобы это не ограничивало возможность реализации API другими разработчиками. В частности, стандарт DOM определяет интерфейсы вместо классов. В объектно-ориентированном программировании класс – это фиксированный тип данных, который должен быть реализован в точном соответствии со своим определением. С другой стороны, интерфейс – это коллекция методов и свойств, которые должны быть реализованы вместе. Следовательно, реализация DOM может определять любые классы, которые считает нужным, но эти классы должны определять методы и свойства различных интерфейсов DOM. Такая архитектура имеет пару важных следствий. Во-первых, имена классов, используемые в реализации, могут не соответствовать напрямую именам интерфейсов, используемым в стандарте DOM (и в этой книге). Во-вторых, один класс может реализовывать более одного интерфейса. Рассмотрим, например, объект Document. Этот объект является экземпляром некоторого класса, определенного реализацией веб-броузера. Мы не знаем, какой именно это класс, но знаем, что он реализует интерфейс Document; то есть все методы и свойства, определенные интерфейсом Document, доступны нам через объект Document. Поскольку веб-броузеры работают с HTML-документами, мы также знаем, что объект Document реализует интерфейс
HTMLDocument и что нам также доступны все методы и свойства, определенные этим интерфейсом. Кроме того, если веб-броузер поддерживает таблицы стилей CSS и реализует модуль CSS DOM, объект Document также реализует интерфейсы DOM DocumentStyle и DocumentCSS. И если веб-броузер поддерживает модули Events и Views, Document также реализует интерфейсы DocumentEvent и DocumentView.
Модель DOM разбита на независимые модули, поэтому в ней определяется несколько дополнительных второстепенных интерфейсов, таких как Docu-mentStyle, DocumentEvent и DocumentView, каждый из которых определяет только один или два метода. Подобные интерфейсы никогда не реализуются независимо от базового интерфейса Document, и по этой причине я не описываю их отдельно. Ознакомившись с описанием интерфейса Document в «Справочнике по W3C DOM», вы обнаружите, что в нем также перечислены методы и свойства различных дополнительных интерфейсов. Аналогично, посмотрев на описание дополнительных интерфейсов, вы просто найдете перекрестную ссылку на базовый интерфейс, с которым они связаны. Исключения из этого правила составляют случаи, когда дополнительный интерфейс сложен. Например, интерфейс HTMLDocument всегда реализуется тем же объектом, что реализует интерфейс Document, но так как HTMLDocument
добавляет значительный объем новой функциональности, я отвел ему отдельную справочную страницу.
Важно также понимать, что поскольку стандарт DOM определяет интерфейсы, а не классы, он не определяет никаких методов-конструкторов. Если, например, требуется создать новый объект Text для вставки в документ, то нельзя просто написать:
Var t = new Text("это новый текстовый узел"); // Такого конструктора нет!
Стандарт DOM не может определять конструкторы, но определяет в интерфейсе Document несколько полезных методов-фабрик для создания объектов. Поэтому для создания нового узла Text в документе надо написать:
Var t = document.createTextNode("это новый текстовый узел");
Методы-фабрики, определенные в DOM, имеют имена, которые начинаются со слова «create». Кроме методов-фабрик, определяемых интерфейсом Document, несколько таких методов определяются интерфейсом DOMImplementation и доступны через document.implementation.
Сегодня статья опять будет про PHP Simple Html DOM Parser . Даже несмотря на то, что некоторым читателям эта тема могла хорошенько поднадоесть. :) Просто хочется собрать на блоге достаточное количество материала, к которому можно было бы отсылать вопрошающих по емэйлу.
Итак, навигация по DOM-дереву . Прямо здесь. Прямо сейчас. На примерах. (Так как теоретически она и так описана в инструкции к библиотеке).
Если вы читаете эту статью, то вам уже известно, что такое DOM-структура, древовидное представление данных, узлы дерева, родитель, потомок и т.д.. Структуру html-документа в виде дерева можно наглядно посмотреть в Firebug-е.
Там же есть закладка DOM, с содержимым которой советую ознакомиться новичкам. Из структуры, которая там раскрывается, вы наглядно увидите результаты обращения к дочерним элементам, отдельным узлам, свойствам, атрибутам и т.д..
Но вернемся к PHP Simple Html DOM Parser.
Для примера возьмем простенький html-код с таблицей из трех столбцов и трех строк.
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
| 3.1 | 3.2 | 3.3 |
Для тех, кто не любит читать на английском, привожу перевод описания функций:
mixed $e->children ()
- возвращает N-ого потомка, если $index указан, или массив всех потомков, если индекс не указан.
element $e->parent ()
- возвращает родителя элемента.
element $e->first_child ()
- возвращает первого потомка элемента или null, если потомков нет.
element $e->last_child ()
- возвращает последнего потомка элемента или null, если потомков нет.
element $e->next_sibling ()
- возвращает следующего потомка элемента или null, если таковой не найден.
element $e->prev_sibling ()
- возвращает предыдущего потомка элемента или null, если таковой не найден.
children(N) эквивалентно childNodes(N).
Следующий код пройдет позволит обойти все ряды и столбцы таблицы:
$html = str_get_html($html_str);
foreach ($html->find("table", 0)->children() as $tr) {
foreach ($tr->children() as $td) {
echo $td->innertext."; ";
}
echo "
";
}
Если в переменной $html_str приведенный выше код таблицы, то результат будет:
1.1; 1.2; 1.3;
2.1; 2.2; 2.3;
3.1; 3.2; 3.3;
Тут, думаю, все понятно, проблем возникнуть не должно. Просто проходимся по массивам.
Следующий способ навигации - с помощью next_sibling. next_sibling и prev_sibling используют для навигации по элементам, находящимся на одном уровне (т.е. имеющих общего родителя). Для примера пройдемся по всем ячейкам первой строки таблицы. Код этой нехитрой операции будет выглядеть так:
$element = $html->find("table tr td",0);
while($element) {
echo $element->innertext."; ";
$element = $element->next_sibling();
}
Результатом будет:
1.1; 1.2; 1.3;
Вот, в принципе, и все. Постаралась коротко и ясно, без всякой воды.
Удачных разработок!
___
Чтобы быть в курсе обновлений блога, можно
Согласно модели DOM:
- Весь документ представляется узлом документа;
- Каждый HTML тэг является узлом элемента;
- Текст внутри HTML элементов представляется текстовыми узлами;
- Каждому HTML атрибуту соответствует узел атрибута;
- Комментарии являются узлами комментариев.
HTML документ
Заголовок
Просто текст
Пример 6.2
В этом примере корневым узлом является тэг . Все остальные узлы содержатся внутри . У этого узла имеется два дочерних узла: и . Узел содержит узел , а узел содержит узлы и
Следует обратить особое внимание на то, что текст, расположенный в узле элемента соответствует текстовому узлу. В примере HTML документ узел элемента содержит текстовый узел " HTML документ ", то есть " HTML документ " не является значением элемента . Тем не менее, в рамках HTML DOM значение текстового узла может быть доступно посредством свойства innerHTML.
Все узлы HTML документа могут быть доступны посредством дерева, при этом их содержимое может быть изменено или удалено, а также можно добавить новые элементы.
Все узлы дерева находятся в иерархических отношениях между собой. Для описания этих отношений используются термины родитель , дочерний элемент и потомок . Родительские узлы имеют дочерние узлы, а дочерние элементы одного уровня называются потомками (братьями или сестрами).
В отношении узлов дерева соблюдаются следующие принципы:
- Самый верхний узел дерева называется корневым;
- Каждый узел, за исключением корневого, имеет ровно один родительский узел;
- Узел может иметь любое число дочерних узлов;
- Конечный узел дерева не имеет дочерних узлов;
- Потомки имеют общего родителя.
Программный интерфейс HTML DOM
В рамках DOM модели HTML можно рассматривать как множество узловых объектов . Доступ к ним осуществляется с помощью JavaScript или других языков программирования. Программный интерфейс DOM включает в себя набор стандартных свойств и методов .
Свойства представляют некоторые сущности (например, ), а методы - действия над ними (например, добавить ).
К типичным свойствам DOM относятся следующие:
- x.innerHTML – внутреннее текстовое значение HTML элемента x ;
- x. nodeName – имя x ;
- x.nodeValue – значение x ;
- x.parentNode – родительский узел для x ;
- x.childNodes – дочерний узел для x ;
- x.attributes – узлы атрибутов x.
Узловой объект, соответствующий HTML элементу поддерживает следующие методы:
- x.getElementById(id) – получить элемент с указанным id ;
- x.getElementsByTagName(name) – получить все элементы с указанным именем тэга (name);
- x.appendChild(node) – вставить дочерний узел для x ;
- x.removeChild(node) – удалить дочерний узел для x.
Для получения текста из элемента
Со значением атрибута id "demo" в HTML документе можно использовать следующий код:
txt = document.getElementById("demo").innerHTML
Тот же самый результат может быть получен по-другому:
txt=document.getElementById("demo").childNodes.nodeValue
В рамках DOM возможны 3 способа доступа к узлам:
Для определения длины списка узлов используется свойство length.
x = document.getElementsByTagName("p");
for (i = 0; i < x.length; i++)
document.write(x[i].innerHTML);
document.write("
");
Присер 6.4
В данном примере внутрь HTML документа вставляется в виде списка текстовое содержимое всех элементов соответствующих тэгу
Для навигации по дереву в ближайших окрестностях текущего узла можно использовать следующие свойства:
- parentNode ;
- firstChild ;
- lastChild.
Для непосредственного доступа к тэгам можно использовать 2 специальных свойства:
- document.documentElement – для доступа к корневому узлу документа;
- document.body – для доступа к тэгу .
Свойства узлов
В HTML DOM каждый узел является объектом, который может иметь методы (функции) и свойства. Наиболее важными являются следующие свойства:
- nodeName ;
- nodeValue ;
- nodeType.
Свойство nodeName указывает на имя узла. Это свойство имеет следующие особенности:
Замечание : nodeName всегда содержит имя тэга HTML элемента в верхнем регистре.
Свойство nodeValue указывает на значение узла. Это свойство имеет следующие особенности:
- Свойство nodeValue узла элемента не определено;
- Свойство nodeValue текстового узла указывает на сам текст;
- Свойство nodeValue узла атрибута указывает на значение атрибута.
Свойство nodeType возвращает тип узла. Это свойство предназначено только для чтения:
Наиболее важными типами узлов являются следующие:
Изменение HTML элементов
HTML элементы могут быть изменены с посредством использования JavaScript, HTML DOM и событий.
В примере 6.5 показано, как можно динамически изменять текстовое содержимое тэга
Hello World!
document.getElementById("p1").innerHTML="New text!";
Пример 6.5.
Диалоговые элементы
В JavaScript поддерживается работа со следующими диалоговыми элементами интерфейса:
2. Синтаксис:
alert("сообщение");
4. Синтаксис:
confirm("вопрос");
7. Синтаксис:
prompt("вопрос/запрос","значение по умолчанию");
Ниже приводится код веб-страницы, в которой пользователь имеет возможность выбрать цвет текста с помощью диалогового элемента
// здесь будет отображаться текст
Вы выбрали цвет текста: черный
// пользователь выбирает цвет текста
var tcolor = prompt("Выберите цвет текста: red, blue, green, yellow, black","black");
// задается текст
document.getElementById("c").innerHTML = "Вы выбрали цвет текста: " + tcolor;
// задается цвет текста
document.getElementById("c").style.color = tcolor;
И XHTML, которые были определены в определениях собственного синтаксиса, HTML5 описывается определениями объектной модели документа (DOM) - употребляют внутреннее представление в виде дерева для отображения документа. К примеру, представьте для себя очень небольшой документ, состоящий из заголовка странички, заголовка и тела параграфа. Дерево DOM может смотреться так:
Дерево DOM содержит в себе title элемент в блоке head и h1 и p в body.
Преимущество описания HTML5 в определениях объектной модели документа в том, что язык может быть определен независимо от синтаксиса. Есть преимущественно два синтаксиса языка для представления документа: сериализация HTML (HTML5) и сериализация XML (XHTML5).
HTML относится к синтаксису пришедшему из SGML(ранешнего HTML), но определяется большей совместимостью с реальной поддержкой браузерами HTML на практике.
An HTML Document Example
Как и в прошлых версиях HTML, некие теги необязательны и автоматом предполагаются.
Сериализация XML происходит от синтаксиса XML 1.0 и места имен, также как XHTML 1.0.
An HTML Document Example
This is an example HTML document.
Исключая отличия в присутствии и отсутствии атрибута xmlns, эти два примера эквивалентны.
Браузеры употребляют MIME-тип для выбора. Хоть какой документ поданный как text/html должен удовлетворять требованиям спецификации HTML и хоть какой документ объявленный как XML MIME тип (таковой как application/xhtml+xml) должен подходить под спецификацию XML.
Создатели делают осознанный выбор что использовать, который может быть основан на ряде разных причин. Разработчики не должны без предпосылки выбирать один либо другой; каждый оптимизирован для разных ситуаций.
Достоинства использования HTML- Оборотная сопоставимость с существующими браузерами.
- Знакомый синтаксис.
- Неприхотливый синтаксис (не будет "Yellow Screen of Death" если будет допущена ошибка).
- Синтаксис допускающий опускание неких тегов и атрибутов.
- Серьезный синтаксис XML, который некие создатели сочтут комфортным для поддержки.
- Соединяется воедино впрямую с другими XML словарями (такими как SVG и MathML).
- Внедрение XML обработки.
Работа над HTML5 стремительно продвигается, но окончание ожидается только через пару лет. Для того чтоб сделать различные испытания и добиться взаимодействия реализаций удовлетворяющих требованиям по текущим оценкам будет нужно от 10 до 15 лет работы. В протяжении всего шага разработки отзывы от широкого круга пользователей, в том числе WEB дизайнеров, разработчиков, производителей CMS и средств разработки, производителей браузеров очень важны для заслуги фурора. Вклад в развитие HTML5 не только лишь приветствуется, да и интенсивно поощряется.
В дополнение к спецификации, есть некоторое количество других источников, предназначенных для того, чтоб люди лучше понимали процесс.
- The Differences from HTML 4 обрисовывает конфигурации по сопоставлению с предшествующей версией HTML
- The HTML Design Principles дискуссируются принципы, которые помогают принять решения. Они посодействуют для вас осознать базы имеющихся дизайнерских решений.
- The WEB Developer`s Guide to HTML5, не так давно открывшийся ресурс, сделанный, чтоб посодействовать WEB дизайнерам и разработчикам осознать все что они должны знать для написания конформных HTML5 документов. Предоставляются руководящие принципы и описываются наилучшие решения.
Есть много методов внести собственный вклад в разработку. Вы сможете присоединится к W3C`s HTML WG и подписаться/способствовать рассылкам HTML WG mailing lists либо wiki. Вы также сможете участвовать в форуме WHATWG forum, писать комментарии либо статьи в блоге WHATWG blog.