JavaScript的XPath：如何获取元素的属性值？
[英]JavaScript's XPath: How to get the attribute value of an element?
问题描述
I want to get the value of an attribute of a specific element that has a specific id. 
我想获取具有特定ID的特定元素的属性值。 For an example I want to get the href of the a tag whose id is next : 例如，我想获取id为next a标签的href ：
<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. 但是问题在于，就我而言，属性名称可能有所不同，我需要一种通过xpath查询指定属性的方法。 Something like this: 像这样：
'//a[@id="next"]/@href'
2 个解决方案
解决方案1
3 2016-08-03 01:08:33
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. 根据您在xpath中指定的元素类型（元素节点，文本节点，属性）， iterateNext()返回不同类型的对象。 In this case, specifying @href attribute, it returns a javascript Attr object with the property value containing the value of the attribute. 在这种情况下，指定@href属性，它将返回一个JavaScript Attr对象，该对象的属性value包含该属性的值。 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: 一些可以帮助您的链接：
解决方案2
1 2017-01-02 10:30:15
You can use the Element.attributes property 您可以使用Element.attributes属性
document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().attributes['href'].value
or the getAttribute() method 或getAttribute（）方法
document.evaluate('//a[@id="next"]', document, null, XPathResult.ANY_TYPE, null).iterateNext().getAttribute('href')
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.