如何通过元素id/name获取其在form的elements集合中的索引值

你可以通过两种方式实现需求，分别是扩展Element原型或者编写独立工具函数：

方案1：扩展Element原型（调用方式和你示例的写法完全一致） #

代码实现：

Element.prototype.getDOMNodeIndex = function() {
  // 校验当前元素是否归属于表单
  if (!this.form) return -1;
  // 遍历表单elements集合匹配元素
  for (let i = 0; i < this.form.elements.length; i++) {
    if (this.form.elements[i] === this) {
      return i;
    }
  }
  // 未匹配到返回-1做异常兼容
  return -1;
}

调用示例：
var n = document.getElementById('test2').getDOMNodeIndex(); // n = 23

方案2：独立工具函数（不污染原型，更符合工程规范） #

代码实现：

function getFormElementIndex(el) {
  if (!el || !el.form) return -1;
  // 把类数组的elements转为数组后直接调用findIndex匹配
  return Array.from(el.form.elements).findIndex(item => item === el);
}

调用示例：
var n = getFormElementIndex(document.getElementById('test2')); // n = 23

注意：表单的elements集合是动态实时的，如果后续有DOM增删操作，返回的索引会同步更新；如果元素不属于任何表单，会返回-1。

内容的提问来源于stack exchange，提问作者Vasanth S