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'
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:
DOM element's attribute reference
Node Types
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With