获取当前聚焦元素在父元素中的下标--原生JavaScript

1、场景

在做关于el-date-picker时间控件的enter键切换时，type="datetimerange"时，在开始时间的input中按enter键，会直接切换到下个控件，不会聚焦到结束时间的input中，这是因为开始和结束时间的input是在同一个控件里。如下所示：

2、处理跳转不到结束日期的问题

实现思路：
【1】时间控件中会有两个input元素，如下图：

【2】获取当前聚焦的元素，看它是否是结束日期所在的input，若是，则跳转到下一个控件，若不是，则聚焦到结束日期的input上。代码如下：

if(keyObj.key==='enter'&&currentComponet.type==='daterange') {
  if([].indexOf.call(document.activeElement.parentNode.querySelectorAll(document.activeElement.tagName),document.activeElement)===1) {
      event.preventDefault();
      return 'next'; //返回'next'，跳转到下一个控件
  }else{
      currentComponet.refInput[1].focus(); //聚焦到结束日期的input框中
      return false; //返回false,阻止跳转行为
  }
}

上面代码有两个知识点：
（1）如何获取聚焦的元素：使用原生方法document.activeElement，activeElement 属性能返回文档中当前获得焦点的元素。
（2）如何获取聚焦元素在父元素中的下标：[].indexOf.call(document.activeElement.parentNode.querySelectorAll(document.activeElement.tagName),document.activeElement)
document.activeElement.parentNode：获取父节点
document.activeElement.tagName：当前聚焦元素的标签名
document.activeElement：当前聚焦元素
querySelectorAll：querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。NodeList 对象表示节点的集合。
注意:[].indexOf.call(document.activeElement.parentNode.querySelectorAll(document.activeElement.tagName),document.activeElement) 等价于
document.activeElement.parentNode.querySelectorAll(document.activeElement.tagName).indexOf(document.activeElement)
最后实现的效果如下图所示：