НОУ ИНТУИТ | Введение в современные веб-технологии. Лекция 10: Динамический HTML и Объектная Модель Документа

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

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

|

Вам нравится? Нравится 74 студентам

| Поделиться |

Поддержать программу

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

Вопросы

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

Дальше >>

Web-дизайн

Введение в современные веб-технологии

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

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

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

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

Вопросы

Вопросы и ответы

Авторизоваться

Web-дизайн

Введение в современные веб-технологии

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

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

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

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

Вопросы

Вопросы и ответы