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

Краткое описание интерфейса Document

Свойства

documentElement

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

body — свойство подинтерфейса HTMLDocument

Свойство подинтерфейса HTMLDocument. Ссылка на объект, построенный для элемента BODY.

Разработчики W3C разработали DOM таким образом, чтобы эта модель документа была универсальной, не зависящей от языка, при помощи которого документ создан. В частности, интерфейс Document работает и для HTML, и для XML, но для HTML предусмотрен специальный подинтерфейс HTMLDocument, который вводит дополнительные свойства и методы, предназначенный для реализаций документа на HTML. В этом подинтерфейсе, в частности, если полезное свойство body, которое ссылается на объект, построенный для элемента BODY.

К подинтерфейсу HTMLDocument относятся все свойства-коллекции ранней модели DOM: anchors, applets, forms, images и links.

Методы

addEventListener(тип, обработчик, фазаЗахвата)

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

createAttribute(name)

Метод-фабрика. Создает узел Attr со свойством nodeName, равным значению аргументу name (то есть создается атрибут с именем name). Метод возвращает созданный узел.

createDocumentFragment()

Метод-фабрика. Создает и возвращает узел DocumentFragment, не содержащий дочерних узлов.

createElement(tag)

Метод-фабрика. Создает и возвращает узел Element с указанным именем тега.

createTextNode(str)

Метод-фабрика. Создает и возвращает узел Text с указанной строкой текста.

getElementById(id)

Возвращает узел Element с указанным атрибутом id или null, если такого элемента нет.

getElementsByTagName(tag)

Возвращает «живой» объект подобный массиву (только для чтения) всех узлов Element с указанным именем тега. В качестве аргумента допустимо использовать строку "*".

Пример

praxis/13/examples/03/index.htm

Файл index.htm 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <META http-equiv="Content-Script-Type" content="text/javascript">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Пример 03</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 03</H1>

     <P>
&laquo;Главное ребята&nbsp;&mdash; <EM>сердцем</EM> не стареть!&raquo; 

     <P>
<BUTTON id="button">Анализ первого абзаца</BUTTON>
  </BODY>
</HTML>

Файл main.js 


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  var first = true;
  // Назначить обработчик события onclick элементу с id="button"
  document.getElementById("button").onclick = function ()
  {
    if (first) // Однократная работа обработчика
    {
      // Метод getElementsByTagName возвращает массив узлов с заданным тегом 
      // Получить доступ к первому абзацу документа 
      var fp = document.getElementsByTagName("p")[0]; 
      var attr = "не знаю, есть ли атрибуты";
      if (fp.hasAttributes) // Проверим, поддерживает ли браузер этот метод
        attr = fp.hasAttributes() ? "есть атрибуты" : "нет атрибутов";
      var child = "не знаю, есть ли дочерние узлы";
      if (fp.hasChildNodes) // Проверим, поддерживает ли браузер этот метод
        child = fp.hasChildNodes() ? "Есть дочерние узлы" : "Нет дочерних узлов";
      var text = "В первом абзаце " + attr + ".  " + child + ".";
      // Добавить абзац к документу
      appendP(text);
      first = false; // Чтобы больше внутренность if не работала
    }  
  };

  // Добавить абзац к документу
  function appendP(text)
  {
    // Создадим элемент "абзац"
    var el = document.createElement("p"); 
    // Добавим к созданному элементу потомка -- текстовый элемент 
    el.appendChild(document.createTextNode(text));
    // Добавим построенный элемент к BODY -- и он сразу отобразится на экране
    document.body.appendChild(el);
  }
};
getElementsByName(name) — метод подинтерфейса HTMLDocument

Возвращает «живой» объект подобный массиву (только для чтения) всех узлов Element с указанным значением атрибута name. Если таких элементов нет, возвращает массив нулевой длины.

Кроме того, подинтерфейс HTMLDocument поддерживает старые методы: write, writeln, open, close.