在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');

这个问题的其他答案指出了如何在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