DOM

Автор: Анна Лысак и Татьяна Головко Дата публикации: 13.07.2011

Document Object Model становится все более распространенной частью мобильной разработки.

Версии

Для мобильных браузеров есть две основные версии DOM:

  • DOM Level 1 HTML;
  • DOM Level 2 HTML & Core.

DOM Level 1 не рекомендуется использовать, хоть и поддерживается еще в декстопных и некоторых мобильных браузерах. Помню, пользовался им в 90-е, а потом он был заменен на DOM Level 2.

В DOM Level 1 для того чтобы получить доступ ко всем элементам документа нужно делать серии массивов коллекций объектов. Коллекции:

  • images
  • applets
  • links
  • forms
  • anchors

DOM Level 1 также есть методы document.getElementById и document.getElementsByName. Для доступа к значениям полей формы используется синтаксис document.forms[0].input_name.value.

В DOM Level 2 добавлено несколько новых методов и сегодня это наиболее часто используемая в мобильных браузерах версия DOM. В DOM Level 3 добавлены события, валидация и поддержка XPath, но эта версия не совместима с большинством мобильных браузеров.

Навигация

В таблице 8.14 приведена информация о совместимости различных мобильных браузеров и методов DOM навигации.

Табл. 8.14. Таблица поддержки DOM
Браузер/ Платформа DOM HTML collecs. getElementById getElementsByTagName childNodes
Safari Да Да Да Да
браузер Android Да Да Да Да
Symbian/S60 Да Да Да Да
Nokia Series 40 до 6-го выпуска Нет Да Нет Нет
Nokia Series 40 после 6-го выпуска Нет Да Да Да
webOS Да Да Да Да
BlackBerry Нет Да Нет до версии 4.6 Да
NetFront Нет Да Да Да
Internet Explorer Частично Да Да Да
Motorola Internet Browser Нет Да Нет Да
Opera Mobile Да Да Да Да
Opera Mini Да Да Да Да

Селекторы запроса

Селекторы запроса - это способ использования CSS селекторов для извлечения списка элементов из DOM. Этот механизм очень популярен при использовании jQuery библиотеки JavaScript, а в декстопный Firefox 3.5 и некоторые WebKit-браузеры он был встроен в качестве нативного расширения. На момент написания этой статьи селекторы запроса рассматривались W3C в документе Selectors API Level 1.

Для получения уникальных результатов запрос делается при помощи document.querySelector(selector) или при помощи document.querySelectorAll(selector) для множества возможных возвращаемых значений. Например:

	var items = document.querySelectorAll("ul.menu > li");
	var option = document.querySelector('#form1 input[type="radio"]:checked');

В вопросе поддержке селекторов запроса многие браузеры уже существенно продвинулись вперед (таблица 8.15).

Табл. 8.15. Поддержка querySelector
Браузер/ Платформа Поддержка querySelector
Safari Да
браузер Android Да
Symbian/S60 Нет
Nokia Series 40 Нет
webOS Да
BlackBerry Нет
NetFront Нет
Internet Explorer Нет
Motorola Internet Browser Нет
Opera Mobile Да
Opera Mini Да

Изменение свойств

DOM для HTML назначает объект, представляющий каждый HTML тег со своими свойствами. Как можешь увидеть из таблицы 8.16, такую функцию поддерживают многие браузеры. Например, изменяя свойство src тега <img> каждые две секунды, мы можем сделать галерею изображений. Когда ты меняешь свойство и это влечет за собой изменение ресурса, в таком случае браузеру должен получить новый ресурс. Пример:

<body>
	<script type="text/javascript">
		var timer = setInterval(changeImage, 2000);
		var currentImage = 0;
		function changeImage() {
		// We have 5 images, from 0 to 4
		currentImage = (currentImage + 1) % 5;
		document.getElementById("album").src = currentImage + ".png";
		}
	</script>
	<img src="1.png" id="album" width="100" height="100" />
</body>

Если в мобильном браузере есть поддержка CSS спрайтов, мы можем создать такую же галерею изменяя свойство style.backgroundPosition, чтобы отбражать разные части одного спрайта-картинки.

Из таблицы 8.16 можешь узнать, в каких браузерах поддерживается динамическое изменение свойств.

Табл. 8.16. Поддержка динамического изменения свойств
Браузер/ Платформа Поддержка изменения свойств
Safari Да
браузер Android Да
Symbian/S60 Да
Nokia Series 40 Нет до 6-го выпуска
webOS Да
BlackBerry Нет до версии 4.6
NetFront Да
Internet Explorer Частично
Motorola Internet Browser Да
Opera Mobile Да
Opera Mini Да (на сервере)

Изменение контента

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

Табл. 8.17. Таблица поддержки innerHTML
Браузер/ Платформа Поддержка innerHTML
Safari Да
браузер Android Да
Symbian/S60 Да
Nokia Series 40 Нет до 6-го выпуска
webOS Да
BlackBerry Нет до версии 4.6
NetFront Да
Internet Explorer Да
Motorola Internet Browser Да
Opera Mobile Да
Opera Mini Да (на сервере)

Предварительная загрузка изображений

В документах динамического HTML часто используется предварительная загрузка в память тех изображений, которые планируется позже использовать в этом же самом документе (например, в предыдущей галерее изображений). Обычно для этого используется такой код:

	var image = new Image(100,25);
	image.src = "image_url";

Потом, когда мы используем тот же самый src в другом изображении, ресурс должен уже присутствовать в кэше. В таблице 8.18 указано, какие устройства поддерживают предварительную загрузку изображений.

Табл. 8.18. Таблица поддержки предварительной загрузки изображений
Браузер/ Платформа Поддержка предварительной загрузки изображений
Safari Да
браузер Android Да
Symbian/S60 Да
Nokia Series 40 Нет до 6-го выпуска
webOS Да
BlackBerry Нет до версии 4.6
NetFront Да
Internet Explorer Да
Motorola Internet Browser Нет
Opera Mobile Да
Opera Mini Да

Добавление и удаление элементов

Для вставки элемента внутрь другого элемента кроме метода innerHTML есть еще альтернативный вариант: вставка объекта как дочернего элемента при помощи методов DOM. Следующий скрипт удаляет весь список дочерних элементов и заменяет их ссылкой:

	var items = document.getElementsById("li");
	for (int i=0; i<items.length; i++) {
	for (int j=0; j<items[i].childNodes; j++) {
	items[i].removeChild(items[i].childNodes[j]);
	}
	var a = document.createElement("a");
	a.href = "go.html";
	a.innerHTML = "Item " + i;
	items[i].appendChild(a);

В каких браузерах поддерживается — смотри в таблице 8.19.

Для лучшей производительности на мобильных устройствах вместо методов DOM используй innerHTML для добавления, перемещения и удаления элементов.

Табл. 8.19. Таблица поддержки добавления и удаления элементов в DOM
Браузер/ Платформа Поддержка appendChild и removeChild
Safari Да
браузер Android Да
Symbian/S60 Да
Nokia Series 40 Нет до 6-го выпуска
webOS Да
BlackBerry Нет до версии 4.6
NetFront Да
Internet Explorer Да
Motorola Internet Browser Нет
Opera Mobile Да
Opera Mini Да

Для лучшей производительности на мобильных устройствах вместо методов DOM используй innerHTML для добавления, перемещения и удаления элементов.

Куда дальше