这是因为 HTML 规范明确规定了表单提交的行为，其中一个关键点是表单必须“可导航”（n*igable）才能被提交。而表单是否可导航，取决于它是否连接到 DOM 树。

HTML 规范的解释

根据 HTML 规范，form.submit() 方法会调用内部的“提交表单”算法。该算法首先检查表单是否可以导航。如果表单不能导航，则算法直接返回，不执行任何操作。

那么，什么情况下表单不能导航呢？规范中指出，对于

示例代码

下面的代码演示了两种情况：一种是将表单添加到 DOM 树，另一种是不添加。

AI产品设计工具

情况 1：表单添加到 DOM 树

var form = document.createElement("form");
form.method = "POST";
form.action = "//test.local/login.php";
form.style.display = 'none'; // 可以隐藏表单

document.body.appendChild(form); // 添加到 DOM 树

form.submit(); // 表单将被提交

在这个例子中，表单被添加到 document.body 中，因此它是 DOM 树的一部分。form.submit() 方法可以正常工作，表单将被提交到指定的 URL。

情况 2：表单未添加到 DOM 树

var form = document.createElement("form");
form.method = "POST";
form.action = "//test.local/login.php";
form.style.display = 'none';

// 注意：这里没有将表单添加到 DOM 树

form.submit(); // 表单不会被提交

在这个例子中，表单没有添加到 DOM 树中。因此，当调用 form.submit() 方法时，由于表单不可导航，该方法不会执行任何操作，表单不会被提交。

总结与注意事项

• DOM 依附性至关重要： 在使用 J*aScript 提交表单时，必须确保表单元素已添加到文档的 DOM 树中。
• 隐藏表单： 可以使用 style.display = 'none' 或其他 CSS 属性来隐藏表单，而不会影响其提交功能。
• 规范依据： HTML 规范是理解 Web 技术行为的权威来源。

理解 DOM 依附性对于正确使用 J*aScript 操作表单至关重要。通过本文的解释和示例，你应该能够更好地理解为什么 form.submit() 方法在表单未连接到 DOM 时不起作用，并避免相关的错误。记住，表单必须是文档 DOM 树的一部分才能被成功提交。