Cómo obtener un elemento DOM de un selector de JQuery


179

Me está costando mucho trabajo encontrar el DOMElement real de un selector de jquery. Código de muestra:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

y en otro código estoy tratando de determinar el valor marcado de la casilla de verificación.

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

Y por favor, no quiero hacer:

  if ( checkbox.eq(0).is(":checked"))
    //do something

Eso me lleva a la casilla de verificación, pero otras veces he necesitado el verdadero DOMElement.


44
Un caso en el que esto puede ser necesario: en Knockout.js la función applyBindingsespera un nodo DOM no un selector jQuery. Esta pregunta (y sus respuestas) son exactamente lo que se necesita.
Muhammad Alkarouri

Respuestas:


264

Puede acceder al elemento DOM sin procesar con:

$("table").get(0);

o más simplemente:

$("table")[0];

Sin embargo, no hay mucho para lo que necesites esto (en mi experiencia). Tome su ejemplo de casilla de verificación:

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

es más "jquery'ish" y (en mi humilde opinión) más conciso. ¿Y si quisieras numerarlos?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

Algunas de estas características también ayudan a enmascarar las diferencias en los navegadores. Algunos atributos pueden ser diferentes. El ejemplo clásico son las llamadas AJAX. Hacer esto correctamente en Javascript sin procesar tiene alrededor de 7 casos alternativos para XmlHttpRequest.


1
Gracias, pero el método get aún devuelve un elemento jquery, no el elemento dom. De lo contrario, la llamada de propiedad .checked hubiera funcionado.
BillRob el

Pruebe $('a').get(0).nodeType==1en Firebug en esta página, ¿se evalúa como verdadero o falla?
meder omuraliev el

@BillRob si get () no devuelve el elemento DOM, algo está mal. Vea los documentos aquí: docs.jquery.com/Core/get#index
Sixten Otto el

$('<input type=checkbox>').appendTo('body').get(0).checked
meder omuraliev el

55
¿Cuál es el punto de usar jQuery si vas a usar explícitamente las propiedades DOM? ¿No debería ser mejor tener un código consistente que sea a prueba de errores contra posibles TypeErrors? Hace unos años, solía ser un elitista ECMAScripter y evitaba los marcos, pero cuanto más aprendía sobre inconsistencias, terminaba confiando más. Los motores de navegación solo son cada vez más rápidos, a menos que la velocidad sea notable, no debería preocuparse realmente por esto. El objetivo de usar un marco es tener un código consistente y viable que resuelva muchos problemas, no hacer cosas lo más rápido posible.
meder omuraliev 05 de

7

Editar: parece que me equivoqué al suponer que no pudo obtener el elemento. Como otros han publicado aquí, puede obtenerlo con:

$('#element').get(0);

Verifiqué que esto realmente devuelve el elemento DOM que coincidió.


2
Repitiéndome, pero de nuevo ... no en todos los navegadores. Falla en IE7 y versiones anteriores.
Slavo

6

Necesitaba obtener el elemento como una cadena.

jQuery("#bob").get(0).outerHTML;

Lo que te dará algo como:

<input type="text" id="bob" value="hello world" />

... como una cadena en lugar de un elemento DOM.


1

Si necesita interactuar directamente con el elemento DOM, ¿por qué no usarlo document.getElementByIdya que, si está tratando de interactuar con un elemento específico, probablemente conocerá la identificación, ya que se supone que el nombre de clase está en un solo elemento u otra opción? ser arriesgado

Pero, tiendo a estar de acuerdo con los demás, en la mayoría de los casos, debe aprender a hacer lo que necesita usando lo que le ofrece jQuery, ya que es muy flexible.

ACTUALIZACIÓN: Basado en un comentario: Aquí hay una publicación con una buena explicación: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

Esto devolverá el valor si está marcado, o 0 si no lo está.

$(this).val() es solo alcanzar el dom y obtener el atributo "valor" del elemento, esté o no marcado.


2
Podría usar document.getElementById o el método MS ajax $ get. Desde que MS aprobó jquery, estoy tratando de romper mi dependencia de ms ajax javascript y aprender jquery. Parece completamente contra-intuitivo que jquery cambiaría el comportamiento del método checkbox .val (). Como cualquier otra llamada .val (), devuelve los campos de publicación del formulario. Ha sido tan bueno trabajar con jQuery, por lo que fue confuso cambiar el método val () y esperaba encontrar una solución rápida.
BillRob el


2
Es extraño James que el método val () sea realmente .attr ("valor"). Me pregunto por qué tienen dos métodos diferentes para ello. Para mí .val () es el valor del campo de publicación de formulario.
BillRob el

2
@BillRob: jQuery simplemente está simplificando y estandarizando cómo obtener el valor, en lugar de tener que ir al elemento real y hacerlo usted mismo.
James Black el

A veces necesita un selector complejo con ID y un escenario padre-hijo y puede obtenerlo a través de jQuery con una línea de código, pero tomaría un día usar document.getElementById. Estoy de acuerdo en que mezclar bibliotecas es una mala idea, pero a veces sucede y la tarea de obtener un elemento DOM de un objeto jquery es difícil, especialmente con .get (0) que no tiene compatibilidad con el navegador.
Slavo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.