如何选择使用标准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);​