Javascript中的XPath：简介

As reported by John Resig, Prototype, Dojo, and Mootools have all switched their CSS Selector engines to be using XPath expressions instead of traditional DOM methods. With the attention being placed on XPath expressions, now is a good time to get familiarized with them and what they can accomplish.

正如John Resig所报道的那样，Prototype，Dojo和Mootools都已将其CSS Selector引擎切换为使用XPath表达式而不是传统的DOM方法。 由于将注意力放在XPath表达式上，现在是熟悉它们以及它们可以完成的好时机。

This is going to be a multi-post series, as there is just so much you can accomplish by using XPath expressions that if I tried putting it into one post, no one would have the time to sit and read the whole thing.

这将是一个多篇文章系列，因为使用XPath表达式可以完成很多工作，因此，如果我尝试将其放入一篇文章中，没有人会花时间坐下来阅读全文。

什么是XPath？ (What is XPath?)

Any of you out there who are familiar with XSLT will no doubt be familiar with the XPath language. For the rest of you, XPATH is used to identify different parts of XML documents by indicating nodes by position, relative position, type, content, etc.

你们当中任何熟悉XSLT的人都无疑会熟悉XPath语言。 对于其他人，XPATH用于通过按位置，相对位置，类型，内容等指示节点来标识XML文档的不同部分。

Similar to the DOM, XPath allows us to pick nodes and sets of nodes out of our XML tree. As far as the language is concerned, there are seven different node types XPath has access to (for most Javascript purposes the first four node types will most likely be sufficient):

与DOM相似，XPath允许我们从XML树中选择节点和节点集。 就语言而言，XPath可以访问七种不同的节点类型(对于大多数Javascript目的，前四种节点类型很可能就足够了)：

1. Root Node

   根节点

2. Element Nodes

   元素节点

3. Text Nodes

   文字节点

4. Attribute Nodes

   属性节点

5. Comment Nodes

   评论节点

6. Processing Instruction Nodes

   处理指令节点

7. Namespace Nodes

   命名空间节点

XPath如何遍历树？ (How Does XPath Traverse the Tree?)

XPath can use location paths, attribute location steps, and compound location paths to very quickly and efficiently retrieve nodes from our document. You can use simple location paths to quickly retrieve nodes you want to work with. There are two basic simple location paths - the root location path (/) and child element location paths.

XPath可以使用位置路径，属性位置步骤和复合位置路径来非常快速有效地从文档中检索节点。 您可以使用简单的位置路径来快速检索要使用的节点。 有两个基本的简单位置路径-根位置路径(/)和子元素位置路径。

The forward slash (/) servers as the root location path…it selects the root node of the document. It is important to realize this is not going to retrieve the root element, but the entire document itself. The root location path is an absolute location path…no matter what the context node is, the root location path will always refer to the root node.

正斜杠(/)服务器作为根位置路径…它选择文档的根节点。 重要的是要意识到这不是要检索根元素，而是整个文档本身。 根位置路径是绝对位置路径…无论上下文节点是什么，根位置路径将始终引用根节点。

Child element location steps are simply using a single element name. For example, the XPath p refers to all p children of our context node.

子元素定位步骤仅使用单个元素名称。 例如，XPath p引用上下文节点的所有p个子级。

One of the really handy things with XPath is we have quick access to all attributes as well by using the at sign ‘@’ followed by the attribute name we want to retrieve. So we can quickly retrieve all title attributes by using @title.

XPath真正方便的事情之一是，我们还可以通过使用at符号“ @”后跟我们要检索的属性名称来快速访问所有属性。 因此，我们可以使用@title快速检索所有标题属性。

在Javascript中使用XPath (Using XPath in Javascript)

That’s all well and fine, but how do we use this in Javascript? Right now, Opera, Firefox and Safari 3 all support the XPath specification (at least to some extent) and allow us to use the document.evaluate() method. Unfortunately at this time, IE offers no support for XPath expressions. (Let’s hope that changes in IE8)

一切都很好，但是我们如何在Javascript中使用它呢？ 目前，Opera，Firefox和Safari 3都支持XPath规范(至少在某种程度上)，并允许我们使用document.evaluate()方法。 不幸的是，此时IE不支持XPath表达式。 (希望更改IE8)

The document.evaluate method looks like this:

document.evaluate方法如下所示：

