如何使用XPath通过嵌套在其他元素中的CSS类找到元素 - How can I find an element by CSS class nested inside other elements with XPath?

How can I find an element by CSS class nested inside other elements with XPath?

我想提取复杂选择器中的所有链接，如- .timestream .ui-ContentBottom h1 a。我知道如何做到这一点与简单的链接，就像一个单一的选择器，如a:

 $dom = new DOMDocument;
 $dom->loadHTML($html);
 $xpath = new DOMXPath($dom);
 $nodes = $xpath->query('//a/@href');
 foreach($nodes as $href) {
   echo $href->nodeValue;
 }

我是xPath新手，如果有任何帮助，我将不胜感激。

下面的XPath表达式应该适合您:

//*[contains(@class, "timestream")]//*[contains(@class, "ui-ContentBottom")]//h1//a/@href

这里的问题是XPath没有本地的class选择器。换句话说，contains(@class, "smth")与.smth并不完全相同，但是，在实践中，它通常用于在多值类属性值中匹配单个类。参见:

使用xpath选择css类

xpath允许您搜索文档，例如XML或HTML文件。

xpath不会在路径中显示类，但会显示带有@符号的id。

可以通过几种方式获得xpath。Chrome中的一种方法是查看元素的来源，右键单击它并单击Copy XPath。

当我在回答这个问题的文本区域框上执行此操作时，我收到以下xpath::

//*[@id="wmd-input"]

不要让它迷惑你。下面是一个更简单的例子

/html/body

body元素的xpath。

我写了一个小函数，可以帮助你把xpath转换成元素。

function xpath(path){
    for (var found, x = document.evaluate(path, document, null, XPathResult.ANY_TYPE, null), result = []; found = x.iterateNext();) {
        result.push(found);
    }
    return result;
}

该函数在textarea上运行时会产生以下结果::

xpath('//*[@id="wmd-input"]');
[<textarea id="wmd-input" class="wmd-input processed" name="post-text" cols="92" rows="15" tabindex="101" data-min-length></textarea>]

现在你有了元素，你可以像下面的例子一样修改它:

var test = xpath('/html/body');
test[0].innerHTML='bye';