JavaScript 函数可处理按 ID 选择的单个元素和按类选择的多个元素

Question

我想编写一个 JS 通用函数，可以无差别地处理按 ID 选择的单个元素或按类选择的多个元素。

var el1 = document.getElementById('myId');
myFunction(el1)
var el2 = document.getElementsByClassName('myClass');
myFunction(el2)

我的问题是编写函数。我开始了类似的事情:

function myFunction(el) {
    if (typeof el == undefined) process(el);
    else {
        for (let i=0 ; i<el.length ; i++)
            process(el[i]);
    }
}

我对这个解决方案不太有信心:

• 不确定测试(typeof ... == undefined)
• 不确定循环，map 可能是更好的选择

由于这应该是常用的东西，我相信你们中的一些人已经想到了编写此代码的最佳方法。

Answer 1

您可能可以通过 querySelectorAll() 的包装器来完成此操作function，这是一个内置函数，用于轻松查询 DOM:

function myFunction(selector) {
    return document.querySelectorAll(`#${selector}`) || document.querySelectorAll(`.${selector}`);
}

这将返回 NodeList匹配元素的列表(首先检查给定的 id 属性，如果失败，则尝试查找与 class 属性共享相同名称的任何元素)。

因此，如果您想执行某些过程，您可以简单地在结果上抛出一个迭代器(如果存在)并对每个元素执行它:

function myFunction(selector) {
     let nodes = document.querySelectorAll(`#${selector}`) || document.querySelectorAll(`.${selector}`);
     if(nodes) {
         for (var i = 0, i < nodes.length; i++) {
             process(nodes[i]);
         }
     }
}

示例

function myFunction(selector) {
  return document.querySelectorAll(`#${selector}`) || document.querySelectorAll(`.${selector}`);
}

<div id='id'>id</div>
<div class='class'>class</div>

<br />
<button onclick='alert(myFunction("id"));'>Find By ID</button>
<button onclick='alert(myFunction("class"));'>Find By Class</button>