currentForm参数与getElementById的优劣对比及选择规则咨询

这是个很棒的问题！两种方法确实都能正常运行，但它们适用的场景和特性差异还挺明显的，先来看你给出的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Test </title>
<script type="text/javascript">
function checkLabel(currentForm) {
// which method is better?
// Method 1:
// var box = document.getElementById("cookiesCB");
// if(box.checked == false)
// Method 2:
// if(currentForm.cookiesCB.checked == false)
{
 document.getElementById("cookiesLB").style="border: 1px solid red";
 return false;
}
return true;
}
</script>
</head>
<body>
<form method="get" action="http://www.google.com" onsubmit="return checkLabel(this)">
<label id="cookiesLB">
<input type="checkbox" id="cookiesCB"> use cookies
</label>
<input type="submit">
</form>
</body>
</html>

下面我来帮你拆解两种方式的优缺点和适用场景：

一、通过表单实例（currentForm.cookiesCB）获取元素的优缺点 #

优点： #

• 上下文精准，避免冲突：只会在当前提交的表单范围内查找元素，哪怕页面中不小心出现了重复ID的元素（虽然标准要求ID唯一，但实际开发中偶尔会有疏漏），也不会搞错目标元素，尤其适合页面存在多个表单的场景。
• 逻辑连贯，贴合表单场景：你是在表单提交的回调里处理逻辑，直接用传入的currentForm（也就是当前表单实例）来访问控件，逻辑上更顺，能明确知道操作的是当前表单内的元素。
• 性能更优：表单实例的元素集合是预存的，不需要遍历整个DOM树查找，在大型DOM结构的页面里，这种方式的查找速度会比getElementById更快一点。

缺点： #

• 依赖表单结构：目标元素必须是当前表单的子元素（或者通过form属性关联到当前表单），如果元素在表单外部，这种方式就无法获取到。
• 依赖控件的name/id属性：标准上，表单实例是通过控件的name属性来访问元素的，虽然有些浏览器支持用id访问，但为了兼容性，最好给表单控件加上name属性（比如你的示例里可以给input加上name="cookiesCB"）。

二、通过getElementById获取元素的优缺点 #

优点： #

• 全局适用：不管元素在不在表单里，只要ID唯一，就能直接找到，适用范围更广，比如你需要操作一个和表单无关的元素时，这种方式更方便。
• 不依赖表单上下文：哪怕你在非表单相关的逻辑里需要操作这个元素，不需要传入表单实例就能直接获取。

缺点： #

• 依赖唯一ID：页面中必须保证ID绝对唯一，否则只会返回第一个匹配的元素，很容易导致逻辑错误，尤其是在动态生成内容的页面里，重复ID的概率更高。
• 性能稍差：需要遍历整个DOM树来查找对应ID的元素，当页面DOM结构复杂时，效率不如表单实例获取的方式。
• 上下文模糊：如果页面有多个表单，用ID获取元素时，你需要额外确认这个元素属于哪个表单，容易混淆，增加出错风险。

三、该怎么选择？ #

• 如果你的逻辑完全针对当前表单内的控件，优先选表单实例（currentForm）的方式，尤其是页面有多个表单或者存在ID重复风险的场景，更安全也更符合业务逻辑。
• 如果需要操作的元素不在当前表单内，或者这个元素的使用场景和表单无关，那getElementById会更合适。
• 小提示：给表单控件加上name属性，能让currentForm.xxx的访问更符合标准，兼容性更好。

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