返回不同类型的 JavaScript 函数(Array 与 NodeList)

Question

我编写了一个 JavaScript 函数，它将返回一个包含以某个值开头的 Id 的元素“列表”:

function getElementsWithIdPrefix(prefix){
    if (document.querySelectorAll){
        return document.querySelectorAll('*[id^="' + prefix + '"]');
    } else {
        // none modern browsers support
        var elements = document.getElementsByTagName('*');
        var relevantElements = [];
        for (var i = 0; i < elements.length; i++){
            if (element.id && element.id.indexOf(prefix) !== -1){
                relevantElements.push(element);
            }
        }
        return relevantElements;
    }
}

正如您所看到的，我的函数将返回不同的类型，具体取决于浏览器对 document.querySelectorAll 的支持，我对此有两个问题:

1. 这很糟糕吗？我的意思是 - 在 JavaScript 类型系统中，它是否被视为代码异味或不良实践？
2. 如何自己为每个 Element 创建 Node 对象并构造一个包含这些要返回的元素的新 NodeList？

Answer 1

Is this bad?

可能，但这可能是一个意见问题。

How can I create Node objects for each Element by my self and construct a new NodeList containing these elements to return?

您可以将 QSA 结果转换为真正的数组，如下所示:

return Array.prototype.slice.call(document.querySelectorAll('*[id^="' + prefix + '"]'));

这样，您在这两种情况下都会返回一个数组。

<小时/>

旁注:您必须非常努力才能找到没有 QSA 的浏览器。它适用于所有现代浏览器，还有 IE8。

旁注 2:这一行

if (element.id && element.id.indexOf(prefix) !== -1){

...不查找前缀。它在 ID 中的任何位置查找子字符串匹配。对于前缀，请使用 === 0 (或 element.id.substring(0, prefix.length) === prefix)。