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 навигации.
| Браузер/ Платформа | 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).
| Браузер/ Платформа | Поддержка 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 можешь узнать, в каких браузерах поддерживается динамическое изменение свойств.
| Браузер/ Платформа | Поддержка изменения свойств |
|---|---|
| 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 указано, какие браузеры поддерживают это свойство.
| Браузер/ Платформа | Поддержка 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 указано, какие устройства поддерживают предварительную загрузку изображений.
| Браузер/ Платформа | Поддержка предварительной загрузки изображений |
|---|---|
| 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/";
a.innerHTML = "Item " + i;
items[i].appendChild(a);
В каких браузерах поддерживается — смотри в таблице 8.19.
Для лучшей производительности на мобильных устройствах вместо методов DOM используй innerHTML для добавления, перемещения и удаления элементов.
| Браузер/ Платформа | Поддержка 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 для добавления, перемещения и удаления элементов.
Куда дальше
- следующая — Изменение стилей
- предыдущая — Поддержка JavaScript на мобильных устройствах
- содержание