get HTML DOM index by Id - html

Question

Eg. document.form[0].elements[23] will result some input <input id = test2> .
I need to get that 23 index value by id or name = 'test2' like
var n = document.getElementById('test2').getDOMNodeIndex(); // n = 23

Answer 1

This solution may be slightly clunky, but it works as demonstrated below.
I generated 25 input elements and gave them unique IDs.
Then I selected a random index among the Form.elements and printed it to the console.
Then I iterated over the form.elements until I found the matching .outerHTML values (JSON.stringified). When a match is found, return that index.
const theForm = document.forms[0];
const randomIndex = Math.floor(Math.random() * theForm.elements.length);
console.log(randomIndex);
const theInput = theForm.elements[randomIndex];
const formElementsIndexOf = (form, element) => {
let search = JSON.stringify(element.outerHTML);
for (let i = 0; i < form.elements.length; i++) {
if (JSON.stringify(form.elements[i].outerHTML) === search) {
return i;
}
}
};
console.log(formElementsIndexOf(theForm, theInput));
<form>
<input type="text" id="text0">
<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
<input type="text" id="text4">
<input type="text" id="text5">
<input type="text" id="text6">
<input type="text" id="text7">
<input type="text" id="text8">
<input type="text" id="text9">
<input type="text" id="text10">
<input type="text" id="text11">
<input type="text" id="text12">
<input type="text" id="text13">
<input type="text" id="text14">
<input type="text" id="text15">
<input type="text" id="text16">
<input type="text" id="text17">
<input type="text" id="text18">
<input type="text" id="text19">
<input type="text" id="text20">
<input type="text" id="text21">
<input type="text" id="text22">
<input type="text" id="text23">
<input type="text" id="text24">
</form>