Javascript Code for Multiple querySelectorAll() in Specific Order

How to use Javascripts querySelectorAll() in a manner that the elements are return in specific order

Lets say you have a form that has a bunch of input elements that all have the class="profileelem". These elements consist of many different types of input elements including ...

Lets say some of these elements with class="profileelem" are ...

• select elements and some of these select elements also have an additional class of captcha so these elements have a class="captcha profileelem"
• input elements with type="text".
• file input elements.

You want to be able to use querySelectorAll in a manner that the elements are return in this specific order

1. elements with the class="captcha profileelem".
2. file input elements.
3. All the remaining elements with class="profileelem"

Method #1 to use querySelectorAll() for multiple elements and have the elements combined in a specific order

querySelectorOrdered =(...selectors)=> { let arrOut = []; for(let i = 0; i < selectors.length; i++) { arrOut.push(...document.querySelectorAll(selectors[i])); } return arrOut; }

How you would use this function ...

const elemsOrdered = querySelectorOrdered( ".profileelem.captcha", "input[type='file'].profileelem", ".profileelem:not(.captcha):not(input[type='file'])" );

Method #2 to use querySelectorAll() for multiple elements and have the elements combined in a specific order

let captcha = document.querySelectorAll(".profileelem.captcha"), inputfile = document.querySelectorAll("input[type='file'].profileelem"), remaining = document.querySelectorAll(".profileelem:not(.captcha):not(input[type='file'])"), elemsOrdered = [...captcha, ...inputfile, ...remaining];