XPath в JavaScript

[Disclaimer: Данная статья была переведена в рамках "Конкурса на лучший перевод статьи" на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]

Введение в XPath на JavaScript

Часто программистам на javascript не хватает возможности оперировать с DOM-моделью более простым и лаконичным способом, чем вызовы типа getElementById. В этой статье описывается JavaScript-интерфейс для доступа к функциям XPath в обычном простом HTML.

Библиотека XPath для JavaScript реализует большую часть спецификации "DOM Level 3 XPath". Это позволяет выполнять выражения XPath как в HTML- так и в XML-документах.

Прежде всего, простейший интерфейс к XPath состоит в функции evaluate объекта document, которая возвращает объект типа XPathResult:

var xpathResult = document.evaluate(xpathExpression, contextNode, 
   namespaceResolver, resultType, result
);

Функция evaluate принимает всего 5 аргументов:

1. xpathExpression - строка, содержащая выражение xpath, которое нужно вычислить;
2. contextNode - узел документа, по отношению к которому должно быть вычислено выражение xpath;
3. namespaceResolver - функция, принимающая строку с префиксом пространства имен из xpathExpression и возвращающая строку, содержащаю URI, которому соответствует этот префикс. Она дает возможность проеобразования между префиксами, используемыми в выражениях xpath и (возможно отличными) префиксами, используемыми в документе;
4. resultType - числовая константа, указывающая тип возвращаемого результата. Эти константы доступны в глобальных объектах XPathResult и определены в соответствующем разделе спецификации Xpath. Для большинства целей можно передавать XPathResult.ANY_TYPE, что приводит к возврату результата выражения Xpath в наиболее естественном виде;
5. result - существующий XPathResult, используемый для результатов. Передача null приводит к созданию нового XPathResult.

Простой пример использования XPath

Элементарное использование XPath - извлечениe заголовков 2-го уровня из HTML документа. Выражение XPath в этом случае просто: //h2. Тогда код для этого:

var headings = document.evaluate("//h2", document, null, 
    XPathResult.ANY_TYPE, null
); 

Заметим, так как HTML не имеет пространства имен, мы передали null в качестве namespaceResolver. Поскольку мы хотим искать заголовки по всему документу, мы использовали сам объект document в качестве contextNode.

Результат этого выражения есть объект XPathResult. Если мы хотим узнать тип полученного результата, мы можем проверить свойство resultType полученного объекта. В данном случае будет получено 4, что согдасно привязки XPATH к языку ECMAScript(ECMAScript Language Binding) представляет UNORDERED_NODE_ITERATOR_TYPE. Это тип возвращаемого результата по умолчанию, когда результатом выражения XPath является множество узлов. Он дает нам возможность обращаться к одному узлу за раз, но не дает какого-либо обещания относительно порядка, в котором будут возвращены узлы. Для доступа к полученным узлам мы можем использовать метод iterateNext полученного объекта:

var thisHeading = headings.iterateNext();
var alertText = "Заголовки уровня 2 этого документа:\n"

while (thisHeading) {
    alertText += thisHeading.textContent + "\n"
    thisHeading = headings.iterateNext();
}
alert(alertText);

Библиотека XPath

Реализация библиотеки XPath 1.0 в JavaScript должна работать одинаково в большинстве современных браузерах (в том числе и в IE). Библиотека распространяется под GNU Lesser General Public License.

Скачать библиотеку можно на этой странице - xpath.zip

Ниже представлено еще несколько примеров.

Пример для подсчета всех ссылок в документе с помощью одного xpath запроса:

var linkCount = document.evaluate(“count(//a[@href])“, document, 
    null, XPathResult.NUMBER_TYPE, null
).getNumberValue();

Получение всех картинок без тега alt:

var imgIterator = document.evaluate(“//img[not(@alt)]“, document,
    null, XPathResult.ANY_TYPE, null
); 

Нахождение первого дочернего li элемента для всех ul:

var firstLiIterator = document.evaluate(“//ul/li[1]“, document,
    null, XPathResult.ANY_TYPE, null
);

----------
Оригинальный текст статьи: XPath in JavaScript