javascript - first - jquery innerhtml

Objeto jQuery y elemento DOM

Question

Me gustaría entender la relación entre el objeto jQuery y el elemento DOM ...

Cuando jQuery devuelve un elemento, se muestra como [object Object] en una alerta. Cuando getElementByID devuelve un elemento, aparece como [object HTMLDivElement] . ¿Qué significa eso exactamente? Quiero decir, ¿ambos son objetos con una diferencia?

Además, ¿qué métodos pueden operar en el objeto jQuery frente al elemento DOM? ¿Puede un solo objeto jQuery representar múltiples elementos DOM?

Answer 1

Me gustaría entender la relación entre el objeto jQuery y el elemento DOM

Un objeto jQuery es un objeto similar a una matriz que contiene elementos DOM. Un objeto jQuery puede contener varios elementos DOM dependiendo del selector que use.

Además, ¿qué métodos pueden operar en el objeto jQuery frente al elemento DOM? ¿Puede un solo objeto jQuery representar múltiples elementos DOM?

Las funciones jQuery (una lista completa está en el sitio web) operan en objetos jQuery y no en elementos DOM. Puede acceder a los elementos DOM dentro de una función jQuery usando .get() o accediendo directamente al elemento en el índice deseado:

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

En otras palabras, lo siguiente debería obtener el mismo resultado:

<div id="foo"></div>
alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

Para obtener más información sobre el objeto jQuery, consulte la documentación . Consulte también la documentación de .get()

Answer 2

Apenas comencé a jugar con jQuery este mes pasado, y tenía una pregunta similar rondando en mi mente. Todas las respuestas que has recibido hasta ahora son válidas y están en el punto, pero una respuesta muy precisa puede ser esta:

Digamos que estás en una función, y para referirte al elemento que llama, puedes usar this o $(this) ; ¿Pero, cuál es la diferencia? Resulta que cuando usas $(this) , estás envolviendo this dentro de un objeto jQuery. El beneficio es que una vez que un objeto es un objeto jQuery, puede usar todas las funciones jQuery en él.

Es bastante potente, ya que incluso puede envolver una representación de cadena de elementos, var s = ''<div>hello <a href=''#''>world</a></div><span>!</span>'' , dentro de un objeto jQuery simplemente envolviéndolo literalmente en $ (): $(s) . Ahora puedes manipular todos esos elementos con jQuery.

Answer 3

Cuando utiliza jQuery para obtener un elemento DOM, el objeto jQuery devuelve contiene una referencia al elemento. Cuando utiliza una función nativa como getElementById , obtiene la referencia al elemento directamente, no contenida dentro de un objeto jQuery.

Un objeto jQuery es un objeto tipo array que puede contener múltiples elementos DOM:

var jQueryCollection = $("div"); //Contains all div elements in DOM

La línea anterior podría realizarse sin jQuery:

var normalCollection = document.getElementsByTagName("div");

De hecho, eso es exactamente lo que jQuery hará internamente al pasar un selector simple como div . Puede acceder a los elementos reales dentro de una colección jQuery utilizando el método get :

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

Cuando tiene un elemento o conjunto de elementos dentro de un objeto jQuery, puede usar cualquiera de los métodos disponibles en la API de jQuery, mientras que cuando tiene el elemento sin formato, solo puede usar métodos nativos de JavaScript.

Answer 4

Eso es solo su navegador siendo inteligente. Ambos son objetos pero DOMElements son objetos especiales . jQuery solo envuelve DOMElements en un objeto Javascript.

Si desea obtener más información de depuración, le recomiendo que consulte herramientas de depuración como Firebug para Firefox y el inspector incorporado de Chrome (muy similar a Firebug).

Answer 5

La mayoría de las Functions miembro de jQuery no tienen un valor de retorno, sino que devuelven el jQuery Object actual u otro jQuery Object .

Asi que,

console.log("(!!) jquery >> " + $("#id") ) ;

devolverá [object Object] , es decir, un jQuery Object que mantiene la colección que es el resultado de evaluar el selector String ( "#id" ) contra el Document ,

mientras ,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

devolverá [object HTMLDivElement] (o de hecho [object Object] en IE) porque / si el valor devuelto es un Element div .

Además, ¿qué métodos pueden operar en el objeto jQuery frente al elemento DOM? (1) ¿Puede un solo objeto jQuery representar múltiples elementos DOM? (2)

(1) Hay un host de Function miembro en jQuery que pertenecen a los Object DOM s. Lo mejor que se puede hacer es buscar en la documentación de la API de jQuery una Function relevante una vez que tenga una tarea específica (como seleccionar Node o manipularlos).

• documentación jQuery

(2) Sí, un único jQuery Object puede mantener una lista de múltiples Element DOM. Hay varias Functions (como jQuery.find o jQuery.each ) que se basan en este comportamiento de almacenamiento en caché automático.