JavaScript function which takes multiple ids and returns multiple elements

This tutorial shows how to implement a javascript function which takes multiple ids and returns multiple elements

document.getElementById() only supports one name at a time and only returns a single node not an array of nodes. You have several different options:

You could implement your own function that takes multiple ids and returns multiple elements.
You could use document.querySelectorAll() that allows you to specify multiple ids in a CSS selector string .
You could put a common class names on all those nodes and use document.getElementsByClassName() with a single class name.
Examples of each option:

someFunc(document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4"));

 

or:

// put a common class on each object

someFunc(document.getElementsByClassName("circles"));

 

or:

function getElementsByIds(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.push(item);
        }
    }
    return(results);
}

 

 

someFunc(getElementsByIds("myCircle1 myCircle2 myCircle3 myCircle4"));
function someFunc(ids) {
    //do your logic
}

 

Thanks for your reading. Please do not forget to leave a comment.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *