Динамический HTML и Объектная Модель Документа

Некоторые методы объекта window

Метод alert (предупреждение) открывает модальное окно сообщения с введенным в качестве аргумента текстом и единственной кнопкой.

window.alert('Всем привет');

Метод confirm (подтверждение) открывает диалоговое окно с сообщением и кнопками "ОК" и "Отмена". Метод возвращает true, если пользователь нажал "ОК" и false в противном случае.

if (window.confirm('Хотите продолжить?') == true)
      RunMyScript();

Метод prompt (подсказка) открывает диалоговое окно с полем однострочного ввода и двумя кнопками. Метод возвращает введенную строку, если пользователь нажал "ОК" или null, если "Отмена".

var name = window.prompt('Ваше имя:', 'не помню');
    if (name != null)
      document.write("Добро пожаловать, " + name);
    else
      document.write("Добро пожаловать, неизвестный");

Метод setTimeout планирует выполнение определенной разработчиком функции через указанное время в миллисекундах и возвращает целочисленный идентификатор процесса, который может быть использован для отмены действия при помощи метода clearTimeout.

function MyAction() {
      alert("Приступайте к действиям");
    }
    var iTimer = window.setTimeout(MyAction, 10000);
    // обратите внимание на отсутствие скобок после MyAction
    // вариант: window.setTimeout("MyAction()", 10000);

    function StopAlert() {
      window.clearTimeout(iTimer);
    }

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

Метод setInterval выполняет указанное действие многократно через указанный промежуток времени в миллисекундах. Синтаксис метода аналогичен setTimeout. Повторы могут быть остановлены методом clearInterval.

<div id="clock">
  </div>

  <button type="button" onclick="StopClock()">
    Остановить часы</button>

  <script type="text/javascript">
    function MyClock() {
      var d = new Date(); //текущие дата и время компьютера пользователя
      document.getElementById('clock').innerHTML = d.toTimeString();
    }
    var iClock = window.setInterval(MyClock, 1000);

    function StopClock() {
      window.clearInterval(iClock);
    }
  </script>

В этом примере функция MyClock выполняется каждую секунду. При выполнении функция получает системные дату и время локального компьютера (через объект Date ) и отображает время в блоке с id="clock". Часы могут быть остановлены нажатием кнопки, которая вызывает функцию StopClock.

Метод open открывает новое окно браузера и загружает в него документ из указанного адреса.

var oNewWindow = window.open(sURL, sName, sFeatures, bReplace);

Все аргументы метода необязательны.

Возвращаемое значение ( oNewWindow ) является ссылкой на открываемое окно (объект window ) и открывает доступ к его свойствам и методам.

Окно, открытое методом window.open имеет свойство opener, являющееся ссылкой на объект window, в контексте которого был выполнен метод open.

Метод close закрывает окно. Если окно не было открыто методом open, то выдается предупреждение о том, что сценарий пытается закрыть текущее окно.

Объект document

Объект window содержит единственный объект document – HTML-документ. По разнообразию свойств и методов объект document не уступает объекту window. Именно через объект document осуществляется доступ к содержимому HTML-документа. Вот некоторые свойства и методы объекта document.

Объект body

Объект body представляет собой HTML-элемент body. Это специальный случай, поскольку элемент body в документе единственный. Для обращения к остальным элементам документа могут использоваться стандартные методы объекта document.

Коллекция all

Коллекция all поддерживается только Internet Explorer и содержит все элементы HTML-документа.

Коллекция anchors

Коллекция anchors содержит все гиперссылки (объекты a ), которые имеют атрибуты name или id. Эта коллекция полезна при создании списка гиперссылок.

Массив images

Массив document.images содержит все изображения (элементы img ), загруженные вместе с документом. Каждое изображение загружается на страницу отдельным файлом, и в случае динамической замены одного изображения другим может потребоваться время для загрузки нового файла. Чтобы избежать этого, можно заранее загрузить изображения, которые будут храниться в кэше браузера, откуда они доступны немедленно.

