Последняя на сегодняшний день сборка IE 9 включает в себя две масштабные совместимые функций для работы с DOM – DOM Traversal и Element Traversal. Эти функции обеспечивают веб-разработчикам простой, гибкий и быстрый путь просмотра документа, используя одинаковую разметку во всех браузерах. Эти функции входят в виде плоских перечислений, упрощая DOM-дерево для итерационных списков и фильтров, который позволит вам адаптировать набор узлов при просмторе. Эти функции работают с одинаковой разметкой в различных браузеров – можете протестировать любую часть кода в окне IE9 platform preview и любого другого браузера.

Без этих функций, чтобы найти интересующий вас элемент на странице, от вас требуется сделать один или несколько глубоких просмтра документа с использованием firstChild и nextSibling. Обычно это осуществляется сложным кодом, который работает медленно. С DOM и функциями Element Traversal, появились новые и более эффективные пути решения этой проблемы. Эта статья содержит несколько примеров, чтобы подтолкнуть вас на нужный путь.

Я начну с Element Traversal, так как у него самый простой интерфейс, а также знакомые модели для перечисления элементов в DOM. Element Traversal это версия DOM Core, оптимизированного для элементов. Вместо того, чтобы вызывать функции firstChild и nextSibling, вы вызываете firstElementChild и nextElementSibling. Например:

if (elm.firstElementChild)
{
elm = elm.firstElementChild;

while (elm.nextElementSibling)
{
// Do work…
}
}

Это быстрее и удобнее, к тому же избавляет вас от проблемы проверки текста и комментариев узлов, когда вы действительно заинтересованы только в элементах.

DOM Traversal предназначен для более широких случаев. Во-первых, вы создаете NodeIterator или TreeWalker. После этого вы можете воспользоваться одним из итерационных методов для просмотра дерева:

var iter = document.createNodeIterator(elm, NodeFilter.SHOW_ELEMENT, null, false); // This would work fine with createTreeWalker, as well

var node = iter.nextNode();
while (node = iter.nextNode())
{
node.style.display = “none”;
}

Представленный выше код перебирает в виде простого списка всех узлы дерева. Это может быть чрезвычайно полезно, поскольку в большинстве случаев вам все равно где находятся child или sibling , а просто происходит ли это до или после текущей позиции в документе.

Большим преимуществом DOM Traversal является то, что он вводит идею фильтрации, так что вы затрагиваете только интересующие узлы. Хотя NodeIterator выполняет только плоские итерации, TreeWalker имеет также некоторые дополнительные методы, такие как firstChild (), который позволяет вам видеть именно столько структуры дерева, сколько вы хотите.

Семейство констант SHOW_ * дает возможность включать широкий класс узлов, таких как текст или элементы (например, SHOW_ELEMENT в предыдущем примере). Во многих случаях, этого будет достаточно. Но когда вы больше всего нуждаетесь в точном контроле, вы можете написать свой собственный фильтр через интерфейс NodeFilter. Интерфейс NodeFilter использует функцию обратного вызова для фильтрации каждого узла, как показано в следующем примере:

var iter = document.createNodeIterator(elm, NodeFilter.SHOW_ALL, keywordFilter, false);

function keywordFilter(node)
{
var altStr = node.getAttribute(‘alt’).toLowerCase();

if (altStr.indexOf(“flight”) != -1 || altStr.indexOf(“space”) != -1)
return NodeFilter.FILTER_ACCEPT;
else
return NodeFilter.FILTER_REJECT;
}

Для более наглядного примера, посмотрите мою демо-версию DOM Traversal – я широко использовал NodeFilter. Комплекс операций сортировки в списке медиа-элементов столь же прост, как использование обратного NodeFilter в примере выше.

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

• Если структура документа очень важна – и вы заинтересованы только в элементах – используйте Element Traversal. Это быстро и не оставит большого следа в вашем коде.
• Если вы не заботитесь о структуре документа, используйте NodeIterator TreeWalker. Таким образом, ваш код предстанет как ровный лист. NodeIterator также, как правило, быстрее, что становится важным моментом при прохождении больших наборов узлов.
• Если SHOW_*константы делают то, что вам нужно для фильтрации, используйте их. Использование констант делает ваш код проще, а также он будет иметь несколько более высокую производительность. Тем не менее, если вам нужна мелкозернистая фильтрация, вам не обойтись без вызова обратного NodeFilter.

Я уже открыл для себя эти функции и они обещают быть большим подспорьем в моем процессе написания кода, поэтому я очень буду рад, если вы также активно их задействуете. Загрузите последнюю версию Platform Preview, попробуйте API, и дайте нам знать, что вы об этом думаете.