根据W3说明 “XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。”
主流浏览器除了IE之外全部支持解析xpath的方法 document.evaluate
下面记录一些xpath中常用的表达式
1.HTML页面结构如下
<body> <div id="main"> <header> <h1>this is an page about xpath using skills</h1> </header> <div> <table> <tr> <td>name</td><td>link</td> </tr> <tr> <td>mike</td> <td> <a href="http://www.360.com">360</a> <a href="http://www.baidu.com">baidu</a> </td> </tr> <tr> <td>jack</td><td><a href="http://www.google.com">google</a></td> </tr> <tr> <td>luke</td><td><a href="http://www.Twitter.com">Twitter</a></td> </tr> </table> <a>good</a> <a href="http://www.linkwithblank.com"> link </a> <a href="http://www.lastlink.com"> lastlink </a> </div> </div> </body>
一些常用的 xpath方法
{
//获取所有A标签 这里返回按照文档顺序查找到的第一个节点
var linka = document.evaluate("//a", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
console.info(linka.singleNodeValue);
}
{
//获取所有A标签 这里返回所有按照文档顺序查找的所有节点
var links = document.evaluate("//a", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for(var i = 0; i < links.snapshotLength; i++) {
console.info(links.snapshotItem(i).text);
}
}
//常用的匹配的第一个节点的方法
function getSingleNodeByXpath(xpath){
var ret = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return ret.singleNodeValue;
}
{
//获取文本值为google的xpath方法
var node = getSingleNodeByXpath("//a[text()='google']");
console.info(node.outerHTML)
}
{
//获取文本值为google的xpath方法
var node = getSingleNodeByXpath("//a[normalize-space(text())='link']");
console.info(node.outerHTML)
}
{
//过滤空白的字符串
var node = getSingleNodeByXpath("//a[normalize-space(text())='link']/../..");
console.info(node.tagName+"#"+node.id)
}
{
//包含某个字符串
var node = getSingleNodeByXpath("//a[contains(text(),'itter')]");
console.info(node.outerHTML)
}
{
//索引取值，查询依据是根据同一个父节点下的相同子节点来获取的 首先找到的 是 360 baidu两个节点， 然后返回最后一个
var node = getSingleNodeByXpath("//div[@id='main']//a[last()]");
//返回的是<a href="http://www.baidu.com">baidu</a>
console.info(node.outerHTML)
//如果要返回div#main下面的 最后一个lastlink 需要修改为
var node1 = getSingleNodeByXpath("(//div[@id='main']//a)[last()]");
//返回的是<a href="http://www.lastlink.com"> lastlink </a>
console.info(node.outerHTML)
}
[注]
XPathResult 对象 http://www.w3school.com.cn/xmldom/dom_xpathresult.asp
xpath语法 http://www.w3school.com.cn/xpath/index.asp