OuterHTML — чтениезапись dom объекта


Содержание
Илон Маск рекомендует:  Шаблон сайта недвижимость за границей HTML, CSS, JavaScripts, 2 страницы

innerHTML

Поддержка браузерами

Описание

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

Примечание: если текстовый узел элемента содержит символы «&», » «, то свойство innerHTML преобразует эти символы в «&», » » соответственно. Для получения правильной копии содержимого текстового узла используйте свойство textContent.

Синтаксис

При установке нового содержимого, сначала удаляется старое содержимое элемента, и только затем устанавливается новое.

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

DOM — Навигация по узлам

HTML DOM используя отношения между узлами позволяет перемещаться по дереву узлов.

Узлы DOM

Согласно стандарту HTML DOM, все в HTML документе является узлом:

  • Весь документ — узел документа
  • Каждый HTML элемент — узел элемента
  • Текст внутри HTML элементов — узел текста
  • Каждый HTML атрибут — узел атрибута (запрещен)
  • Все комментарии — узлы комментариев

С HTML DOM можно получить доступ ко всем узлам при помощи JavaScript. Можно создавать новые узлы, а существующие можно изменять или удалять.

Отношения между узлами

Узлы в дереве DOM имеют иерархические отношения между друг другом.

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

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

Из HTML кода, представленного выше, мы можем понять следующее:

  • — корневой узел
  • не имеет родителя
  • — родитель узлов и
  • — первый потомок узла
  • — последний потомок узла
  • имеет одного потомка —
  • имеет одного потомка (текстовый узел) — «Учебник по DOM»
  • имеет двух потомков —

— родственные (одного уровня) узлы

Перемещение между узлами


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

  • parentNode
  • childNodes[номер_узла]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Узлы-потомки и значения узлов

Обычная ошибка при работе с DOM — это ожидание, что узел элемента содержит текст.

Пример:

В приведенном примере узел элемента не содержит текст.

Он содержит текстовый узел со значением «Учебник по DOM».

Получить доступ к значению текстового узла можно при помощи свойства узла innerHTML:

Обращение к свойству innerHTML имеет тот же эффект как обращение к nodeValue первого потомка:

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

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

Пример 1

Пример 2

Пример 3

InnerHTML

В этом учебнике для доступа к содержимому HTML элемента мы используем свойство innerHTML.

Тем не менее, изучение других методов, представленных выше, полезно для лучшего понимания древовидной структуры DOM и того, как осуществляется навигация по его узлам.

Корневые узлы DOM

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

  • document.body – тело документа
  • document.documentElement – весь документ

Пример 1

Пример 2

Свойство nodeName

Свойство nodeName определяет имя узла.

  • nodeName — свойство только для чтения
  • nodeName узла элемента — это то же самое, что и имя тега
  • nodeName узла атрибута — это имя атрибута
  • nodeName текстового узла — это всегда #text
  • nodeName узла документа — всегда #document

Пример


Внимание! Свойство nodeName всегда содержит имя тега HTML элемента в верхнем регистре.

Свойство nodeValue

Свойство nodeValue определяет значение узла.

  • nodeValue для узлов элементов имеет значение null
  • nodeValue для текстовых узлов содержит сам текст
  • nodeValue для узлов атрибутов содержит значение атрибута

Свойство nodeType

Свойство nodeType имеет статус «только для чтения». Оно возвращает тип узла.

Пример

Наиболее важные свойства nodeType:

MSiter

Узел Тип Пример
ELEMENT_NODE 1
ATTRIBUTE_NODE 2 (запрещен)
TEXT_NODE 3 MSiter
COMMENT_NODE 8
DOCUMENT_NODE 9 Сам HTML документ (родитель )
DOCUMENT_TYPE_NODE 10

Тип 2 запрещен в HTML DOM (хотя работает). Он разрешен в XML DOM.

АйТи бубен

Инструменты пользователя

Инструменты сайта

Содержание

Object Document

Объект Document является корневым элементом для всего DOM дерева. Свойство document.documentElement ссылается на тег , который выступает в роли корневого элемента документа. Свойство document.body соответствует тегу , который в большинстве случаев представляет больший интерес, чем его родительский тег . Свойство body объекта Document представляет собой особое удобное свойство, через которое предпочтительно обращаться к тегу HTML документа.

getElementsByTagName

Обратите внимание: поскольку HTML теги нечувствительны к регистру, строки, передаваемые в getElementsByTagName(), также нечувствительны к регистру. То есть предыдущий код находит теги

, даже если в коде они выглядят как
. Метод getElementsByTagName() возвращает элементы в том порядке, в ко тором они расположены в документе. И наконец, если передать методу getElementsByTagName() специальную строку «*», он вернет список всех элементов в порядке их присутствия в документе.

getElementBy >

Для доступа к элементам страницы чаще всего используют идентификаторы элементов — атрибут «id». На странице располагаются несколько абзацев с идентификаторами «p1», «p2», … «p10». Сценарию необходимо перебрать все элементы и поменять цвет текста в них на заданный. Эта задача решается следующим образом:

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

