xpath下面的xpath_Javascript中的XPath：谓词和复合词

xpath下面的xpath

Welcome to the second part of my look at XPath and how it can be used in Javascript. Part one served as a real basic introduction to what XPath is, how it can traverse the document tree, and an introduction to using XPath expressions in Javascript using the evaluate method. So far what we have seen is really basic. There is some value in it, but we can build much more robust expressions with a bit more knowledge.

欢迎使用XPath以及在Javascript中如何使用XPath的第二部分。 第一部分对XPath是什么，它如何遍历文档树进行了真正的基础介绍，并介绍了使用validate方法在Javascript中使用XPath表达式的介绍。 到目前为止，我们所看到的实际上是基本的。 它有一些价值，但是我们可以借助更多的知识来构建更强大的表达式。

详细了解化合物 (Getting More Detailed with Compounds)

So far, we haven’t dealt with any compound location paths…each of our expressions has just gotten nodes that are direct children of the context node. However, we can continue to move up and down the document tree by combining single location paths. One of the ways we can do this (and this should look quite familiar to anyone who has moved through directories elsewhere) is by using the forward slash ‘/’. The forward slash continues to move us one step down in the tree, relative to the preceding step.

到目前为止，我们还没有处理任何复合的位置路径……我们每个表达式都得到了属于上下文节点直接子节点的节点。 但是，我们可以通过组合单个位置路径来继续在文档树中上下移动。 我们可以执行此操作的方法之一(对于在其他目录中移动过的任何人都应该很熟悉)是使用正斜杠“ /”。 与前面的步骤相比，正斜线继续使我们在树中向下移动了一步。

For example, consider the following:

例如，考虑以下内容：

myXPath = “//div/h3/span”;
var results = document.evaluate(myXPath, document, null, XPathResult.ANY_TYPE, null);

The expression above will first go to the root node thanks to our ‘//’. It will then get any div elements that are descendants of the root node. Then, we use the forward slash to move down one more level. Now we are saying to get all h3 elements that are direct descendants of one of the div elements that was returned. Finally, we once again use our forward slash to move down one more level, and tell the expression to return any span elements that are direct descendants of the h3 elements we already found.

由于我们的“ //”，上面的表达式将首先转到根节点。 然后，它将获取作为根节点后代的所有div元素。 然后，我们使用正斜杠再向下移动一个级别。 现在我们说要获取所有h3元素，它们是返回的div元素之一的直接后代。 最后，我们再次使用正斜杠再向下移动一级，并告诉表达式返回作为我们已经找到的h3元素的直接后代的所有span元素。

In addition, we can use the double period ‘..’ to select an elements parent nodes. For example, if we use an expression like ‘//@title’, we will get all title attributes in the document. Let’s say that what we actually wanted, is all elements in the document that have title attributes. Using the parent selector (..), we can do just that. The expression ‘//@title/..’ first grabs all title attributes. Then the double period tells the expression to step back up and grab the parent node for each of those title attributes.

另外，我们可以使用双句号“ ..”来选择元素的父节点。 例如，如果我们使用“ // @ title”之类的表达式，则将获得文档中的所有标题属性。 假设我们真正想要的是文档中所有具有标题属性的元素。 使用父选择器(..)，我们可以做到这一点。 表达式“ // @ title / ..”首先获取所有标题属性。 然后，双倍句号告诉表达式逐步备份并为每个标题属性获取父节点。

This is a pretty handy little feature. We can use the double period to select sibling elements by doing something like ‘//child/../sibling’ where child is the child element, and sibling is the sibling element we are looking for. For example, ‘//h3/../p’ would get all p elements that are siblings of h3 elements.

这是一个非常方便的小功能。 我们可以通过执行'//child/../sibling'之类的操作来使用双倍周期来选择同级元素，其中child是child元素，而sibling是我们想要的同级元素。 例如，“ // h3 /../ p”将获得所有与h3元素同级的p个元素。

