Xpath使用总结,javaScripe用来寻找元素的强大工具

本文链接：https://blog.youkuaiyun.com/csdnZhanghaoRed/article/details/53766588

虽然JQ和JS都能很方便的查找包含了ID及类名的元素，但某些情况下，我们需要查找一些不包含类名、ID的元素或节点，就需要XPath来帮忙了。
XPath虽然是被设计用来搜寻XML文档的，不过它也能很好的在HTML文档中工作，并且大部分浏览器也支持通过XPath来查询节点。XPath既然叫Path，就是以路径的形式来指定元素。关于XPath的语法，这里不多赘述，请自行查询相关资料。
XPath的查询函数，在IE中与其他浏览器（Chrome、Firefox、Opear等）是不一样的，所以如果你的网站需要兼容IE，需要注意。

1.Xpath在IE中的查询函数为 document.selectNodes(xpath)，其返回的是一个集合，通过for循环就可以读取所有的元素

var nodes=document.selectNodes("//a[@href]");
for (i=0;i<nodes.length;i++){
    // 对 nodes[i] 执行操作;
}
// 这里要注意，IE对于元素的默认索引序列是从0开始的，不符号W3C标准
// 添加下面这行代码，让其符合W3C标准
document.setProperty("SelectionLanguage","XPath"); //设置语言选择
nodes=document.selectNodes("//div[1]");

2.而其他浏览器的查询函数，调用就稍微复杂一点，都是采用 document.evaluate 这个函数，返回的是一个枚举集合，需要使用 while 循环来枚举元素。

var result = document.evaluate("//a[@href]", document, null, XPathResult.ANY_TYPE, null);
var nodes = result.iterateNext(); //枚举第一个元素
while (nodes){
    // 对 nodes 执行操作;
    nodes=result.iterateNext(); //枚举下一个元素
}

// 如果只查找单个元素，可以简写成这样
nodes=document.evaluate("//div[1]", document).iterateNext();

3.封装方法（区别IE与浏览器），创建在不同浏览器中都可进行XPATH操作的封装方法,以下是参考，并不是具体实现，参考1、2不太笨都应该会封装

//根据指定的XPATH表达式查找满足条件的所有节点
//@param xmldoc 执行查找的节点
//@param sXpath xpath的表达式
function selectNodes(xmldoc,sXpath){  

    if(window.ActiveXObject){       
        //IE浏览器     
        return xmldoc.selectNodes(sXpath);        
    }else if(window.XPathEvaluator){      
        //FireFox类浏览器       
        var xpathObj=new XPathEvaluator();  

        if(xpathObj){  
                 var result=xpathObj.evaluate(sXpath,xmldoc,null,XPathResult.ORDERED_NODE_ITEARTOR_TYPE,null);        
            var nodes=new Array();        
            var node;        
            while((node = result.iterateNext())!=null) {        
                nodes.push(node);       
            }        
           return nodes;  

        }else{  

            return null;                              
        }  

    }else{        
        return null;        
    }        
}  

//根据指定的XPATH表达式查找满足条件的第一个节点
//@param xmldoc 执行查找的节点
//@param sXpath xpath的表达式
function selectSingleNode(xmldoc,sXpath){  
    if(window.ActiveXObject){       
        //IE浏览器        
        return xmldoc.selectSingleNode(sXpath);        
    }else if(window.XPathEvaluator){        
        //FireFox类浏览器        
        var xpathObj=new XPathEvaluator();        
        if(xpathObj){        
            var result=xpathObj.evaluate(sXpath,xmldoc,null,XPathResult.ORDERED_NODE_ITEARTOR_TYPE,null);                              
            return result.singleNodeValue;        
        }else{        
            return null;                               
        }        
    }else{        
        return null;        
    }        
}

4.继续封装（IE版本所致）

<html><!DOCTYPE html>
<html>
<body>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

xml=loadXMLDoc("books.xml");
path="/bookstore/book[1]/title";
// code for IE
if (window.ActiveXObject)
{
var nodes=xml.selectNodes(path);

for (i=0;i<nodes.length;i++)
  {
  document.write(nodes[i].childNodes[0].nodeValue);
  document.write("<br>");
  }
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE,null);
var result=nodes.iterateNext();

while(result)
  {
  document.write(result.childNodes[0].nodeValue);
  document.write("<br>");
  result=nodes.iterateNext();
  }
}
</script>
</body>
</html>