javascript - 在 Javascript 中循环访问数千个表单元素的最快方法

Question

我正在尝试循环数千个 javascript 元素。特别是复选框和选择。复选框需要在选中/取消选中之间切换，并根据是否选中主复选框来选择需要禁用/启用。

 <script>
 function processFormElem(min, max, isChecked) {
    for (var i=min; i < max; i++) {
        document.getElementById('chkbox_'+i).checked = isChecked;
        document.getElementById('select_'+i).disabled = !(isChecked);
    }
}
</script>

 Check this: <input onchange='processFormElem(0,10000,this.checked);' type='checkbox'  value = '0'><br/><br/>

 <?php
 for ($i=0; $i < 10000; $i++) {
     echo "Check: <input type='checkbox' id='chkbox_$i' value = '1'> ";
     echo "Select: <select disabled='disabled'  id='select_$i'><option selected>1<option>xyz</select><br/>";
 }
 ?>

这段代码完成了所需的工作，但处理表单元素的速度非常慢，我可以注意到延迟。有什么办法可以让它更快吗？

Answer 1

如果您的复选框和选择框都是紧邻的，请尝试使用 nextElementSibling 。问题是 document.getElementById 必须搜索 DOM 树中的每个元素以找到具有匹配 ID 的元素(尽管底层实现可能使用哈希表或其他东西来提高 ID 查找性能)

无论哪种方式，使用 nextElementSibling 都可以让您像遍历树一样遍历元素，从而节省查找时间。

例如:

var cb = document.getElementById('chkbox_' + min),
    sb = document.getElementById('select_' + min);
while (cb !== null && sb !== null) {
    cb.checked = isChecked;
    sb.disabled = !isChecked;

    cb = cb.nextElementSibling;
    sb = sb.nextElementSibling;
}

---

编辑:

正如 David 在下面指出的，并非所有浏览器都支持 nextElementSibling。您可以使用 nextSibling 解决这个问题。

而不是:

cb = cb.nextElementSibling;

做:

while(cb !== null && cb.nodeName != 'Element') { cb = cb.nextSibling; }

话虽这么说，不支持 nextElementSibling 的浏览器正变得越来越不常见，而且 nextSibling 解决方案本身也有大量开销。如果您想支持旧版浏览器，这取决于您(或者可能是您的老板)。