通过Id获取HTML DOM索引

Question

例如。

document.form[0].elements[23]

将产生一些输入

<input id = test2>

.

我需要通过 id 或 name = 'test2' 获取

23

索引值

var n = document.getElementById('test2').getDOMNodeIndex(); // n = 23

Answer 1

此解决方案可能有点笨拙，但其工作原理如下所示。

我生成了 25 个输入元素并给了它们唯一的 ID。

然后我在

Form.elements

中选择了一个随机索引并将其打印到控制台。

然后我迭代

form.elements

直到找到匹配的

.outerHTML

值 (JSON.stringified)。找到匹配项后，返回该索引。

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>

Answer 2

测试评论。测试评论。测试评论。测试评论。