Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 324 / 21 | Длительность: 11:36:00
Специальности: Программист
Лекция 8:

Использование объектной модели документа для манипулирования содержимым страницы мобильного виджета

Аннотация: Использование объектной модели документа DOM (Document Object Model). Работа DOM со страницей и с JavaScript. Наиболее употребляемые свойства объектов DOM. Примеры использования методов и свойств DOM для мобильных приложений. Canvas - холст для рисования в мобильных приложениях. Представление о сетке. Подготовка тега <canvas> к созданию рисунка. Разработка рисунка. Примеры использования <canvas> для мобильных приложений под Windows Phone.

Использование объектной модели документа

Используемая в HTML5 объектная модель документа (DOM, Document Object Model) представляет собой иерархическое дерево. В основании (корне) каждой html-страницы или документа располагается тег <html>, а остальные элементы являются ветвями на этом дереве. JavaScript использует DOM для обращения к html-странице и выполнения с ней дополнительных манипуляций, помимо того, что можно сделать, используя только HTML5. Целиком дерево модели DOM является представлением документа, расположенного в памяти мобильного устройства.

Для того чтобы обратиться к любой части дерева DOM, необходимо составить ссылку на элемент внутри дерева, начав с объекта document. Обращение к любому элементу дерева выполняется в порядке иерархии, начиная с объекта document. Различные элементы html-страницы являются различными свойствами или методами (встроенными функциями) объекта document и отделяются точкой (.). Например:

  • document.body - свойство объекта document, выполняющее обращение к тегу <body>;
  • document.getElementByld("day_Image") - метод объекта document, выполняющий получение данных элемента HTML с идентификатором day_Image.

Помимо функций документа, для манипулирования областью просмотра html-страницы будут полезны и несколько встроенных функций корневого элемента window.

Работа DOM со страницей и с JavaScript

Для лучшего понимания того, каким образом DOM работает с вашей страницей и JavaScript, будет полезно посмотреть, что можно сделать с просматриваемой частью вашей html-страницы. Следует отметить, что с точки зрения JavaScript html-страница является чем-то большим, чем просто статическим блоком кода HTML. Для этого кода каждый элемент разметки является объектом, который можно исследовать и модифицировать.

Самый простой способ получить доступ к объекту - это присвоить ему однозначное имя с помощью атрибута id объекта. Вот пример присвоения имени объекту:

<h1 id="pageTitle">Это мой заголовок</h1>

Элемент, которому присвоено однозначное имя, можно с легкостью найти в коде и манипулировать им посредством кода JavaScript.

Для поиска объектов в JavaScript применяется метод getElementByid() объекта document. По большому счету, document - это объект, который представляет весь документ HTML. Он имеет значительное количество полезных свойств и методов. Метод getElementByid() является одним из самых полезных - с его помощью можно просканировать html-страницу, чтобы найти требуемый элемент HTML.

При вызове метода document.getElementByid() ему передается идентификатор элемента HTML, который требуется найти. В следующем примере показан код для получения элемента HTML с идентификатором pageTitle:

var titleObject = document.getElementByid("pageTitle");

Этот код получает объект элемента <h1>, который был показан ранее, и сохраняет его содержимое ("Это мой заголовок") в переменной titleObject. Над сохраненным в переменной объектом можно выполнять разные операции, не требуя поиска его каждый раз для каждой операции.

Какие же операции можно выполнять над объектами HTML? В некоторой степени, ответ зависит от типа элемента, с которым мы работаем. Например, если объект - гиперссылка, можно изменить его URL, а если объект - изображение, то можно изменить его источник. Некоторые операции можно выполнять почти со всеми элементами HTML, например, изменять стиль или текст между открывающим и закрывающим тегами. Эти возможности позволяют сделать страницы динамическими, например, изменить внешний вид страницы, когда пользователь исполняет на ней какое-либо действие, скажем, щелкает по ссылке. Подобные ответные действия вызывают у пользователя чувство взаимодействия с интеллектуальной, реагирующей на его действия программой, а не простой, инертной html-страницей. Далее приведен пример, как можно модифицировать текст нашего подопытного элемента <h1>:

titleObject.innerHTML = "Мой заголовок изменился";

