Estoy comenzando con JQuery y estoy trabajando en un video tutorial. En un momento, los presentadores optan por JavaScript en lugar de un selector JQuery. Solo me pregunto por qué el getElementById de JavaScript a continuación funciona bien al pasar un objeto a una función, pero el segundo no.

¡Gracias!

// works
addTask(document.getElementById('taskText'), evt);

// doesn't
addTask($('#taskText'), evt);
1
Glinkot 12 ago. 2011 a las 08:42

5 respuestas

La mejor respuesta

getElementById() devuelve una referencia de elemento DOM.

El selector de jQuery devuelve un objeto jQuery. Puede obtener la referencia del elemento del objeto jQuery usando

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

Ver http://api.jquery.com/get/

9
Phil 12 ago. 2011 a las 04:45

$('#taskText') devuelve una referencia de objeto jQuery.

document.getElementById('taskText') devuelve una referencia de elemento DOM.

Si su función addTask() no sabe cómo convertirlos a lo que necesita, entonces ese sería el problema ya que uno de ellos necesitará una conversión.

Si desea obtener la primera referencia del elemento DOM del objeto jQuery, puede hacerlo con esto:

$('#taskText').get(0)

Entonces estos dos deberían ser idénticos:

$('#taskText').get(0)
document.getElementById('taskText')
1
jfriend00 12 ago. 2011 a las 04:45

Ambos no son exactamente iguales

document.getElementById('taskText'); //returns a HTML DOM Object

var contents = $('#taskText');  //returns a jQuery Object

var contents = $('#taskText')[0]; //returns a HTML DOM Object

Así que tienes que cambiarlo para obtener el objeto HTML Dom

addTask($('#taskText')[0], evt);
0
Pramendra Gupta 12 ago. 2011 a las 04:47

Como han señalado @Phil y @ jfriend00, document.getElementById ('taskText') es un elemento DOM y $ ('# taskText') es un objeto jQuery. Este último es un objeto de todos los elementos DOM que coinciden con el selector.

Piense en ello como una matriz basada en cero, puede pasar el elemento DOM haciendo esto:

addTask($('#taskText')[0], evt);
0
Ruxta 12 ago. 2011 a las 04:49

Para agregar a la otra respuesta, con respecto al resultado, si desea usar jQuery (que es más fácil de leer), puede obtener el nodo dom directamente de la siguiente manera:

addTask($('#taskText')[0], evt);
4
OverZealous 12 ago. 2011 a las 04:46