Question

我想提取复杂选择器中的所有链接，例如 - .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的新手，所以任何帮助都会受到赞赏。

Answer 1

以下XPath表达式适用于您：

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

这里的问题是 XPath没有原生class选择器。换句话说，contains(@class, "smth")与.smth不完全相同，但是实际上，它通常用于匹配多值类属性值中的单个类。另见：

Selecting a css class with xpath

Answer 2

xpath可让您搜索文档，例如xml或html文件。

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

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

当我在textarea框中执行此操作时，我正在回答此问题，我收到以下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';

如何通过使用XPath嵌套在其他元素中的CSS类找到元素？

2 个答案: