Javascript XPATH中前面的第n个元素（同级或祖先）_Javascript_Html_Xpath

Javascript XPATH中前面的第n个元素（同级或祖先）

javascript html xpath

Javascript XPATH中前面的第n个元素（同级或祖先）,javascript,html,xpath,Javascript,Html,Xpath,假设我的标记是： <html> <body> <div> <div>blbaba</div> <p>a</p> <p>b</p> <p>c</p> <p>d</p> <div id="a1">blbaba</div> <p>e</p> <p>f</p>

假设我的标记是：

<html>
<body>

<div>
 <div>blbaba</div>
 <p>a</p>
 <p>b</p>
 <p>c</p>
 <p>d</p>
 <div id="a1">blbaba</div>
 <p>e</p>
 <p>f</p>
 <p>g</p>
 <p>h</p> 
 <div>blbaba</div>
</div>

</body>
</html>


布尔巴巴
a
b
c
d
布尔巴巴
e
f
g
h
布尔巴巴

如何选择相对于特定元素的元素，即之前的

节点（文档中可以是之前的父节点或同级节点）

例如：

我想用

@id=“a1”

选择div之前的第二个

元素，因此我期望的元素是

组合这两个元素在Chrome中都不起作用（例如，您可以首先检查它是否有兄弟，如果为空，则通过第二个XPath获取祖先）
下面是对或的这种行为的解释

函数doTest（）{
测试元素（'a1'）；
测试元素（'a2'）；
}
功能测试元素（id）{
var祖先=getPath（“//div[@id=”“+id+”]/祖先：：*[2]”；
警报（“祖先”+祖先）；
var sibling=getPath（“//div[@id='”+id+“]/前面的同级：：*[2]”）；
警报（“同级”+同级）；
var both=getPath（“//div[@id=”“+id+”]]/前面的同级：：*[2]|//div[@id=”“+id+”]]/祖先：*[2]”；
警报（“两个”+两个）；
}
函数getPath（path）{
return document.evaluate（路径、文档、null、XPathResult.FIRST\u ORDERED\u NODE\u TYPE、null）；
}
布尔巴巴
a
b
c
d
布尔巴巴
e
f
g
h
布尔巴巴
前面的：
和祖先：
轴是不相交的，因此在一般情况下，您将无法选择所需的元素，除非您使用这两个轴选择的元素
引用：
(//p[@id='a1']/ancestor::div | //p[@id='a1']/preceding::div) 
                                                        [last() -$n +1]

<div id="y">
   <p>d</p>
   <div>blbaba</div>
   <p id="a1">e</p>
   <p>f</p>
   <p>g</p>
   <p>h</p>
   <div>blbaba</div>
</div>

•前一个轴包含与前一个轴相同的文档中的所有节点
在文档顺序中位于上下文节点之前的上下文节点，
排除任何祖先并排除属性节点和命名空间
节点
使用：
(//p[@id='a1']/ancestor::div | //p[@id='a1']/preceding::div) 
                                                        [last() -$n +1]

<div id="y">
   <p>d</p>
   <div>blbaba</div>
   <p id="a1">e</p>
   <p>f</p>
   <p>g</p>
   <p>h</p>
   <div>blbaba</div>
</div>

这将选择属于p
元素的前一个div
元素和祖先div
元素的联合的第n个div
元素，其id
属性的值为字符串“a1
”。这里我们假设id
属性唯一地标识它所属的元素
例如，如果我们有这个XML文档（我让这个示例更现实，因为div
s可以嵌套，而p
s不能嵌套）：
这个简短的XSLT转换证明，上面的XPath表达式恰好选择了所需的div
元素（通过计算XPath表达式并复制整个选定的div
元素）：
<div id="y">
   <p>d</p>
   <div>blbaba</div>
   <p id="a1">e</p>
   <p>f</p>
   <p>g</p>
   <p>h</p>
   <div>blbaba</div>
</div>