在 JavaScript 中查找元素所属的 FORM答案

【问题标题】：Finding the FORM that an element belongs to in JavaScript在 JavaScript 中查找元素所属的 FORM
【发布时间】：2010-10-02 16:39:25
【问题描述】：

如何使用简单/少量的 JavaScript 找出 HTML 元素包含在哪个 FORM 中？在下面的示例中，如果我已经掌握了名为 'message' 的 SPAN，如何轻松访问 FORM 元素？

<form name="whatever">
    <div>
        <span id="message"></span>
    </div>
</form>

SPAN 可能嵌套在其他表或 DIV 中，但似乎过于冗长，无法围绕 .parentElement 进行迭代并沿着树向上工作。有没有更简单更短的方法？

如果它不是 SPAN，而是 INPUT 元素，那会更容易吗？他们是否有一个指向包含 FORM 的属性？谷歌拒绝...

【问题讨论】：

【解决方案1】：

可以通过element.form访问表单元素所属的表单。

当您用作引用的元素不是表单元素时，您仍然需要遍历 parentElement 或使用其他类型的选择器。

使用原型，您可以使用Element.up() 来简化它：

$(element).up('form');

Other answers 对这个问题指出了如何在 jQuery 中做同样的事情。

【讨论】：

【解决方案2】：

您可以在 DOM 树中回溯，直到找到正确的节点：

node = document.getElementById("message");
while (node.nodeName != "FORM" && node.parentNode) {
    node = node.parentNode;
}

【讨论】：

【解决方案3】：

猜猜你必须遍历所有元素。您可以尝试使用 jQuery：

$("input").parent("form")

【讨论】：

【解决方案4】：

或者一个小的 jQuery（忽略 jQuery 本身）：

$("#message").parents("form:first")

【讨论】：

【解决方案5】：

除了node.parentNode，我不相信有办法找到给定节点的特定祖先。大多数库通常会按照您的描述进行操作，并通过 parentNode 进行迭代。

如果您不使用原型、jquery 或 Ext 之类的库，那可能是个好主意。到现在为止，他们已经解决了 DOM 中的所有不兼容和怪癖，使大多数这样的操作变得轻而易举。

【讨论】：

【解决方案6】：

关于 Gumbo 的帖子： 尽管原型和 jQuery 很有用，但有些人并没有将它们实现到他们的项目中。

除了他重复了 OP 最初试图避免的事情之外，有人可以解释为什么 Gumbo 的解决方案被降级了吗？

node = document.getElementById(this.id);
while (node.nodeName != "FORM" && node.parentNode) {
    node = node.parentNode;
}

回答 OP 的问题： 遍历 DOM 是实现此效果的最快方法 - 感知速度是通过 1) 编写更好的 JS 代码或 2) 执行时间来实现的（如果您将表单存储在该元素的页面加载中，您仍然会遍历，但是当您需要检索该信息时，您可以更快地调用存储的变量）。

没有嵌套在非表单元素中的属性可以将其与表单相关联（span.form 不存在）。

如果您使用脚本 (php/perl) 来生成您的页面，并且您将要对表单进行大量调用，您可以在该元素的 HTML 中嵌入表单 ID。尽管如此，仍需要进行查找。

希望对你有帮助，

vol7ron

【讨论】：

【解决方案7】：

为什么不直接使用：

var nodesForm = node.form;

？它适用于 FF3、FF4、google chrome、Opera、IE9（我自己测试过）

【讨论】：