var theResult = document.evaluate(expression, contextNode, namespaceResolver, resultType, result);

The expression argument is simply a string containing the XPath expression we want evaluated. The contextNode is the node we want the expression evaluated against. The namespaceResolver can safely be set to null in most HTML applications. The resultType is a constant telling what type of result to return. Again, for most purposes, we can just use the XPathResult.ANY_TYPE constant which will return whatever the most natural result would be. Finally, the result argument is where we could pass in an existing XPathResult to use to store the results in. If we don’t have an XPathResult to pass in, we just set this value to null and a new XPathResult will be created.

expression参数只是一个包含我们要评估的XPath表达式的字符串。 contextNode是我们要对表达式求值的节点。 在大多数HTML应用程序中，可以将namespaceResolver安全地设置为null。 resultType是一个常量，指示要返回的结果类型。 同样，对于大多数用途，我们可以只使用XPathResult.ANY_TYPE常量，该常量将返回最自然的结果。 最后， result参数是我们可以传入现有XPathResult用来存储结果的位置。如果我们没有要传入的XPathResult，则只需将此值设置为null即可创建一个新的XPathResult。

Ok…all that talk and still no code. Let’s remedy that shall we. Here’s a very simple XPath expression that will return all elements in our document with a title attribute.

好吧...所有的谈话，仍然没有代码。 让我们来补救一下。 这是一个非常简单的XPath表达式，它将返回带有title属性的文档中的所有元素。

var titles = document.evaluate("//*[@title]", document, null, XPathResult.ANY_TYPE, null);

If you take a look at the XPath expression we passed in “//*[@title]“, you will notice that we used the attribute location step followed by the attribute we want to find, ‘title’. The two forward slashes preceding the at sign is how we tell the browser to select from all descendants of the root node (the document). The asterisk sign says to grab any nodes regardless of the type. Then we use the square brackets in combination with our attribute selector to limit our results only to nodes with a title attribute.

如果您看一下我们在“ // * [@ title]”中传递的XPath表达式，您会注意到我们使用了属性定位步骤，后跟要查找的属性“ title”。 at符号前面的两个正斜杠是我们告诉浏览器从根节点(文档)的所有后代中进行选择的方式。 星号表示获取任何节点，无论类型如何。 然后，我们将方括号与属性选择器结合使用，以将结果仅限于具有title属性的节点。

The evaluate method in this case returns an UNORDERED_NODE_ITERATOR_TYPE, which we can now move through by using the iterateNext() method like so:

在这种情况下，评估方法返回UNORDERED_NODE_ITERATOR_TYPE ，我们现在可以通过使用iterateNext()方法进行iterateNext()如下所示：

var theTitle = titles.iterateNext();

while (theTitle){
    alert(theTitle.textContent);
    theTitle = titles.iterateNext();
}

Since each item in the results is a node, we need to reference the text inside of it by using the textContent property (line 3). You can only iterate to a node once, so if you want to use your results later, you could save each node off into an array with something like below:

由于结果中的每个项目都是一个节点，因此我们需要使用textContent属性(第3行)来引用其中的文本。 您只能迭代一次到一个节点，因此如果以后要使用结果，可以将每个节点保存到一个数组中，如下所示：

var arrTitles = [];
var theTitle = titles.iterateNext();
while (theTitle){
    arrTitles.push(theTitle.textContent);
    theTitle = titles.iterateNext();
}

Now arrTitles is filled with your results and you can use them however often you wish.

现在， arrTitles充满了您的结果，您可以随意使用它们。

This is just the beginning…as we continue to look at XPath expressions and introduce predicates and XPath functions, you will start to see just how truly robust XPath expressions are. At this point, IE doesn’t support using XPath expressions in Javascript, but with each of the other major browsers having some support, and major Javascript Libraries placing an emphasis on using them, it’s only a matter of time before we can begin using these expressions to create more efficient code.

这仅仅是开始……随着我们继续研究XPath表达式并介绍谓词和XPath函数，您将开始看到真正强大的XPath表达式。 目前，IE不支持在Javascript中使用XPath表达式，但是由于其他所有主要浏览器都提供了一定的支持，并且主要的Javascript库着重于使用它们，因此开始使用这些只是时间问题。表达式来创建更有效的代码。

翻译自: https://timkadlec.com/2008/02/xpath-in-javascript-introduction/