Finally, we can use a single period ‘.’ to select the current node. You will see this become useful when we introduce the use of predicates.

最后，我们可以使用一个句点“。”。 选择当前节点。 当我们介绍谓词的使用时，您会发现这变得很有用。

谈到魔鬼 (Speak Of the Devil)

Each expression we’ve seen returns a bunch of nodes matching criteria. Occasionally, we will want to refine this even further. We can do that using predicates, which are simply Boolean expressions that get tested for each node in our list. If the expression is false, the node is not returned in our results; if the expression is true, the node is returned.

我们看到的每个表达式都返回一堆符合条件的节点。 有时，我们会希望进一步完善此功能。 我们可以使用谓词来做到这一点，谓词只是为列表中每个节点进行测试的布尔表达式。 如果表达式为假，则不返回结果。 如果表达式为true，则返回该节点。

Predicates use the typical Boolean operators, ‘+’, ‘<‘, ‘>’, ‘<=‘, ‘>=’, ‘!=’, ‘and’ and ‘or’. As promised, the single period becomes much more useful when combined with predicates. For example, we can grab all h3 elements that have a value of “Yaddle” by using the following expression:

谓词使用典型的布尔运算符“ +”，“ <”，“>”，“ <=”，“> =”，“！=”，“和”和“或”。 如所承诺的，当与谓词结合使用时，单个句号变得更加有用。 例如，我们可以使用以下表达式来获取所有具有“ Yaddle”值的h3元素：

//h3[.="Yaddle"]

The dot tells the expression to check for the value of that current node. If the value equals “Yaddle”, the h3 will be returned to us. Let’s take a look at another example, one maybe a bit more practical. Let’s say you have a calendar of events, and all you want to retrieve all the events that occurred between 2005 and 2007. Being the smart developers we are, we wrapped all the event years in a span with a class of year, like so:

点告诉表达式检查该当前节点的值。 如果该值等于“ Yaddle”，则h3将返回给我们。 让我们看另一个例子，也许更实际一些。 假设您有一个事件日历，并且想要检索2005年到2007年之间发生的所有事件。作为我们的聪明开发人员，我们将所有事件年份包装在一个年份范围内，如下所示：

<span class="year">2007</span>

Getting all the year spans where the value is between 2005 and 2007 is easy. We can simply do this:

轻松获取全年值在2005年至2007年之间的值。 我们可以简单地做到这一点：

//span[@class="year"][.<= 2007 and .>=2005]

Ok…granted, at first glance that is pretty ugly, so let’s break it down.

好吧……当然，乍看之下很丑，所以让我们分解一下。

1. //span - Get all span elements

   //span获取所有span元素

2. [@class="year"] - Make sure the only span elements we grab have a class of ‘year’

   [@class="year"] -确保我们抓取的唯一span元素具有“ year”类

3. [.>=2005 and .<=2007] - Make sure the value of span is between 2005 and 2007. We use the ‘<=’ and ‘>=’ operators versus the ‘<’ and ‘>’ operators because we want to also return values in the years 2005 and 2007.

   [.>=2005 and .<=2007] -确保span的值在2005和2007之间。我们使用'<='和'> ='运算符而不是'<'和'>'运算符，因为还可以返回2005和2007年的值。

Making sense out of all the slashes and brackets can take some getting used to, so don’t be discouraged if it takes you awhile before you can make sense out of what is happening there. Once you get more familiar with the syntax used, you will find you can create some really robust checks in one line of code that would have taken numerous iterations using DOM methods.

从所有的斜杠和方括号中弄清楚可能会花费一些时间来适应，因此，如果您花了一些时间才可以理解那里发生的事情，请不要气our。 一旦熟悉了所使用的语法，您就会发现可以在一行代码中创建一些非常强大的检查，而这些检查可能会使用DOM方法进行多次迭代。

翻译自: https://timkadlec.com/2008/02/path-in-javascript-predicates-and-compounds/

xpath下面的xpath