¿Qué significa la referencia dom mencionada en js?
Lo que distinguen estas dos líneas de código es la diferencia entre objetos DOM y objetos jQuery.
Los objetos DOM y los objetos jQuery son dos objetos diferentes y, por lo tanto, sus instancias tienen propiedades y métodos diferentes. Por lo general, para operar un nodo en la página, necesitamos encontrar una manera de obtener una referencia al nodo. Por ejemplo, el siguiente código: var?dom?=?document.getElementById('node id');
Esto es para obtener un nodo de página a través de la identificación del nodo, que es una referencia al nodo. En este momento, cualquier operación que realicemos en la variable dom es en realidad una operación en el nodo de la página, como modificar el estilo, eliminar el nodo, obtener atributos, etc. De la siguiente manera: dom.style.display?=?'none';?//?Ocultar nodo
dom.parentNode.removeChild(dom);?//?Eliminar nodo
var ?height?=?dom.offsetHeight;?//?Obtener la altura del nodo
Al igual que el estilo anterior, parentNode, removeChild, offsetHeight, etc., todos son atributos o métodos del objeto DOM.
Debido a que el objeto DOM no es parte de JavaScript, es una extensión de JavaScript de varios navegadores. Sin embargo, existen algunas inconsistencias en la implementación de varios navegadores, lo que hace que el código de JavaScript deba lidiar con muchas compatibilidades. asuntos. Para resolver estos problemas de compatibilidad y mejorar la eficiencia del desarrollo, nació la biblioteca jQuery.
jQuery resuelve el problema de compatibilidad y su implementación es extremadamente inteligente, por lo que ha sido elogiado por muchas personas. En el pasado, era casi imposible para las personas con un poco de conocimiento básico de JavaScript escribir efectos especiales más complejos. Sin embargo, debido a la aparición de jQuery, efectos como mostrar y ocultar y varias animaciones solo requieren unas pocas líneas simples de código. . Algunas personas incluso piensan que jQuery puede incluso reemplazar a javascript, y jQuery y javascript también figuran como una categoría en varios blogs y sitios de aprendizaje front-end.
Pero el problema es que si no entiendes javascript básico, cuando encuentres problemas o excepciones, sólo podrás quedarte mirando. Ningún lenguaje, marco o biblioteca puede reemplazar la sintaxis más básica, y los marcos y bibliotecas también se enriquecen con la sintaxis más simple.
En realidad, se puede decir que JQuery es una clase grande, una clase implementada por javascript.
Tome un modelo simple de la siguiente manera:;(function(window,?undefinido){
window.$?=?window.jQuery?=?jQuery;
// ?Definir jQuery clase
function?jQuery(selector,?content){
content?=?content?||?document;
var?eles =?content .querySelectorAll(selector);
var?len?=?eles.length;
//Agregar atributo de longitud al objeto jQuery
este .length? =?len;
///? Obtenga convenientemente el objeto dom y obtenga la instancia: jQuery('#id')[0];
for(var?i?= ? 0;?i?
esto[i]?=?eles[i];
}
}< / p>
//?Prototipo extendido
jQuery.prototype?=?{
///Constructor
constructor?:?jQuery,
///?Obtener el objeto DOM según el índice
get?:?function(index){
return?this[index];
}
}
})(ventana);
Este es un código de simulación jQuery. Puedes llamarlo de la siguiente manera: var? jqObj? =?new?jQuery('.class');
Debido al procesamiento especial de jQuery, puedes usarlo sin novedad al escribir código jQuery, pero aquí no hay procesamiento, por lo que necesitas para agregar la nueva palabra clave.
El jqObj devuelto arriba es un objeto de jQuery que definí. Es un objeto jQuery y ya no es un objeto DOM. Puedo escribir el siguiente código: var?dom?=?jqObj.get(1);?//?Obtener el objeto DOM con subíndice 1 en el objeto jQuery
Entonces la variable dom es la misma que la variable anterior dom Asimismo, puedes utilizar las propiedades y métodos del objeto DOM.
Sin embargo, no podemos escribir el siguiente código, de lo contrario informará una excepción: jqObj.style.color?=?'red';
Porque la instancia del objeto jQuery es simplemente no hay ningún atributo de estilo. Lo mismo ocurre con jQuery. Los objetos jQuery y los objetos DOM son dos objetos diferentes, y sus estructuras internas (por ejemplo, el método get anterior está personalizado) también son diferentes. Cuando usa un objeto jQuery como objeto DOM, cualquier propiedad o método que llame en el objeto puede desencadenar una excepción indefinida porque la propiedad o método no existe.
Entonces, si usa la biblioteca jQuery, debe prestar atención para distinguir si el objeto de nodo es un objeto DOM o un objeto jQuery cuando opera nodos. Básicamente, si un método jQuery devuelve un objeto de nodo, el valor de retorno es principalmente un objeto jQuery, pero existen excepciones, como get.
Volviendo a tu pregunta, el objeto canvas obtenido a través de jQuery es en realidad un objeto encapsulado por el objeto jQuery. No tiene un método getContext, por lo que se informará un error. Sin embargo, el objeto jQuery puede obtener el objeto DOM correspondiente a través de corchetes, al igual que acceder a una matriz, por lo que el segundo método devuelve el objeto Canvas original, que tiene el método getContext.