javascript - 什么是 FORM 等同于 DOM 的 getNextSibling？

Question

我有一个表格，如下:

<FORM name="form1">
    <TABLE onkeypress="focusNextFormElement(event)">
        <TR>
            <TD><INPUT name="SomeObscureName"></TD><TD>Some data</TD>
        </TR>
        <TR>
            <TD><INPUT name="ThisName"><span>Here's some obscure text.</span></TD><TD>Some data</TD>
        </TR>
        <TR>
            <TD><INPUT name="someNameIdontKnow"></TD><TD>Some data</TD>
        </TR>
    </TABLE>
</FORM>

有没有更好、更高效的方法来编写这个函数？ (当然，这是一个简化的例子)

function focusNextFormElement(ev){
    var el = ev.target;
    var f = el.form;
    var xx = f.elements.length - 1;
    for(var x = 0; x < xx; x++){
        if(f.elements[x] === el){
            f.elements[x+1].focus();
        }
    }
}

此表单上可能有数千个元素，我认为每次函数运行时循环遍历它们并不是特别有效。

另外，我可以用我的鼠标任意选择一个输入，所以跟踪阵列可能没有多大用处。

我无法控制页面的生成，因为它是一个帮助另一个页面自动化的 greasemonkey 脚本。

编辑 感谢@Trincot，从更广泛的 Angular 来看，感谢@Oriol，找到了答案。

function nextFormSibling(el){
    var elems = el.form.elements;
    var idx = [].indexOf.call(elems, el);
    return elems[idx+1] || el;
}

function previousFormSibling(el){
    var elems = el.form.elements;
    var idx = [].indexOf.call(elems, el);
    return elems[idx-1] || el;
}

Answer 1

您可以在表单的元素集合上调用 indexOf() 获取元素的索引。尽管此集合不是原生 JavaScript 数组，但您可以像这样使用 indexOf.call:

function nextFormElement(el) {
    var f = el.form;
    if (f) return f.elements[1+[].indexOf.call(f.elements, el)];
}

这是一个演示片段，它使用此函数在单击表单元素时将焦点移动到下一个元素。这显然毫无用处，但它表明它有效:

function nextFormElement(el) {
    var f = el.form;
    if (f) return f.elements[1+[].indexOf.call(f.elements, el)];
}

function focusNextFormElement(ev){
    var el = nextFormElement(ev.target);
    if (el) el.focus();
}

document.querySelector('form').onclick = focusNextFormElement;

<FORM name="form1">
    <TABLE onkeypress="focusNextFormElement(event)">
        <TR>
            <TD><INPUT name="SomeObscureName"></TD><TD>Some data</TD>
        </TR>
        <TR>
            <TD><INPUT name="ThisName"><span>Here's some obscure text.</span></TD><TD>Some data</TD>
        </TR>
        <TR>
            <TD><INPUT name="someNameIdontKnow"></TD><TD>Some data</TD>
        </TR>
    </TABLE>
</FORM>