JavaScript 的 XPath：如何获取元素的属性值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15447334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript's XPath: How to get the attribute value of an element?
提问by Bob Torrent
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 hrefof the atag whose idis next:
我想获取具有特定 id 的特定元素的属性值。对于一个例子，我想要得到的href了的a，其标签id是未来：
<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:
但问题是，在我的情况下，属性的名称可能不同，我需要一种通过 xpath 查询来指定它的方法。像这样的东西：
'//a[@id="next"]/@href'
回答by ljmelgui
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 valuecontaining the value of the attribute. Continuing with your example:
根据您在 xpath 中指定的元素类型（元素节点、文本节点、属性），iterateNext()返回不同类型的对象。在这种情况下，指定 @href 属性，它将返回一个 javascript Attr 对象，该对象的属性value包含该属性的值。继续你的例子：
<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:
一些可以帮助您的链接：
回答by DidThis
You can use the Element.attributes property
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().attributes['href'].value
or the getAttribute() method
document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().getAttribute('href')
document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().getAttribute('href')
