Поиск формы, к которой принадлежит элемент в JavaScript

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

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

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

Если это был не промежуток, а вход элемент, это было бы проще? Имеют ли они свойство, которое указывает на содержащую форму? Google говорит, что нет...

7 ответов


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

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

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

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

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


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

var nodesForm = node.form;

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


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

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

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


относительно поста Гамбо: Насколько прототип и jQuery полезны, некоторые люди не реализуют их в своих проектах.

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

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

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

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

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

vol7ron


вы можете вернуться в дерево DOM, пока не доберетесь до нужного узла:

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

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

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

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

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