Objeto jQuery y elemento DOM

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

Cuando jQuery devuelve un elemento, aparece como [object Object]una alerta. Cuando getElementByIDdevuelve un elemento, aparece como [object HTMLDivElement]. ¿Qué significa eso exactamente? Quiero decir, ¿son ambos 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?

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 según el selector que utilice.

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 de 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 al elemento en el índice deseado directamente:

$("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 para.get()

Cuando usa jQuery para obtener un elemento DOM, los retornos del objeto jQuery contienen una referencia al elemento. Cuando usa una función nativa como getElementById, obtiene la referencia al elemento directamente, no contenido dentro de un objeto jQuery.

Un objeto jQuery es un objeto similar a una matriz que puede contener varios 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 cuando pasas un selector simple como div. Puede acceder a los elementos reales dentro de una colección jQuery usando el getmétodo:

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

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

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

Digamos que está en una función, y para referirse al elemento de llamada, puede usar this, o $(this); ¿Pero, cuál es la diferencia? Resulta que cuando lo usa $(this), está envolviendo thisdentro 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 muy potente, ya que incluso se puede envolver una representación de cadena de elementos, var s = '<div>hello <a href='#'>world</a></div><span>!</span>'el interior de un objeto jQuery con sólo literalmente, envolviéndolo en $ (): $(s). Ahora puedes manipular todos esos elementos con jQuery.

La mayoría de los miembros de jQuery Functionsno tienen un valor de retorno, sino que devuelven el actual jQuery Objectu otro jQuery Object.

Entonces,

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

devolverá [object Object], es decir, jQuery Objectque 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 de retorno es a div Element.

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 una gran cantidad de miembros Functionen jQuery que pertenecen a DOM Object. Lo mejor que puede hacer en mi opinión es buscar en la documentación de la API de jQuery una información relevante Functionuna vez que tenga una tarea específica (como seleccionar Nodeo manipularlas).

• documentación de jQuery

(2) Sí, uno solo jQuery Objectpuede mantener una lista de varios DOM Element. Hay varios Functions(como jQuery.findo jQuery.each) que se basan en este comportamiento de almacenamiento en caché automático.

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

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

Además de lo que se ha mencionado, me gustaría agregar algo sobre por qué el objeto jQuery se importa de acuerdo con la descripción de jquery-object

• Compatibilidad

La implementación de métodos de elementos varía según los proveedores y versiones de navegadores.

Por ejemplo, es posible que el conjunto innerHTMLde elementos no funcione en la mayoría de las versiones de Internet Explorer.

Puede configurar innerHTML en forma de jQuery y jQuery lo ayudará a ocultar las diferencias del navegador.

// Setting the inner HTML with jQuery.

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );

• Conveniencia

jQuery proporciona una lista de métodos vinculados al objeto jQuery para facilitar la experiencia del desarrollador; consulte algunos de ellos en http://api.jquery.com/ . El sitio web también proporciona una manipulación DOM común, veamos cómo insertar un elemento almacenado newElementdespués del targetelemento en ambos sentidos.

La forma DOM,

// Inserting a new element after another with the native DOM API.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( newElement, target.nextSibling );

La forma jQuery,

// Inserting a new element after another with jQuery.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

Espero que esto sea un suplemento.