Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 10:

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

Поиск элемента по 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 существенно упрощает процесс программирования и поэтому весьма популярно.

Вопросы

  1. Для чего используется динамический HTML? Какие технологии он сочетает?
  2. Что такое Объектная Модель Документа и какую роль играет она в динамическом HTML?
  3. Кратко охарактеризуйте объекты window, history, navigator, document, location, screen.
  4. Перечислите и охарактеризуйте наиболее часто употребляемые методы объекта window.
  5. Что такое cookie? Как создавать и читать cookies?
  6. С помощью какого метода можно найти в документе элемент по его id?
  7. С помощью какого метода можно найти в документе все элементы определённого типа?
  8. Какие методы DOM используются для создания и удаления элементов?
  9. Что даёт свойство innerHTML?
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Галина Матрук
Галина Матрук
Молдова, Республика, Кишинев, UTM, 2010