Этот код присваивает свойству innerHTML объекта titleObject (это наш элемент <h1>) текстовое значение, которое отображается как содержимое этого элемента. Свойство innerHTML - это всего лишь один аспект объекта HTML, который можно изменять. При создании кода для работы со свойствами объектов нужно знать, какие свойства JavaScript разрешает модифицировать.

Очевидно, что некоторые свойства относятся только к определенным элементам HTML, например атрибут src, который используется для загрузки изображения в элемент <img>:

var imgObject    = document.getElementByld("dayImage");
daylmage.src =    "cloudy.jpg";

А посредством свойств объекта style можно изменять свойства CSS:

titleObject.style.color = "rgb(0,191,255)";

Современные мобильные браузеры поддерживают огромный список свойств DOM, которые можно использовать практически со всеми элементами HTML [1-4]. Некоторые из наиболее полезных свойств приведены в следующей таблице.

Таблица 13.1. Наиболее употребляемые свойства объектов HTML
Свойство Описание
className Позволяет получить или установить атрибут class. Иными словами, это свойство определяет применяемые элементом стили (если таковые используются). Конечно же, этот стиль нужно сначала определить во встроенной или связанной со страницей таблице стилей, иначе получится простое форматирование по умолчанию.
innerHTML Позволяет считывать или изменять содержимое элемента HTML. Свойство innerHTML очень полезно, но имеет две особенности. Первая: его можно использовать на всем содержимом HTML, включая текст и теги. Поэтому вставить в абзац полужирный текст можно, присвоив свойству innerHTML значение <b>Текст</b>. Вторая: присвоенное свойству innerHTML новое значение затирает все старое содержимое этого элемента, включая все другие элементы HTML. Таким образом, если присвоить новое значение свойству innerHTML элемента <div>, который содержит несколько абзацев текста и изображений, все будет заменено новым содержимым.
parentElement Предоставляет HTML-объект элемента, содержащего текущий элемент. Например, если текущий элемент является элементом <b> в абзаце <p>, это свойство возвращает объект этого элемента <p>. Полученный таким образом объект также можно модифицировать.
style Объединяет все атрибуты CSS, которые определяют внешний вид элемента HTML. Свойство style возвращает полноценный объект style и для изменения атрибута стиля нужно добавить еще одну точку, а потом название этого атрибута. Например, myElement.style.fontsize. С помощью объекта style можно устанавливать цвет, границы, шрифт и даже позиционирование элемента.
tagName Предоставляет название элемента HTML для данного объекта без угловых скобок. Например, значением tagName элемента <img> будет текст img.

Далее приводится пример работы программы, содержащей функцию, которая меняет содержимое тегов <img> местами и изменяет соответствующие им подписи, используя свойства DOM:

Полный текст разметки, содержащий JavaScript - программу имеет вид:

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<script type="text/javascript">
    var flag = true;
    function swapImage() {
        var image_Object1 = document.getElementById("Dog");
        var image_Object2 = document.getElementById("Boy");
        if (flag == true) {
            flag = false;
            Boy.src = "Images/Dog.jpg";
            Dog.src = "Images/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "Мальчик ВИТЯ";
            document.getElementById("Caption_Boy").innerHTML = "БОБИК";

        }
        else {
            flag = true;
            Dog.src = "Images/Dog.jpg";
            Boy.src = "Images/boy.jpg";
            document.getElementById("Caption_Dog").innerHTML = "ЖУЧКА";
            document.getElementById("Caption_Boy").innerHTML = "Мальчик ПЕТЯ";
        }
    }
    
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type ="text/css">
 body,a {
     font-size:50px
 }
</style>
<title>Обмен изображений</title>
</head>
<body>
<figure >
<img id ="Dog" src="Images/Dog.jpg" width="500" height="550"> 
<figcaption id ="Caption_Dog">Изображение 1</figcaption>
</figure>
    <figure >
<img id ="Boy" src="Images/boy.jpg" width="500" height="550"> 
<figcaption  id ="Caption_Boy">Изображение 2</figcaption>
</figure>
      <p><a href="#" onClick = "swapImage()">Поменять местами</a></p>
</body>
</html>

Программа содержит функцию swapImage(), обращение к которой происходит от события onClick - щелчка по гиперссылке. Эта функция берет элементы <img> и модифицирует их атрибуты src, чтобы они указывали на новые изображения. Кроме того, программа изменяет подписи к рисункам, используя метод getElementById() и свойство innerHTML объекта document.

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?