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

javascript xpath

19,755

Solution 1

Just try something like this:

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

Depending on the element type you specify in your xpath (element node, text node, attribute), iterateNext() returns different type of object. In this case, specifying @href attribute, it returns a javascript Attr object with the property value containing the value of the attribute. Continuing with your example:

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

You can try next examples:

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

Some links that could help you:

Solution 2

You can use the Element.attributes property

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

or the getAttribute() method

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

19,755

Author by

Bob Torrent

Updated on June 17, 2022

Comments

Bob Torrent almost 2 years
I want to get the value of an attribute of a specific element that has a specific id. For an example I want to get the href of the a tag whose id is next:
```
<a href="?page=3" id="next">Next</a>
```
I know I can get it like this:
```
console.log(document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().href);
```
But the matter is that in my case the name of the attribute may differ and I need a way to specify it via the xpath query. Something like this:
```
'//a[@id="next"]/@href'
```