如何使用标准javascript方法选择节点数组

How to select a array of nodes using standard javascript methods

本文关键字：选择 节点 数组 方法 javascript 何使用 标准      更新时间：2023-09-26

我有一个元素数组，我想从列表中检索，我无法更改元素，我通常使用jQuery，调用将是：

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

然而，我无法就此起诉jquery或其他选择器框架，应该如何做到这一点。

注意：//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结构的信息，也可以编写递归函数或简化代码。

根据我对您问题的理解，您希望在一个数组中从文档中获得所有div、ol、li、h3或a元素，而不依赖于任何javascript框架。

我想我会做这样的事。

http://jsfiddle.net/UP3nH/

更新

@Felix Kling指出，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);​
相关文章：