xpath 及js/jQuery处理函数

简介

XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。

在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）

节点关系包括

• 父 Parent
• 子 Children
• 同胞 Sibling
• 先辈 Ancestor
• 后代 Descendant

XPath语法
XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。

最有用的路径表达式:

表达式	描述
nodename	选取此节点的所有子节点。
/	从根节点选取。
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
.	选取当前节点。
..	选取当前节点的父节点。
@	选取属性。

谓语 Predicates
谓语用来查找某个特定的节点或者包含某个指定的值的节点。
谓语被嵌在方括号中。

通配符

通配符	描述
*	匹配任何元素节点。
@*	匹配任何属性节点。
node() 匹配任何类型的节点。

jquery

var $shadow = new Object();  
    /** 
        获取元素的xpath 
        特性： 
        - 转换xpath为csspath进行jQuery元素获取 
        - 仅生成自然表述路径（不支持非、或） 
        @param dom {String/Dom} 目标元素 
        @returns {String} dom的xpath路径 
    */  
    $shadow.domXpath = function(dom) {  
      dom = $(dom).get(0);  
      var path = "";  
      for (; dom && dom.nodeType == 1; dom = dom.parentNode) {  
        var index = 1;  
        for (var sib = dom.previousSibling; sib; sib = sib.previousSibling) {  
          if (sib.nodeType == 1 && sib.tagName == dom.tagName)  
            index++;  
          }  
        var xname =  dom.tagName.toLowerCase();  
        if (dom.id) {  
          xname += "[@id=\"" + dom.id + "\"]";  
        } else {  
          if (index > 0)  
            xname += "[" + index + "]";  
        }  
        path = "/" + xname + path;  
      }  

      path = path.replace("html[1]/body[1]/","html/body/");  

            return path;  
    };  


/** 
            根据xpath获取元素 
            特性： 
            - 转换xpath为csspath进行jQuery元素获取 
            - 仅支持自然表述（不支持非、或元素选取） 
            @param xpath {String} 目标元素xpath 
            @returns {jQuery Object} 元素/元素集合 
    */  
    $shadow.xpathDom = function(xpath){  
            // 开始转换 xpath 为 css path  
            // 转换 // 为 " "  
            xpath = xpath.replace(/\/\//g, " ");  
            // 转换 / 为 >  
            xpath = xpath.replace(/\//g, ">");  
            // 转换 [elem] 为 :eq(elem) ： 规则 -1  
            xpath = xpath.replace(/\[([^@].*?)\]/ig, function(matchStr,xPathIndex){  
                    var cssPathIndex = parseInt(xPathIndex)-1;  
                    return ":eq(" + cssPathIndex + ")";  
            });  
            // 1.2 版本后需要删除@  
            xpath = xpath.replace(/\@/g, "");  
          // 去掉第一个 >  
          xpath = xpath.substr(1);  
          alert(xpath);  
                // 返回jQuery元素  
          return $(xpath);  
    };  

js，获取元素的xpath

function readXPath(element) {
    if (element.id!==""){//判断id属性，如果这个元素有id，则显 示//*[@id="xPath"]  形式内容
        return '//*[@id=\"'+element.id+'\"]';
    }

    if (element.getAttribute("class")!==null){ //判断class属性，如果这个元素有class，则显 示//*[@class="xPath"]  形式内容
        return '//*[@class=\"'+element.getAttribute("class")+'\"]';
    }
    //因为Xpath属性不止id和class，所以还可以更具class形式添加属性
    //这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用）

    if (element==document.body){//递归到body处，结束递归
        return '/html/'+element.tagName;
    }

    var ix= 0,//在nodelist中的位置，且每次点击初始化
          siblings= element.parentNode.childNodes;//同级的子元素

    for (var i= 0,l=siblings.length; i<l; i++) {
        var sibling= siblings[i];
        if (sibling==element){//如果这个元素是siblings数组中的元素，则执行递归操作
            return arguments.callee(element.parentNode)+'/'+element.tagName+((ix+1)==1?'':'['+(ix+1)+']');//ix+1是因为xpath是从1开始计数的，element.tagName+((ix+1)==1?'':'['+(ix+1)+']')三元运算符，如果是第一个则不显示，从2开始显示
        }else if(sibling.nodeType==1 && sibling.tagName==element.tagName){//如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加
            ix++;
        }
    }
};