Chrome和Firefox控制台的妙用之使用XPATH调试两种方式

方法1:

（1）、打开谷歌浏览器，按F12

（2）、ctrl+f

（3）、把xpath=//div[@class='ww_operationBar']/a[@class='qui_btnww_btn js_delete']的位置复制进去，看谷歌能否找到位置

方法2：

Chrome和Firefox控制台的妙用之使用XPATH调试（类似css）：

目前控制台方法和属性有：
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

今天说的是$x命令。

1

$x的用法是 ：$x(xpath表达式)　下面的例子是获取，写文章时的添加随笔这四个词的一个xpath.

$x("//div[@id='Editor_Edit']/div/span")

简单的说下这个xpath，//表示的是不管前面多少级都匹配（包含一级），/是只匹配一级 ，@符号表示的是取元素的属性后面紧跟的=内容就是这个值"Editor_Edit"，看上图我们发现div下面紧挨着的还是div，然后div再下一级就是span了，到此时下xpath可以写成这样了、//div[@id='Editor_Edit']/div/span

目前我们获取的是span的这个节点，文本信息一般在节点里面，获取节点的文本我们用text()或者.innerText,到目前来说我们已经写完了，但是这里要注意的一点是，不同的语言和工具在选择xpath的一些信息的时候，多多少少有点不同，这里我们看一下，我们执行完xpath之后的结

我们发现我们获取了一个text的节点列表集合而不是文本信息：

2.就是我们需要获取它的nodeValue属性才可以。我们再进一步写就是这一样

$x("//div[@id='Editor_Edit']/div/span/text()")[0]（$x("//div[@id='Editor_Edit']/div/span")[0].innerText）

3.实现点击操作

$x("//div[@id='Editor_Edit']/div/span")[0].click（）
　　

 

当前节点的xpath操作

上面都是对元素进行一次xpath操作，有时候我们需要在当前节点下面操作节点，这时候怎么做呢，
我在网上找到了$x的源码：

$x = function (xpath, context) {
        var nodes = [];
        try {
            var doc = (context && context.ownerDocument) || window.document;
            var results = doc.evaluate(xpath, context || doc, null, XPathResult.ANY_TYPE, null);
            var node;
            while (node = results.iterateNext()) {
                nodes.push(node);
            }
        } catch (e) {
             throw e;
        }
        return nodes;
    }

惊讶的发现,$x实际上是两个参数的，第一个参数xpath表达式,第二个参数context,如果没有指定context参数，$x()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM元素集或jQuery对象，那就会在这个 context 中查找。
Context参数需要是一个正常工作的节点对象（DOM对象，而不jQuery对象）。虽然传递jQuery对象也可以起到限定查找范围的作用，但是这样的话，那么jQuery对象的context属性就会变成整个Document对象。
百度首页为例。

$x(".//input[@type='submit']",$x("//form[@id='form']"))