Для изменения содержимого элемента можно использовать 2 свойства элементов:

Свойство innerText используется как для чтения, так и для записи текстового содержимого элемента. Если свойству innerText присвоить в качестве значения строку «Это полужирный текст», то строка появится на странице без изменений. Это говорит о том, что свойство innerText не интерпретируется браузером при выводе на страницу.

Листинг: Изменение содержимого элементов

style

Для изменения стиля элемента используется свойство style. Это свойство, в свою очередь, является объектом, содержащим множество свойств, соответствующих атрибутам стиля элемента в CSS . Правда синтаксис записи свойств стиля в JavaScript и в CSS несколько отличается. Ниже приведены правила, следуя которым вы сможете преобразовать названия свойств стилей из CSS в JavaScript:


Свойство document.cookie содержит все установленные Cookie.

document.write

Листинг: Использование метода ‘document.write()’

Коллекции объектов

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

JavaScript — DOM: свойства textContent, innerHTML и др.

На этом уроке мы рассмотрим свойства, предназначенные для работы с текстовым содержимым элемента ( textContent , innerText , outerText ) и свойства, предназначенные для работы с HTML содержимым элемента ( innerHTML , outerHTML ).

Свойство textContent

Свойство textContent позволяет получить текстовый контент указанного узла и всех его потомков. Данное значение можно представить как конкатенацию (сложение) все текстовых узлов, которые являются потомками узла, для которого вызывается данное свойство.

Если элемент, для которого вызывается свойство textContent , содержит один дочерний текстовый узел, то данное свойство вернёт значение этого текстового узла.

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

Например, изменить текстовый контент элемента р с :

Например, получить текстовый контент элемента ul с :

Свойства innerText и outerText

В отличие от свойства textContent , данное свойство ( innerText ) «как бы копирует» текст в веб-браузере, который отображается HTML кодом, расположенным между открывающим и закрывающим тегом того элемента, для которого вызывается данное свойство. Т.е. свойство innerHTML учитывает стили элементов, а именно отображается элемент или нет, а, следовательно, и его содержимое в браузере. Кроме этого данное свойство также ещё учитывает в каком элементе находится узел, содержащий текст. Например, содержимое элемента script данное свойство не учитывает, т.к. оно не отображается в браузере, а является сценарием, которое выполняется при определённых условиях.

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

Кроме свойства innerText также существует свойство outerText , которое возвращает текст аналогично свойству innerText . А вот при установлении значения свойству outerText для элемента, данное свойство заменяет не только содержимое расположенное между открывающим и закрывающим тегом элемента, но и сам элемент.

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

Свойства innerHTML и outerHTML

Свойство innerHTML устанавливает или возвращает HTML контент, расположенный между открывающим и закрывающим тегом элемента.

Например, получить и изменить HTML контент элемента р с :

Например, удалить HTML контент элемента p , имеющего :

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

Например, получить и изменить HTML контент списка ul , имеющего :

# 5 innerHTML. Изменяем содержимое DOM элемента

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

Давайте решим такую задачу. У нас есть два контейнера. Первый с каким-то текстом, а второй пустой. И мы хотим прочитать содержимое первого контейнера и записать в второй контейнер.

Давайте добавим два контейнера на страницу.


Теперь при нажатии кнопки change давайте найдем оба контейнера. Для этого мы можем использовать функцию querySelector, которую мы с вами уже знаем.

Теперь давайте прочитаем содержимое первого контейнера.

Давайте напишем console.log, чтобы посмотреть, что мы получили.

Если мы посмотрим в консоль, то мы увидим наш текст, но обратите внимание, что мы получили абсолютно все содержимое со всеми пробелами. Обычно нам нужен только текст, поэтому мы можем вызвать метод trim, чтобы удалить из строки все пробелы.

Если мы посмотрим в браузер, то у нас выводится строка без пробелов.

Как же теперь записать этот контент в второй контейнер? Очень просто. Используя все тот же innerHTML и присвоение.

Если мы посмотрим в браузер, то при клике change содержимое первого контейнера копируется в второй контейнер. Но нужно помнить, что присваивая что-то в innerHTML вы перезаписываете абсолютно все содержимое.

Давайте рассмотрим более сложный пример, который очень часто нужен. У нас много однотипных елементов на странице и нам нужно прочитать содержимое их всех, чтобы передать куда-то дальше.

Давайте добавим список напитков на страницу

Теперь мы хотим прочитать весь список и создать массив, в который мы запишем все елементы этого списка.

Итак сначала найдем все елементы списка

Теперь добавим пустой массив drinks, куда будем записывать все напитки

Теперь пройдем циклом по елементам и найдем контент каждого елемента

И запушим теперь каждое найденое название в массив. Для этого мы можем использовать метод push, который добавляет елемент в конец массива.

И после цикла давайте выведем в консоль массив. Если мы посмотрим в браузер, то у нас вывелся наш массив елементов и мы можем его передать куда угодно или изменить.

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

PHP DomDocument: как перезаписать (аналог outerHTML) элемент в цикле?

