Encontrar la FORMA a la que pertenece un elemento en JavaScript

Question

¿Cómo puedo averiguar en qué FORMA está contenido un elemento HTML, usando un simple/pequeño bit de JavaScript? En el ejemplo siguiente, si ya tengo el SPAN llamado 'mensaje', ¿cómo puedo acceder fácilmente al elemento FORM?

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

el lapso podría estar anidada dentro de otras tablas o DIVs, pero parece demasiado largo aliento para recorrer alrededor de .parentElement y trabajar mi camino hasta el árbol. ¿Hay una manera más simple y más corta?

Si no fuera un SPAN, sino un elemento INPUT, ¿sería más fácil? ¿Tienen una propiedad que apunta al FORMULARIO que lo contiene? Google dice que no ...

Answer 1

Se puede acceder al formulario al que pertenece el elemento a través del element.form.

Cuando el elemento que está utilizando como referencia no es un elemento de formulario, aún debe iterar a través del parentElement o utilizar algún otro tipo de selector.

El uso de prototipo, se podría simplificar esto mediante el uso de Element.up():

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

Otheranswers a esta pregunta han señalado cómo hacer lo mismo en jQuery.

Answer 2

Usted podría dar marcha atrás en el árbol DOM hasta que llegue al nodo correcto:

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

Answer 3

Supongo que tiene que recorrer todos los elementos a continuación. Puedes probar a utilizar jQuery:

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

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

Answer 4

o un pequeño jQuery (ignorando jQuery sí mismo):

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

Answer 5

Aparte de node.parentNode, no creo que hay una forma de encontrar un ancestro específico de un nodo dado. La mayoría de las bibliotecas generalmente hacen lo que describes e iteran a través de parentNode.

Si no está utilizando una biblioteca como prototipo, jquery o Ext, probablemente sea una buena idea. Hasta ahora, han resuelto todas las incompatibilidades y peculiaridades en el DOM para hacer que la mayoría de las operaciones como esta sean mínimas.

Answer 6

En cuanto a la publicación de Gumbo: Por mucho que el prototipo y jQuery sean útiles, algunas personas no los implementan en sus proyectos.

¿Podría alguien explicar por qué la solución de Gumbo fue degradada, aparte del hecho de que repitió lo que el OP intentaba evitar originalmente?

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

 

Para responder a la pregunta de la OP: Atravesando el DOM es la manera más rápida de conseguir este efecto - velocidad percibida se lleva a cabo mediante: 1) código JS mejor escrito, o 2) el tiempo de ejecución (Si almacena el formulario en la carga de página para ese elemento, seguirá atravesando, pero tendrá una llamada más rápida a una variable almacenada cuando necesite recuperar esa información).

No hay atributos anidados en elementos no formales que lo asociarían con el formulario (span.form no existe).

Si está utilizando una secuencia de comandos (php/perl) para generar su página, y va a hacer muchas llamadas al formulario, puede insertar la identificación del formulario en el HTML para ese elemento. Aún así, debería hacerse una consulta.

espero que esto ayude,

vol7ron

Answer 7

Por qué no sólo tiene que utilizar:

var nodesForm = node.form; 

? Funciona en FF3, FF4, google chrome, Opera, IE9 (me probé a mí mismo)