在JavaScript中查找元素所属的FORM

Question

如何使用简单/少量的JavaScript找出HTML元素包含在哪个FORM中？在下面的例子中，如果我已经掌握了名为“message”的SPAN，我怎样才能轻松获得FORM元素？

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

SPAN可能嵌套在其他表或DIV中，但它似乎太冗长，无法迭代.parentElement并在树上工作。是否有更简单，更短的方式？

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

Answer 1

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

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

使用原型，您可以使用Element.up()：

来简化此操作

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

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

Answer 2

为什么不使用：

var nodesForm = node.form;

？ 它适用于FF3，FF4，谷歌浏览器，Opera，IE9（我自己测试过）

Answer 3

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

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

http://docs.jquery.com/Traversing/parent#expr

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

如果您没有使用像prototype，jquery或Ext这样的库，那么这可能是个好主意。到目前为止，他们已经解决了DOM中的所有不兼容性和怪癖，使大多数这样的操作变得微不足道。