Octane 13 мар 2009 в 19:56

Реализация интерфейса ElementTraversal

8 мин

2.2K

Достаточно много браузеров (Opera 9.6, Google Chrome 2, Safari 4, Firefox 3.5) обзавелись поддержкой весьма удобного интерфейса ElementTraversal, который позволяет перемещаться по DOM-дереву, игнорируя текстовые узлы. В этих браузерах для каждого элемента стал доступен следующий набор новых getter'ов:

firstElementChild — первый дочерний элемент;
lastElementChild — последний дочерний элемент;
nextElementSibling — следующий соседний элемент;
previousElementSibling — предыдущий соседний элемент;
childElementCount — количество дочерних элементов.

Не вдаваясь в подробности реализации этих getter'ов и опираясь на слова из спецификации:

The ElementTraversal interface is a set of read-only attributes…

будем называть их далее атрибутами.

Уточним: элементами называются узлы DOM-дерева, имеющие свойство nodeType равное 1; элементам соответствуют теги.

Использование этих атрибутов должно повысить производительность JavaScript-приложений при перемещении по DOM-дереву, т. к. отпадает необходимость проверять в цикле nodeType узлов и использовать дополнительные функции-обертки. А атрибут childElementCount позволяет узнать, есть ли вообще дочерние элементы у текущего узла, в отличие от практически бесполезного метода hasChildNodes. Конечно, проверить наличие дочерних элементов можно следующим образом:

node.getElementsByTagName("*").length

Но такой способ слишком расточителен, встроенный атрибут childElementCount теоретически должен работать гораздо быстрее.

Все это конечно хорошо и интересно, но что же делать со старыми браузерами, которые не поддерживают интерфейс ElementTraversal? Очевидно, придется написать дополнительные функции для каждого атрибута. Их реализацию вы можете посмотреть в статье «Быстрый поиск DOM-элементов», хотя, думаю, для многих не составит труда написать такие функции самому, ничего сложного в этом нет.

А теперь самое интересное, в Internet Explorer 8 появилась возможность создавать эти самые getter'ы и setter'ы. Странно только, почему ни в одном обзоре о нововведениях IE8 не прозвучало об этом мощном и полезном механизме. В JScript создать getter или setter теперь можно с помощью метода defineProperty встроенного объекта Object. Вспоминаем, что подобная возможность, посредством методов __defineGetter__ и __defineSetter__, изначально была в браузерах на основе Gecko, как оказалось уже и в Safari 3, и в Opera 9.6 внедрили этот механизм.

Итак, имея возможность создавать getter'ы, мы можем внедрить поддержку интерфейса ElementTraversal в Internet Explorer 8, Mozilla Firefox 2+ и Safari 3+, ну а Opera 9.6 и так его поддерживает.

Осталось написать код:

// Создаем новый элемент для дальнейших проверок var element = document.createElement("div"); // Проверяем, что браузер не поддерживает ElementTraversal if(typeof element.firstElementChild == "undefined") { // Создаем объект с набором методов var ElementTravrsal = { // Поиск первого дочернего элемента firstElementChild: function() { // Получаем первый дочерний узел var node = this.firstChild; // Находим следующий соседний узел пока не встретили элемент // или не получили значение null while(node && node.nodeType != 1) node = node.nextSibling; // Возвращаем найденный элемент или null return node; }, // Поиск последнего дочернего элемента lastElementChild: function() { // Получаем последний дочерний узел var node = this.lastChild; // Находим предыдущий соседний узел пока не встретили элемент // или не получили значение null while(node && node.nodeType != 1) node = node.previousSibling; // Возвращаем найденный элемент или null return node; }, // Поиск следующего соседнего элемента nextElementSibling: function() { // Объявляем переменную и инициализируем // ее ссылкой на текущий элемент var node = this; // Находим следующий соседний узел пока не встретили элемент // или не получили значение null do node = node.nextSibling while(node && node.nodeType != 1); // Возвращаем найденный элемент или null return node; }, // Поиск предыдущего соседнего элемента previousElementSibling: function() { // Объявляем переменную и инициализируем // ее ссылкой на текущий элемент var node = this; // Находим предыдущий соседний узел пока не встретили элемент // или не получили значение null do node = node.previousSibling; while(node && node.nodeType != 1); // Возвращаем найденный элемент или null return node; }, // Определение количества дочерних элементов // Проверяем, что браузер не поддерживает геттер children childElementCount: typeof element.children == "undefined" ? function() { // Браузер не поддерживает children, // поэтому получаем список всех дочерних узлов var list = this.childNodes, // определяем их количество i = list.length, // заводим счетчик элементов j = 0; // Проходя в цикле по всем дочерним узлам, while(i--) // если встретился элемент, if(list[i].nodeType == 1) // увеличиваем счетчик j++; // Возвращаем количество дочерних узлов или 0 return j; } : function() { // Браузер поддерживает children, // поэтому получаем список всех дочерних элементов // и возвращаем их количество return this.children.length; } }; // Создаем геттеры для IE8 if(Object.defineProperty) for(var property in ElementTravrsal) if(ElementTravrsal.hasOwnProperty(property)) Object.defineProperty(Element.prototype, property, { get: ElementTravrsal[property] }); // для Firefox 2+ и Safari 3+ if(Object.__defineGetter__) for(var property in ElementTravrsal) if(ElementTravrsal.hasOwnProperty(property)) HTMLElement.prototype.__defineGetter__(property, ElementTravrsal[property]); }

Включив этот код в проект, уже сейчас можно пользоваться ElementTraversal в большинстве браузеров:

Internet Explorer 8;
Mozilla Firefox 2+ и другие браузеры на основе Gecko 1.8+;
Opera 9.6+ (может быть и 9.5+);
Safari 3+ (может даже и 2? К сожалению, нет возможности проверить);
Google Chrome 2+.

Для разработки некоторых сервисов или административных интерфейсов этого списка вполне может быть достаточно. Ну а если нужна поддержка всех браузеров, без дополнительных функций, как в приведеной статье по ссылке выше, не обойтись. Или все же можно расширить список поддерживаемых браузеров? Если есть идеи, как это сделать в других браузерах, пишите в комментариях, пусть даже это будут нерациональные решения, интересна сама возможность реализации.

Используются атрибуты нового интерфейса точно так же, как и старые firstChild, lastChild, nextSibling и т. д. Возьмем, к примеру, такой XHTML-код:

<div id="test"> TextNode <div>TextNode</div> TextNode TextNode TextNode </div> TextNode TextNode

И выполним несколько перемещений по DOM-дереву в JavaScript:

// Получим ссылку на элемент // с идентифкатором "test" var node = document.getElementById("test"); // Узнаем tagName следующего элемента alert(node.nextElementSibling.tagName); // → "P" // Найдем последний дочерний элемент node = node.lastElementChild; // И узнаем, есть у него дочерние элементы? alert(node.childElementCount); // → "0" // А вообще дочерние узлы? alert(node.hasChildNodes()); // → "true"

Если было интересно, могу написать подробнее о применении getter'ов и setter'ов в JScript и JavaScript в следующей статье.

Архив с кодом из статьи: ElementTraversal.zip

Update: перенес в тематический блог, спасибо за карму :-)

Теги:

Хабы:

JavaScript

Реализация интерфейса ElementTraversal

Публикации

Истории

Работа

Ближайшие события