...
  <img src="myImg.jpg" onmouseover="this.src='myImg_over.jpg'">
  ...

  <script type="text/javascript">
    function ImagePreload() {
      var img = new Image();
      img.src = 'myImg_over.jpg';
    }
    window.onload = ImagePreload;
  </script>

  ...

Коллекция forms

Коллекция forms содержит все HTML-формы, определенные в документе. Доступ к каждому из объектов form возможен по индексу или по имени (если элемент form имеет атрибут name, не являющийся стандартным).

Свойство cookie

Cookie (буквально, печенье) – это небольшие фрагменты информации, хранимые браузером. Каждая cookie представляет собой пару имя=значение. Cookie может хранить до 20 таких пар. Cookie являются механизмом хранения пользовательских настроек и поддержания диалога между веб-сервером и браузером. веб-сервер может отправлять браузеру инструкцию SetCookie с парами имя=значение, и браузер возвращает эту же пару серверу (только тому, который установил cookie ) при каждом запросе, что позволяет серверу установить, с кем (чем) ведется диалог. Cookie имеют время жизни. Если параметр expires (истечение срока) не задан или установлен на дату в прошлом, то cookie не сохраняются на диске локального компьютера и уничтожаются при закрытии браузера. Если параметр expires установлен на дату в будущем, то cookie сохраняются на диске в виде текстового файла и автоматически удаляются по истечении срока годности.

Cookie могут также читаться и создаваться в браузере при помощи языков сценариев. Свойство document.cookie представляет собой строку, содержащую пары имя=значение, разделенные точкой с запятой и пробелом ("; "). Таким образом, для получения отдельных значений требуется разбор строки.

<script>
    // Создает куки с определенными именем и значением.
    // срок действия установлен до конца XXI века.
    function SetCookie(sName, sValue) {
      document.cookie = sName + "=" + escape(sValue)
    + "; expires=Fri, 31 Dec 2099 23:59:59 GMT;";
    }

    // Возвращает значение куки по его имени.
    function GetCookie(sName) {
      // пары разделены "; "
      // метод split расщепляет строку на массив строк
      var aCookie = document.cookie.split("; ");
      for (var i = 0; i < aCookie.length; i++) {
        // теперь следует расщепить каждую пару имя=значение
        var aCrumb = aCookie[i].split("=");
        if (sName == aCrumb[0])
          return unescape(aCrumb[1]);
      }
      // Куки с запрошенным именем не существует
      return null;
    }

    // Удаляет куки с заданным именем.
    function DelCookie(sName) {
      document.cookie = sName + "=; expires=Fri, 21 Dec 1976 04:31:24 GMT;";
    }
  </script>

Поиск элемента по id

Элемент может быть найден в документе по его id.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Поиск по id</title>

  <script type="text/javascript">
    function ShowDetails() {
      var elem = document.getElementById('details');
      elem.style.display = 'block';
    }
  </script>

</head>
<body>
  <p>
    Нажмите кнопку для просмотра подробностей</p>
  <button type="button" onclick="ShowDetails()">
    Подробности
  </button>

  <div id="details" style="display: none">
    Здесь описаны все подробности.
  </div>

</body>
</html>

В этом примере метод объекта document (HTML-документ) getElementById ищет элемент, атрибут id которого равен указанному (в данном примере "details"); строчные и заглавные буквы в значении атрибута различаются.

Internet Explorer предлагает более простой доступ к элементу по его id. Достаточно просто указать id элемента.

function ShowDetails() {
      details.style.display = 'block';
    }

Следует иметь в виду, что такой подход не является стандартным и не гарантирует обнаружение элемента в других браузерах. Использование DOM метода getElementById гарантирует работу в большинстве браузеров. Предполагается, что id задает уникальный в пределах документа идентификатор элемента.

Поиск групп элементов

DOM-метод getElementsByTagName ищет элементы по имени HTML-тэга в пределах элемента, в контексте которого выполняется метод.

