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++;        }    }};