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

Примеры 01–05

Пример 01

Следующая функция добавляет новый абзац с текстом text в конец документа: 


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

Смотрите: Пример 01

Пример 02

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

Смотрите: Пример 02

Пример 03

Показан пример использования методов hasAttributes и hasChildNodes.

Смотрите: Пример 03

Пример 04

Следующая функция вставляет новый абзац с текстом text в начало документа: 


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

Смотрите: Пример 04

Пример 05

Поставим задачу циклично переставлять элементы страницы при помощи кнопки (в том числе и саму кнопку) — при каждом нажатии текущий последний элемент должен перемещаться на первое место.

Пусть HTML-файл содержит следующий код: 


<BODY>
  <H1>Пример 05</H1>
  <HR>
  <P>
&laquo;Легко на сердце от песни весёлой!&raquo; 
  </P>
  <P>
<BUTTON id="button">Переставить</BUTTON>
  </P>
</BODY>

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


// Переставить последний элемент на место первого.
// Вставляемый элемент автоматически удаляется со старого места
document.body.insertBefore(document.body.lastChild,document.body.firstChild);

Однако такая простая реализация демонстрирует странное поведение кнопки — она вроде бы работает, но не с первого раза! (В IE-6, правда, кнопка работает, как предполагалось.)

Давайте разберёмся, в чем причина. Для этого проанализируем DOM, который построил браузер для приведенного выше HTML-кода. Ожидается, конечно, следующее дерево: 


BODY
..H1
...."Пример 05"
..HR
..P
....&laquo;Легко на сердце от песни весёлой!&raquo;
..P
....BUTTON
......"Переставить"

А теперь запустим «Инспектор DOM» в браузере Firefox (Инструменты/Инспектор DOM) и увидим такую картину: 


BODY
..#text
..+H1
..#text
..+HR
..#text
..+P
..#text
..+P
..#text

Знак «+» означает, что узел имеет потомки, и щелчок на «+» их показывает (то есть дерево демонстрируется подобно дереву папок в Проводнике Windows). Это понятно. Но почему вместо 4 детей узла BODY инспектор показывает 9, четыре предсказуемых (H1, HR, P, P) и пять текстовых (#text — обозначение текстового узла), непонятно откуда взявшихся?

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

Теперь понятно, почему кнопка «Переставить» работает через раз. Первый раз она переставляет пробелы, и на экране ничего не меняется.

Конечно, мы не станем писать свой HTML без структурной лесенки в одну строку. Мы просто удалим все лишние текстовые узлы, которые являются прямыми потомками BODY, и тогда простой код: 


document.body.insertBefore(document.body.lastChild, document.body.firstChild);

будет работать как надо.

Смотрите: Пример 05