JavaScript获取同名表单元素技巧

一分耕耘，一分收获！既然打开了这篇文章《JavaScript获取同名类表单元素方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

本文旨在解决在多个表单中使用相同类名时，如何通过 JavaScript 准确访问特定表单内的元素。通过修改 getElementById 的用法，并结合 getElementsByClassName 和 value 属性，可以有效地提取隐藏输入控件的值。此外，本文还推荐使用 console.log 进行调试，以便更清晰地查看变量信息。

在Web开发中，经常会遇到多个表单具有相同类名的情况。在这种情况下，如何使用 JavaScript 准确地访问特定表单中的元素就成为一个常见问题。本文将详细介绍如何使用 getElementById 和 getElementsByClassName 方法来解决这个问题，并提供示例代码。

使用 getElementById 和 getElementsByClassName

getElementById 方法用于通过元素的 id 属性获取元素。需要注意的是，getElementById 接收的是 id 的值，而不是包含 # 的 CSS 选择器语法。

getElementsByClassName 方法用于获取具有指定类名的所有元素。它返回一个 HTMLCollection 对象，你可以通过索引访问集合中的元素。

以下是一个示例，展示如何访问具有相同类名的表单元素：

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"; // Corrected: Removed '#'
    productList(formId);
  });

  product2.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "productId_2"; // Corrected: Removed '#'
    productList(formId);
  });

  product3.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "productId_3"; // Corrected: Removed '#'
    productList(formId);
  });
});


function productList(formId) {
  var a = document.getElementById(formId).getElementsByClassName("productId")[0];
  //testing
  console.log(formId, a.value); // Corrected: Used console.log and accessed the value
}

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      &lt;input type=&quot;hidden&quot; class=&quot;productId&quot; value=&quot;item_1&quot;&gt;
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      &lt;input type=&quot;hidden&quot; class=&quot;productId&quot; value=&quot;item_2&quot;&gt;
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product" id="productId_3">
    <form action="" class="product">
      <h1>balls</h1>
      <p>a ball bering</p>
      &lt;input type=&quot;hidden&quot; class=&quot;productId&quot; value=&quot;item_3&quot;&gt;
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

代码解释:

1. 事件监听: 代码首先使用 document.addEventListener("DOMContentLoaded", ...) 确保在 DOM 加载完成后执行 JavaScript 代码。
2. 获取表单元素: 使用 document.querySelector("#productId_1") 等方法获取每个表单元素。
3. 添加事件监听器: 为每个表单的 submit 事件添加监听器。当表单提交时，阻止默认行为 (e.preventDefault()) 并调用 productList 函数。
4. 传递表单 ID: 将表单的 id (例如 "productId_1") 作为参数传递给 productList 函数。
5. productList 函数:
   • 使用 document.getElementById(formId) 获取指定 id 的表单元素。
   • 使用 getElementsByClassName("productId")[0] 获取该表单中第一个类名为 "productId" 的元素。
   • 使用 a.value 获取该元素的值。
   • 使用 console.log(formId, a.value) 将表单 ID 和元素值输出到控制台。

注意事项和最佳实践

• 避免使用 alert 进行调试： alert 会阻塞 JavaScript 代码的执行，影响用户体验。推荐使用 console.log 将信息输出到控制台，方便调试。
• 确保 ID 的唯一性： id 属性在 HTML 文档中必须是唯一的。如果存在重复的 id，getElementById 方法只会返回第一个匹配的元素。
• 使用 querySelector 和 querySelectorAll： querySelector 和 querySelectorAll 方法可以使用 CSS 选择器来选择元素，功能更强大，代码更简洁。例如，可以使用 document.querySelector("#productId_1 .productId") 来获取 id 为 "productId_1" 的表单中类名为 "productId" 的元素。
• 考虑使用事件委托： 如果有很多表单元素需要添加事件监听器，可以考虑使用事件委托，将事件监听器添加到父元素上，减少代码量和提高性能。

总结

通过正确使用 getElementById 和 getElementsByClassName 方法，可以有效地访问具有相同类名的表单元素。同时，注意调试方法和最佳实践，可以提高开发效率和代码质量。在实际开发中，应根据具体情况选择最适合的方法来访问和操作 DOM 元素。

今天关于《JavaScript获取同名表单元素技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！