Поиск FORM, к которому принадлежит элемент в JavaScript

Как узнать, какой FORM-элемент HTML содержится внутри, используя простой/маленький бит JavaScript? В приведенном ниже примере, если я уже получил SPAN под названием "сообщение", как я могу легко перейти к элементу FORM?

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

SPAN может быть вложен в другие таблицы или DIV, но кажется слишком затянутым для повторения вокруг .parentElement и работы по пути вверх по дереву. Есть ли более простой и более короткий способ?

Если бы это был не SPAN, а элемент INPUT, это было бы проще? У них есть свойство, которое указывает на содержащую FORM? Google не говорит...

Ответ 1

К форме, к которой принадлежит элемент формы, можно получить доступ через element.form.

Когда элемент, который вы используете в качестве ссылки, не является элементом формы, вам все равно придется выполнять итерацию через parentElement или использовать какой-либо другой селектор.

Используя прототип, вы можете упростить это, используя Element.up():

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

Другие ответы на этот вопрос указали, как сделать то же самое в jQuery.

Ответ 2

Почему бы просто не использовать:

var nodesForm = node.form;

? Он работает на FF3, FF4, google chrome, Opera, IE9 (я сам тестировал)

Ответ 3

Угадайте, что вам нужно повторить все элементы. Вы можете попробовать использовать jQuery:

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

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

Ответ 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 не существует).

Если вы создаете страницу script (php/perl), и вы собираетесь делать много звонков в форму, вы можете вставить идентификатор формы в HTML для этого элемента. Тем не менее, поиск должен произойти.

Я надеюсь, что это поможет,

vol7ron

Ответ 5

Вы можете вернуться в дерево DOM до тех пор, пока вы не вернетесь вправо node:

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

Ответ 6

Или небольшой jQuery (игнорируя сам jQuery):

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

Ответ 7

Кроме node.parentNode, я не верю, что существует способ найти конкретного предка данного node. Большинство библиотек обычно делают то, что вы описываете, и итерации через parentNode.

Если вы не используете библиотеку, такую как прототип, jquery или Ext, это, вероятно, будет хорошей идеей. К настоящему времени они разрешили все несовместимости и причуды в DOM, чтобы сделать большинство операций вроде этого пустяком.