Подскажите, пожалуйста, как перезаписать текущий элемент в цикле, новым? Что-то типа метода outerHTML в JS.

Как элемент в цикле заменить на новый?

  • Вопрос задан 16 дек. 2020
  • 85 просмотров

Вы бы уточнили, что хотите получить на выходе.

Для начала — в строке в переменной $includes у вас DOMNodeList, который «could not be converted to string»

Для замены ноды есть метод «replaceChild», раз уж работаете с dom объектом, то забудьте о том, что какие-то элементы можно создавать передав обычную строку, для этого есть метод «createTextNode». Работает это так:

Если неправильно понял суть задачи, то пишите подробнее.

Необходимо на странице заменить это:
содержимое ссылки
на это (любой сконструированный элемент в виде строки (с мнемониками)):


Вот это не работает:

Если нужно просто заменить, то зачем нужна переменная $content?

Модель объектов 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.

Как получить ссылку на новый объект DOM после изменения содержимого с помощью outerHTML?

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

Есть ли способ напрямую обновить ссылку на переменную при вызове outerHTML (в моем случае ссылка на переменную div ниже)?


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

Лучше было бы создать новый div , добавить after() старый, а затем remove() старый. Это сохраняет положение div в правильном месте.

Использование outerHTML

Если вам действительно нужно использовать outerHTML, вы можете просто снова захватить $(this).prev() :

Я решил это, получив ссылочный элемент (родной или родительский) тега, который будет заменен.

Вот функция, которая не зависит от того, какой элемент вы собираетесь изменить:

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

Я надеюсь, что он будет работать и с jQuery, поскольку я пишу все свои скрипты только в собственном javascript.

Модель объектов 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.

OuterHTML — чтение/запись dom объекта

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

Советую внимательно прочитать «историко-теоретическую» часть, даже если она покажется нудной и не относящейся к делу. Когда перейдём к практической части, постараюсь быть проще и конкретнее. Но база для практики необходима.

Что такое DOM

Аббревиатура DOM расшифровывается как Document Object Model (объектная модель документа).

DOM — это программный интерфейс доступа к содержимому HTML, XHTML и XML-документов, то есть представление тэгов и атрибутов HTML, XHTML и XML, а также стилей CSS в виде объектов программирования. С этой моделью работает как JavaScript, так и другие языки web-программирования.

Существует 4 уровня DOM (0, 1, 2 и 3).

Уровень 0 (1996) включал в себя модели DOM, которые существовали до появления уровня 1. В основном это коллекции: document.images, document.forms, document.layers и document.all. Эти модели формально не являются спецификациями DOM, опубликованными W3C. Скорее они представляют информацию о том, что существовало до начала процесса стандартизации.

Уровень 1 (1997) включал также базовые функциональные возможности по обработке XML-документов: многочисленные способы работы с отдельными узлами, работа с инструкциями обработки XML и т.д.

Кроме того, DOM уровня 1 содержит ряд специальных интерфейсов, которые могут обрабатывать отдельные HTML-элементы. Например, можно работать с таблицами HTML, формами, списками выбора и т.д.

В DOM уровня 2 (2002) было добавлено несколько новых возможностей.

Если в DOM уровня 1 отсутствовала поддержка пространств имён, то интерфейсы DOM уровня 2 содержат методы для управления пространствами имён, связанными с требованиями к составлению и обработке XML-документов.

Помимо этого, DOM уровня 2 поддерживает события.

Уровень 2 является текущим уровнем спецификаций DOM, однако W3C рекомендует и некоторые разделы спецификаций уровня 3.

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

Что означает «программный интерфейс»?

Английское слово interface можно перевести как «область контакта». Компьютер, грубо говоря, понимает только две вещи: пустой бит и заполненный бит. Язык, на котором «говорит» компьютер, можно представить как нескончаемую вереницу нулей и единиц, дающих бесконечное количество различных комбинаций.

Любой программный код — это вразумительная для программиста интерпретация этих «нулей и единиц», с которыми работает компьютер. Таким образом, любой язык программирования является интерфейсом человека и машины.

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

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

DOM и JavaScript

В JavaScript вершиной иерархической лестницы объектов DOM, своеобразным «проводником» в этот интерфейс служит объект document, а объекты DOM становятся его свойствами, свойствами его свойств и т.д. Их также называют узлами DOM.

Узлы DOM

В DOM уровня 2 есть 12 типов узлов. За каждым типом узла DOM закреплена константа с уникальным именем. Большинство узлов предназначено для работы с XML. В сборке HTML — JavaScript, которой мы занимаемся, можно использовать только 5 типов. Но и эта «верхушка айсберга» представляет собой весьма «развесистое дерево», которое не охватить за одно-два занятия.

Полный набор констант типов узлов, определённый в спецификации W3C DOM (голубым подсвечены узлы, доступные для HTML — JavaScript):

Узел элемента (возвращает корневой элемент документа, для HTML-документов это элемент HTML)

Узел атрибута (возвращает атрибут элемента XML- или HTML-документа)

Текстовый узел (#text)

Узел секции CDATA (XML: альтернативный синтаксис для отображения символьных данных)

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