Введение

by 1 contributor:

This translation is incomplete. Please help translate this article from English.

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

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

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

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

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

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

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

Все свойства, методы и события доступные для управления и создания новых страниц организованны в виде объектов. (например объект document который представляет сам документ, объект таблица который реализует специальный интерфейс DOMHTMLTableElement необходимый для доступа к HTML таблицам, и так далее). Данная документация обеспечивает ссылку на объекты реализованных в DOM в Gecko подобных браузерах

DOM и JavaScript

Короткий пример ниже, практически как и все примере в этом разделе – это JavaScript. К слову, написанны на JavaScript, но при этом используется DOM для доступа к документу и его элементов. DOM – не является языком программирования, но без него, JavaScript он не имел бы никакой модели или представления о веб-странице, XML странице и элементами с которыми они обычно связанны. Каждый элемент в документе - и весь документ в целом, заголовок, таблицы вместе с документами, заголовки таблицы, текст вместе с ячейками таблицы - это части объектной документной модели для этого документа, поэтому все они могут быть доступны и могут изменяться с использованием языка описания скриптов подобных 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, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.

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

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

В следующем примере внутри элемента <script> определен код 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>

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

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

 

Метки документа и участники

Contributors to this page: Azijkes
Обновлялась последний раз: Azijkes,