Xpath使用總結,javaScripe用來尋找元素的強大工具
阿新 • • 發佈：2019-02-14
雖然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>
5.Xpath語法學習，裡面尋找Xpath
6.JsoupXpath，Jsoup（Java讀取html節點）加強版，路徑採用Xpath格式