Нахождение ФОРМЫ, к которой принадлежит элемент в JavaScript

Question

Как я могу узнать, в какой ФОРМЕ содержится HTML-элемент, используя простой / маленький кусочек JavaScript? В приведенном ниже примере, если я уже получил SPAN под названием «message», как я могу легко добраться до элемента FORM?

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

var nodesForm = node.form;

? Работает на FF3, FF4, Google Chrome, Opera, IE9 (я проверял сам)

Answer 3

Полагаю, вам придется перебирать все элементы. Вы можете попробовать использовать jQuery:

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

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

Answer 4

Относительно сообщения Гамбо: Хотя prototype и jQuery полезны, некоторые люди не внедряют их в свои проекты.

Может ли кто-нибудь объяснить, почему решение Гамбо было понижено, кроме того факта, что он повторил то, чего первоначально пытался избежать ОП?

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

Чтобы ответить на вопрос ОП: Обход DOM является самым быстрым способом достижения этого эффекта - воспринимаемая скорость достигается за счет 1) лучшего написанного кода JS или 2) времени выполнения (если вы сохраните форму при загрузке страницы для этого элемента, вы все равно будете проходить, но у вас будет более быстрый вызов сохраненной переменной, когда вам понадобится получить эту информацию).

Нет атрибутов, вложенных в неформальные элементы, которые бы связывали его с формой (span.form не существует).

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

Надеюсь, это поможет,

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, чтобы сделать большинство подобных операций пустяком.