JavaScript查询以获得类似于XPath搜索的子项

Question

我正在尝试在Javascript中编写一个查询查询HTML中的模式，例如查找“a”元素作为div子元素的子元素。我可以像

//div/*/*/a 

做到这一点在XPath中（理想情况下，我想能够回到这里顶层的div还有一个元素）

我被困试图做到这一点在Javascript中。像

document.getElementsByTagName('div')[*][*].getElementsByTagName('a'); 

东西不起作用：[*]不工作（我希望它会搜索所有直接子）和.getElementsByTagName（“A”）通过看哪个节点，我们对所有的子孙，不只是直接的孩子。有没有写一个类似于XPath的JS查询的简单方法？谢谢。

Answer 1

在所有modern browsers：

document.querySelectorAll('div > * > * > a'); 

Answer 2

您可以评估在浏览器中直接使用Document.evaluate支持在Internet Explorer DOM Level 3的XPath或selectNodes XPath表达式。

function evalXPath(expr) { 
 
    var items; 
 

 
    if (document.evaluate) { 
 
    var result = document.evaluate(expr, document, null, XPathResult.ANY_TYPE, null); 
 
    var item; 
 
    items = []; 
 
    while (item = result.iterateNext()) { 
 
     items.push(item); 
 
    } 
 
    } else if (document.selectNodes) { 
 
    items = document.selectNodes(expr); 
 
    } 
 
    
 
    return items; 
 
} 
 

 
var items = evalXPath('//div/*/*/a'); 
 
console.log('found ' + items.length + ' items');

<div> 
 
    <span> 
 
    <span> 
 
     <a href="#">one</a> 
 
     <a href="#">two</a> 
 
    </span> 
 
    </span> 
 
</div> 
 
<div> 
 
    <span> 
 
    <span> 
 
     <a href="#">three</a> 
 
    </span> 
 
    <span> 
 
     <a href="#">four</a> 
 
    </span> 
 
    </span> 
 
</div>