Как я могу найти элемент по классу CSS, вложенному в другие элементы с помощью XPath?

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 не будет показывать классы в пути, но отобразит идентификаторы с символом @.

xpath можно получить несколькими способами. Один из способов в Chrome - просмотреть источник элемента, щелкнуть его правой кнопкой мыши и нажать Copy XPath.

Когда я делаю это на коробке TEXTAREA я отвечаю на этот вопрос, я получаю следующее :: XPath

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

Не позволяйте, что сбить вас с толку, хотя. Вот более упрощенный пример

/html/body 

Это xpath элемента кузова.

Я написал небольшую функцию, которая поможет вам превратить xpaths в элементы.

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

Эта функция производит следующее при его запуске против этого текстового поля ::

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';