如何選擇使用標準JavaScript方法的節點數組

Question

我有一個元素數組我想從列表中檢索，我無法更改元素，我通常會使用jQuery並且調用將是：

$("//div/ol/li/h3/a"); 

但是我無法爲這個問題起訴jquery或其他選擇器框架，應該怎麼做。

Answer 1

注意：看起來//div/ol/li/h3/a是一個XPath表達式，它不再受jQuery afaik支持。

如果你的目標瀏覽器支持它，你可以簡單地使用querySelectorAll^[MDN]：

var links = document.querySelectorAll('div > ol > li > h3 > a'); 

否則，直接轉換爲：

// root is the element you start with, e.g. `document.body` 
var selector = ['ol', 'li', 'h3', 'a'], 
    set = root.getElementsByTagName('div'); 

for(var i = 0, len = selector.length; i < len; i++) { 
    var tag = selector[i], 
     new_set = []; 

    for(var j = 0, lenj = set.length; j < lenj; j++) { 
     for(var child = set[j].firstChild; child; child.nextSibling) { 
      if(child.nodeName.toLowerCase() === tag) { 
       new_set.append(child); 
      } 
     } 
    } 

    set = new_set; 
} 

最後，set將包含所有鏈接。如果有更多關於HTML結構的信息，人們也可以編寫遞歸函數或簡化代碼。

Answer 2

根據我對您的問題的理解，您希望從單個數組中獲取文檔中的所有div，ol，li，h3或元素，而不依賴任何javascript框架。

我想我會做這樣的事情。

http://jsfiddle.net/UP3nH/

---

UPDATE

@Felix克林指出，在OP試圖在這個問題的使用XPath的選擇。 （這在較新版本的JQuery中已被棄用）

要創建匹配XPath查詢//div/ol/li/h3/a的元素數組，您可以這樣做。

var tags = ['ol', 'li', 'h3', 'a']; 
var result = []; 
var leafs = document.getElementsByTagName(tags[tags.length - 1]); 

for (var i = 0; i < leafs.length; i++) { 
    var a = leafs[i], 
     j = (tags.length - 1); 
    while (a && a.nodeName.toLowerCase() == tags[j].toLowerCase()) { 
     j--; 
     a = a.parentNode; 
     if (j < 0) { 
      result.push(leafs[i]); 
      break; 
     } 
    } 
} 

console.log(result);​