javascript - ¿Cómo obtener un elemento DOM a partir de un selector de jQuery?

Me está resultando increíblemente difícil averiguar cómo obtener el DOMElement real a partir de un selector de jQuery.

Código de ejemplo:

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

y en otro fragmento de código estoy intentando 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 evita el cuadro de selección, pero otras veces he necesitado el verdadero DOMElement.

Respuesta #1

Puedes acceder al elemento DOM en bruto con:

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

o más simplemente:

$("table")[0];

Sin embargo, en realidad no necesitas mucho esto (según mi experiencia). Toma tu ejemplo de la casilla de verificación:

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

es más 'jquery' y (en mi opinión) más conciso. ¿Qué pasaría 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 entre navegadores. Algunos atributos pueden ser diferentes. El ejemplo clásico son las llamadas AJAX. Hacer esto correctamente en Javascript puro tiene alrededor de 7 casos de respaldo para XmlHttpRequest.

Respuesta #2

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

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

He verificado que esto realmente devuelve el elemento DOM que fue coincidente.