JavaScript's XPath:如何获取元素的属性值

JavaScript's XPath: How to get the attribute value of an element?

本文关键字：获取 元素 属性 何获取 XPath JavaScript      更新时间：2023-09-26

我想获得具有特定id的特定元素的属性值。例如，我想获得a标签的href，其id是下一个:

<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'

试试这样:

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>

一些可以帮助你的链接:

  • DOM元素的属性引用

  • 节点类型

你可以使用元素。属性属性

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

或getAttribute()方法

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

相关文章：