// коллекция таблиц в документе
    var oTables = document.body.getElementsByTagName('table');
    document.write("В документе " + oTables.length + " таблиц");

    // коллекция ячеек первой таблицы
    var oCells = oTables[0].getElementsByTagName('td');

DOM-метод getElementsByName ищет элементы в документе по значению атрибута name 
(атрибут name поддерживают управляющие элементы HTML-формы).
  <form method="post" action="form.php">
    <input type="text" name="UserName" />
    <input type="radio" name="Age" value="1" />18 – 24
    <input type="radio" name="Age" value="2" />25 – 35
    <input type="radio" name="Age" value="3" />36 – 55
  </form>
...
    //все элементы переключателя
    var oAge = document.getElementsByName('Age');
    // текстовое поле UserName
    var oUserName = document.getElementsByName('UserName')[0];
    // даже если найден единственный объект,
    // он является элементом массива

    // Тот же результат во всех браузерах:
    var oForm = document.forms[0];
    var oAge = oForm.Age; // массив элементов
    var oUserName = oForm.UserName; //единственный элемент

Замечание: Методы getElementById, getElementsByName и getElementsByTagName доступны только после полной загрузки документа. Например, следующий код не работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript">
    document.getElementById('MyDiv').innerHTML = "Hello";
  </script>
</head>
<body>
  <div id="MyDiv">
  </div>
</body>
</html>

Программное создание, удаление и модификация HTML-элементов

DOM модель представляет HTML-документ в виде дерева, в узлах которого находятся HTML-элементы. Каждый узел дерева (кроме корневого) имеет единственный родительский узел ( parentNode ) и может иметь дочерние ( childNodes ) и "братские" ( siblings ) узлы, т.е. узлы, имеющие общего родителя. Модификация документа DOM-методами заключается в создании нового элемента и размещения его в определенном узле, удалении или изменении узла.

Следующий пример показывает создание списка опций в форме в ответ на выбор пользователя с использованием DOM-методов createElement (создать HTML-элемент), appendChild (добавить элемент к родительскому элементу в качестве дочернего) и removeChild (удалить дочерний элемент).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Песенка-загадка</title>
</head>
<body>
  <form method="get" action="form1.htm">
  Из чего же сделаны наши
  <input type="radio" name="Gender" value="m" onclick="CreateList('m')" />мальчишки
  <input type="radio" name="Gender" value="f" onclick="CreateList('f')" />девчонки
  <div id="divList">
    <!-- Здесь мы поместим ответы-->
  </div>

  <input type="submit" value="Отправить" />
  <input type="reset" value="Сброс" />
  </form>

  <script type="text/javascript">
    function CreateList(listType) {
      var maleOptions = ["веснушки", "хлопушки", "линейки", "батарейки"];
      var femaleOptions = ["цветочки", "звоночки", "тетрадки", "переглядки"];

      //ищем элемент(ы) по имени
      var oSelect = document.getElementsByName('Interest');

      if (oSelect  oSelect[0])
      //если элемент найден, удаляем его из родительского узла
        oSelect[0].parentNode.removeChild(oSelect[0]);

      // создаем элемент select (список опций)
      oSelect = document.createElement('select');
      oSelect.name = 'Interest';
      oSelect.multiple = true; //разрешаем множественный выбор
      var opArray = null;
      // выбираем массив опций в зависимости от выбора пользователя
      if (listType == 'm')
        opArray = maleOptions;
      else
        opArray = femaleOptions;
      for (var i = 0, n = opArray.length; i < n; i++) {
        //создаем элемент
        var op = document.createElement('option')
        op.innerHTML = opArray[i];
        //добавляем в новый элемент в конец списка
        oSelect.appendChild(op);
      }
      //список еще не виден. добавляем его в родительский узел
      document.getElementById('divList').appendChild(oSelect);
    }
  </script>

</body>
</html>

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

Вопросы