Программирование объектов на странице

Введение

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

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

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

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

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

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

в документе.

= document.getElementsByTagName("P"); // paragraphs[0] это первый 
элемент // paragraphs[1] это второй 
элемент и т.д. alert(paragraphs[0].nodeName); 

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

DOM и JavaScript

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

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

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

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

# Пример DOM на языке Python import xml.dom.minidom as m doc = m.parse("C:\\Projects\\Py\\chap1.xml"); doc.nodeName # Свойство объекта документа DOM; p_list = doc.getElementsByTagName("para"); 

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

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

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

При создании сценария с использованием элемента , либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы document или window (en-US) для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции alert() (en-US) объекта window (en-US) , или использовать более сложные методы DOM, которые создают новое содержимое, как показано в следующем примере:

body onload="window.alert('добро пожаловать на мою домашнюю страницу!');"> 

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

html> head> script> // запуск данной функции при загрузке документа window.onload = function()  // создание нескольких элементов // в пустой HTML странице heading = document.createElement("h1"); heading_text = document.createTextNode("Big Head!"); heading.appendChild(heading_text); document.body.appendChild(heading); > script> head> body> body> html> 

Важные типы данных

Данный раздел предназначен для краткого описания различных типов и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в данном разделе обычно ссылается на узлы как на element s, на массивы узлов как на nodeList s ( либо просто element s ) и на атрибуты узла, просто как на attribute s.

Ниже таблица с кратким описанием этих типов данных.

Массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами:

Эти способы эквивалентны. В первом способе item() — единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке.

DOM-интерфейсы (DOM interfaces)

Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий HTML form элемент, берёт своё свойство name из интерфейса HTMLFormElement , а свойство className — из интерфейса HTMLElement . В обоих случаях свойство, которое вы хотите, находится в этом объекте формы.

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

Интерфейсы и объекты (Interfaces and objects)

Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный HTML Table Element Interface, который включает такие методы как createCaption и insertRow . Но так как это таблица — это ещё и HTML-элемент, table реализует интерфейс Element , описанный в разделе DOM element Reference. Наконец, так как HTML-элемент (в смысле DOM) — это узел ( node) в дереве, которое составляет объектную модель для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс Node , из которого происходит Element .

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

var table = document.getElementById("table"); var tableAttrs = table.attributes; // Node/Element interface for (var i = 0; i  tableAttrs.length; i++)  // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; > // HTMLTableElement interface: summary attribute table.summary = "note: increased border"; 

Основные интерфейсы в DOM (Core interfaces in the DOM)

Этот раздел перечисляет несколько самых распространённых интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчёт видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространённые части API использованы в большинстве примеров раздела DOM Examples в конце этой справки.

Document, window — это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект window представляет что-то вроде браузера, а объект document — корень самого документа. Element наследуется от общего интерфейса Node , и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом table в предыдущем случае.

Ниже представлен краткий список распространённых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:

• document.getElementById(id)
• document.getElementsByTagName(name)
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute
• element.getAttribute
• element.addEventListener
• window.content (en-US)
• window.onload (en-US)
• window.dump (en-US)
• window.scrollTo

Тестирование DOM API

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

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

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

html> head> title>DOM Teststitle> script type="application/javascript"> function setBodyAttr(attr, value) if (document.body) eval('document.body.'+attr+' token operator">+value+'"'); else notSupported(); > script> head> body> div style="margin: .5in; height: 400;"> p>b>tt>texttt>b>p> form> select onChange="setBodyAttr('text', this.options[this.selectedIndex].value);"> option value="black">black option value="darkblue">darkblue select> p>b>tt>bgColortt>b>p> select onChange="setBodyAttr('bgColor', this.options[this.selectedIndex].value);"> option value="white">white option value="lightgrey">gray select> p>b>tt>linktt>b>p> select onChange="setBodyAttr('link', this.options[this.selectedIndex].value);"> option value="blue">blue option value="green">green select> small> a href="http://www.brownhen.com/dom_api_top.html" id="sample"> (sample link)a>small>br> form> form> input type="button" value="version" onclick="ver()" /> form> div> body> html> 

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

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

Другие статьи

Found a content problem with this page?

Источник