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>