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

Question

I would like to write a JS generic function that can process indifferently a single element selected by its ID or multiple element selected by class.

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

My problem is to write the function. I started something like:

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

I'm not really confident in this solution:

• not sure about the test ( typeof ... == undefined )
• not sure about the loop, map should probably be a better option

Since this should be something commonly used, I'm convinced that some of you has already think to the best way to write this code.

Answer 1

You can probably just accomplish this via a wrapper for the querySelectorAll() function, which is a built-in function used to easily query the DOM:

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

This will return aNodeList of the matching elements (first checking for a given id attribute and if that fails, attempting to find any elements sharing the same name as a class attribute).

So if you wanted to perform some process, you could simply throw an iterator on the result if one exists and perform it against each element:

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

Example

 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>