logo标签列表

JavaScript的XPath：如何获取元素的属性值？

javascriptxpath
7

我想要获取特定id的元素的属性值。例如，我想要获取id为next的a标签的href属性值：

<a href="?page=3" id="next">Next</a>

我知道我可以像这样获取它：
console.log(document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().href);

但问题在于，在我的情况下，属性的名称可能不同，我需要一种通过xpath查询指定它的方法。类似这样：

'//a[@id="next"]/@href'
1
为什么不使用 $x('//a[@id="next"]')[0].getAttribute('href') 呢？ - Blender
$x 代表什么？ - Bob Torrent
Chrome浏览器的控制台XPath函数，就像$$是用于querySelectorAll一样。 - Blender
1
你也可以执行 $x('//a[@id="next"]/@href')[0].value。 - Blender
console.log(document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().getAttribute(THE_ATTRIBUTE_NAME)); - Bob Torrent
2个回答
8

尝试像这样做：

document.evaluate('//a[@id="next"]/@href', document, null, XPathResult.ANY_TYPE, null).iterateNext().value;

根据您在xpath中指定的元素类型（元素节点、文本节点、属性），iterateNext()返回不同类型的对象。在这种情况下，指定@href属性，它将返回一个javascript Attr对象，其中属性value包含属性的值。继续使用您的示例：

<a href="?page=3" id="next">Next</a>

你可以尝试下面的例子： 

//Returns true
console.log(document.evaluate('//a[@id="next"]/@href', document, 
  null, XPathResult.ANY_TYPE, null).iterateNext() instanceof Attr);

//Returns "?page=3"
console.log(document.evaluate('//a[@id="next"]/@href', document, 
  null, XPathResult.ANY_TYPE, null).iterateNext().value);

//Returns true
console.log(document.evaluate('//a[@id="next"]', document,
  null, XPathResult.ANY_TYPE, null).iterateNext() instanceof Node);

//Returns false
console.log(document.evaluate('//a[@id="next"]', document,
  null, XPathResult.ANY_TYPE, null).iterateNext() instanceof Attr);

//Returns true
console.log(document.evaluate('//a[@id="next"]', document,
  null, XPathResult.ANY_TYPE, null).iterateNext().nodeType === Node.ELEMENT_NODE);

//Returns "Next"
console.log(document.evaluate('//a[@id="next"]', document,
  null, XPathResult.ANY_TYPE, null).iterateNext().textContent);

//Returns true
console.log(document.evaluate('//a[@id="next"]/text()', document,
  null, XPathResult.ANY_TYPE, null).iterateNext() instanceof Node);

//Returns true
console.log(document.evaluate('//a[@id="next"]/text()', 
  document, null, XPathResult.ANY_TYPE, null).iterateNext().nodeType === Node.TEXT_NODE);

//Returns "Next"
console.log(document.evaluate('//a[@id="next"]/text()', document, 
  null, XPathResult.ANY_TYPE, null).iterateNext().nodeValue);
<!DOCTYPE html>
<html>
<body>
<a href="?page=3" id="next">Next</a>
</body>
</html>

以下是一些可能会对您有帮助的链接：

3
你可以使用Element.attributes属性。
或者getAttribute()方法 ```document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().attributes['href'].value```
```document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().getAttribute('href')```
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接