• Статья
Функции DOM Range и HTML5 Selection

Мы писали много о поддержке, имеющейся в Internet Explorer 9 и призванной дать разработчикам возможность создавать единую разметку и получать идентичные результаты во всех браузерах. IE9 включает две новые функции для разработчиков, желающих создавать единую разметку: DOM Range и HTML5 Text Selection API. Функция DOM Range предоставляет простой и удобный способ для извлечения фрагментов документа и управления ими. Это также лежит в основе интерфейсов HTML5 Text Selection API, позволяющих использовать один из самых популярных способов взаимодействия пользователя с браузером – выделение текста.

Разработчикам функция HTML5 Selection обеспечивает способ получения и использования программным путем выделенного пользователем текста, как указано в примере кода ниже:

var selection = window.getSelection();

var range = selection.getRangeAt(0);

Как вы могли догадаться по именам, используемым в вышеприведенном фрагменте кода, часть документа, которую вы получаете, определена в терминах DOM Range. Это, по сути, всего лишь способ описания фрагмента документа, позволяющий оперировать с ним так, как вам нужно. Например, если я хочу отредактировать строчный стиль всех элементов в диапазоне:

var contents = range.extractContents();

var childNodes = contents.childNodes;

for (var i = 0; i < childNodes.length; i++)

{

if (childNodes[i].nodeName != "#text»)

childNodes[i].style.color = «red»;

range.insertNode(childNodes[i].cloneNode(true));

}

В Internet Explorer давно была схожая функциональность, доступная через собственные объекты TextRange и HTMLDocument.selection. TextRange создавались и управлялись через символы, слова и строки. Это были удобные абстракции, но иногда они могли привести к некой двусмысленности и они не упрощали работу с DOM API.

Для того чтобы увидеть некоторые из преимуществ DOM Range и HTML5 Selection, мы воспользуемся примером, который я создал для сайта IE Test Drive. В примере есть редактор текста, который получает выделенный пользователем текст, извлекает узлы, применяет к нему произвольные операции, а затем повторно вставляет его туда, откуда он был взят. Это позволяет оператору устанавливать строчный стиль для каждого из элементов в выделении, чтобы например, сделать текст зеленым.

Выбор цвета текста является примером возможностей, которые доступны через метод execCommand TextRange, имеющий набор предопределенных операций. Но как насчет операций, которые не определены в методе, как, например, перевод фрагмента текста?

Чтобы увидеть пример в действии, попытайтесь использовать команду «Translate» в примере. Эта команда делает AJAX-вызов к службе Bing Translate, передавая каждый из элементов в выделенном тексте для перевода. Поскольку функция Range работает с диапазоном узлов и смещений, это, безусловно, другая операция; операция получает некоторые узлы, выполняет операцию, а затем помещает их обратно. Такой шаблон позволяет обобщить код для других операций...

Если я попытаюсь проделать ту же самую вещь с TextRange, я не смогу использовать execCommand. Чтобы сделать это, я должен извлечь текстовый контент, передать его на перевод, затем удалить старый текст и повторно вставить новый. В ходе этого процесса все предыдущие операции наподобие изменения текста или размера будут потеряны, поскольку отсутствие информации об узлах не позволяет извлекать индивидуальные фрагменты, редактировать их, а затем вернуть их в оригинальные контейнеры.

Как Дин упомянул в недавней публикации, одной из наших целей в данном выпуске является обеспечение возможности создания единой разметки для всех браузеров. В ходе наших исследований мы собрали данные об использовании, которые показали, что функции DOM Range и HTML5 Selection API являются наиболее используемыми в Интернете. Поддержка широко используемых API является важной частью на пути к единой разметке, поэтому эти API имеют для нас особое значение.

Однако стоит отметить, если у вас есть приложение, зависящее от старых API, они будут и дальше работать, упростив обновление до IE9. Везде, где возможно, мы рекомендуем использовать приёмы, о которых писал Тони Росс (Tony Ross), чтобы направлять IE9 ту же разметку для Range, что и для других браузеров.

Мы надеемся, что конечным итогом поддержки этих API станут более удобные сценарии для вас, разработчиков. В результате нашей работы количество баллов в тесте ACID3 у IE9 увеличилось. Текущая предварительная версия теперь проходит тесты под номером 7, 9, 12 и 13.

Было интересно работать над этим, и я с нетерпением жду, чтобы увидеть, что с данными функциями смогут сделать другие разработчики.

Джон Сейтел (Jon Seitel),

программный менеджер Internet Explorer