本文旨在解决在包含多个表单的网页中，如何使用 JavaScript 准确访问特定表单内的元素，尤其是当不同表单中的元素具有相同的类名时。文章将通过示例代码详细讲解如何通过表单的 ID 来定位表单，并获取表单内特定类名的元素的值。同时，也会介绍一些调试技巧，帮助开发者更好地理解和排查问题。
在构建复杂的网页时，经常会遇到需要处理多个表单的情况。这些表单可能包含具有相同类名的元素，例如隐藏的输入框，用于存储数据。 如何使用 JavaScript 精确地访问这些元素的值，就成了一个常见的问题。 本文将提供一种解决方案，通过使用表单的 ID 来定位表单，然后获取表单内特定类名的元素。
使用 getElementById 和 getElementsByClassName
核心思路是首先使用 document.getElementById() 方法根据表单的 id 属性获取特定的表单元素。 然后，使用 getElementsByClassName() 方法在该表单元素中查找具有特定类名的元素。
以下是一个示例：
立即学习“Java免费学习笔记（深入）”；
Products:
对应的 JavaScript 代码如下：
document.addEventListener("DOMContentLoaded",() =>{
const product1 = document.querySelector("#productId_1")
const product2 = document.querySelector("#productId_2")
const product3 = document.querySelector("#productId_3")
product1.addEventListener("submit",e=>{
e.preventDefault();
var formId = "productId_1";
productList(formId);
});
product2.addEventListener("submit",e=>{
e.preventDefault();
var formId = "productId_2";
productList(formId);
});
product3.addEventListener("submit",e=>{
e.preventDefault();
var formId = "productId_3";
productList(formId);
});
});
function productList(formId){
var a = document.getElementById(formId).getElementsByClassName("productId")[0];
//testing
console.log(formId, a.value);
}代码解释：
- document.addEventListener("DOMContentLoaded", ...): 确保在 DOM 加载完成后执行 JavaScript 代码。
- const product1 = document.querySelector("#productId_1"): 获取到对应的form表单
- product1.addEventListener("submit",e=>{ ... });: 为每个表单的提交按钮添加事件监听器。 当表单提交时，阻止默认的提交行为，并调用 productList() 函数，传递表单的 id 作为参数。
- function productList(formId): 接收表单的 id 作为参数。
- document.getElementById(formId): 使用 document.getElementById() 方法，传入表单的 id，获取特定的表单元素。注意，这里传递的 formId 变量的值应该是不带 # 符号的 ID 值，例如 "productId_1"，而不是 "#productId_1"。
- .getElementsByClassName("productId")[0]: 使用 getElementsByClassName() 方法，在获取到的表单元素中查找类名为 "productId" 的元素。 由于 getElementsByClassName() 返回的是一个 HTMLCollection 集合，因此需要使用 [0] 来获取第一个元素。
- console.log(formId, a.value): 使用 console.log() 打印表单的 id 和获取到的元素的值。 使用 a.value 可以获取 input 元素的值。
注意事项
- getElementById() 的参数: getElementById() 方法只需要 id 的值，不需要 # 选择器语法。
- getElementsByClassName() 的返回值: getElementsByClassName() 返回一个 HTMLCollection，即使只有一个匹配的元素，也需要使用索引 [0] 来访问它。
- 调试: 使用 console.log() 进行调试比 alert() 更方便，因为 console.log() 可以输出更详细的信息。
总结
通过 document.getElementById() 和 getElementsByClassName() 方法，可以准确地访问具有相同类名的表单内的元素。 关键在于首先使用 getElementById() 定位到特定的表单，然后再在该表单内查找具有特定类名的元素。 同时，使用 console.log() 进行调试可以帮助开发者更好地理解代码的执行过程。
