使用 JavaScript 提交表单时 DOM 依附性的重要性-js教程-PHP中文网

使用 JavaScript 提交表单时 DOM 依附性的重要性

DDD

发布： 2025-10-06 11:45:28

原创

147人浏览过

使用 javascript 提交表单时 dom 依附性的重要性

第一段引用上面的摘要：

本文旨在解释为什么在使用 JavaScript 的 form.submit() 方法提交表单时，表单必须依附于文档 DOM 树。我们将深入探讨 HTML 规范，解释 form.submit() 方法的工作原理，以及为什么未连接到 DOM 的表单无法提交。通过本文，你将理解 DOM 依附性在表单提交过程中的关键作用。

表单提交与 DOM 的关系

在使用 JavaScript 操作 HTML 表单时，我们经常会遇到需要动态创建和提交表单的情况。一个常见的做法是创建一个

元素，设置其属性（如 method 和 action），然后调用 form.submit() 方法来提交表单。然而，你可能会发现，如果表单没有添加到文档的 DOM 树中，form.submit() 方法将不起作用。

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

立即学习“Java免费学习笔记（深入）”；

HTML 规范的解释

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

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

Stable Diffusion

目前最强的开源AI绘画工具

查看详情

元素，如果它没有连接到 DOM 树，则它不能导航。这意味着，只有当表单元素是文档 DOM 树的一部分时，form.submit() 才能正常工作。

示例代码

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

情况 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() 方法时，由于表单不可导航，该方法不会执行任何操作，表单不会被提交。