JS—XPath

XPath是設計用來在DOM文檔中查找節點的一種手段,因為對于xml而言,他查找節點是采用標準dom的方法,比較繁雜,所以XPath對于XML處理很重要。但是,在DOM3級才首次實現了這個推薦不標準。IE8及以前采用IE特有的方法。

  • IE中的Xpath
  • 基本方式
    在IE8之前的瀏覽器,XPath是采用內置基于ActiveX的XML DOM文檔對象實現的,在每一個節點上提供了兩個方法:selectSingleNode()和selectNodes()
    這兩個方法都會接受一個Xpath模式(也就是查找路徑)。
    var xmlDom=getXMLDOM("<root><user id='5'>doo</user><user id='6'>Lee</user></root>");
    var node=xmlDom.selectSingleNode("root/user");
    alert(node.tagName)//user
    var nodes=xmlDom.selectNodes("root/user");
    alert(nodes.length)//2
    特點:
    1、selectSingleNode()被用來查找單一節點。
    2、selectNodes()被用來查找符合路徑的一個nodelist。
    3、xmldom不僅是調用這兩個方法的對象,也是參數路徑的上下文節點。指向xml DOM對象,是root的上一層節點。類似于html中的document對象。注意:在使用上下文節點時,要與路徑配合好
    var node=xmlDom.documentElement.selectSingleNode("user");
    4、使用selectSingleNode()查找的單一節點,其實是同一路徑下節點的第一個。
  • 常用語法
    【查找同一路徑下的某個節點】
    var node=xmlDom.selectSingleNode("root/user[1]");
    【獲取節點內的值】
    var node=xmlDom.selectSingleNode("root/user/text()");
    alert(node.nodeValue);
    【不關心層次查詢】
    查找的是xml文檔內的user節點,不關心她在怎樣的上下文中,只要有就可以
    var node=xmlDom.selectSingleNode("http://user");
    是在root下不關心層次查找user
    var node=xmlDom.selectSingleNode("root//user");
    【查找屬性】
    var node=xmlDom.selectSingleNode("root/user[@id='6']");
  • DOM3中的Xpath
    規定了兩個重要類型XpathEvaluator和XpathResult。
    • 獲取單一節點
      【方法1】
      var eva=new XPathEvaluator();
      var result=eva.evaluate('root/user',xmlDom,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null);
      if(result!=null){
      alert(serializeXML(result.singleNodeValue));
      }
      特點:
      1、首先利用XPathEvaluator,創造一個實例,然后調用該實例的evaluate方法,該方法可以根據參數返回節點情況或節點信息。
      2、為該方法傳遞5個參數,(XPath表達式,上下文節點,命名空間求解器(一般null),返回的結果類型,保存結果的XPathResult對象(null))
      3、返回的結果類型有很多種,最常用的一個是:返回匹配的節點集合,另一個是:返回只包含一個節點的節點集合。
      單一節點:XPathResult.FIRST_ORDERED_NODE_TYPE
      節點集合:XPathResult.ORDERED_NODE_ITERATOR_TYPE
      4、.singleNodeValue可以通過結果的這個屬性來返回匹配節點
      【方法2】
      省去創建XPathEvaluator對象,而是直接調用xmlDom對象的evaluate方法。
    • 獲取節點集合
      var eva=new XPathEvaluator();
      var result=eva.evaluate('root/user',xmlDom,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
      if(result!=null){
      var nodes=[];
      var node=result.iterateNext();
      while(node!=null){
      nodes.push(node);
      node=result.iterateNext();
      }
      }
      alert(serializeXML(nodes[1]));
      【特點】
      1、可以通過結果的.iterateNext()這個方法返回遍歷節點對象,
      2、通過while循環,將節點集合放到一個數組中。

跨瀏覽器方法

  • 思考:
    1、XPath中,查找同一個路徑下的某個節點,IE是從0開始,DOM3是從1開始
    2、dom3獨有的功能放棄,為了保證跨瀏覽器
    3、只獲取單一節點與節點列表即可,基本可以完成所有操作。
  • 方法
    //跨瀏覽器單一節點
    function selectSingleNode(xmlDom,xpath){
    var node=null;
    if(typeof xmlDom.evaluate!='undefined'){//DOM3
    var pattern=/[(\d+)]/;
    var flag=xpath.match(pattern);
    var num=0;
    if(flag!=null){
    num=parseInt(RegExp.$1)+1;
    xpath=xpath.replace(pattern,'['+num+']')
    }
    var result=xmlDom.evaluate(xpath,xmlDom,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null);
    if(result!=null){
    node=result.singleNodeValue;
    }
    }else if(typeof xmlDom.selectSingleNode!='undefined'){//IE
    node=xmlDom.selectSingleNode(xpath);
    }
    return node;
    }
    //跨瀏覽器節點集合
    function selectNodes(xmlDom,xpath){
    var nodes=[];
    if(typeof xmlDom.evaluate!='undefined'){//DOM3
    var pattern=/[(\d+)]/;
    var flag=xpath.match(pattern);
    var num=0;
    if(flag!=null){
    num=parseInt(RegExp.$1)+1;
    xpath=xpath.replace(pattern,'['+num+']')
    }
    var result=xmlDom.evaluate(xpath,xmlDom,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
    if(result!=null){
    var node=null;
    while((node=result.iterateNext())!=null){
    nodes.push(node);
    }
    }
    }else if(typeof xmlDom.selectSingleNode!='undefined'){//IE
    nodes=xmlDom.selectNodes(xpath);
    }
    return nodes;
    }
    var node=selectSingleNode(xmlDom,'root/user[0]')
    var nodes=selectNodes(xmlDom,'root/user')
    alert(serializeXML(nodes[1]))
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容