Difference between DOM Elements and jQuery Objects
When accessing elements on a web page, you can use either raw JavaScript (DOM elements) or jQuery objects. However, knowing how to convert between these two objects allows for more coding flexibility.
Converting from DOM Elements to jQuery Objects
The $() function can be used to convert DOM elements to jQuery objects.
var sample = document.querySelector('#sample'); var jq_obj = $(sample);Converting from a jQuery object to a DOM element
You can use the index of a jQuery object to get a DOM element.
var dom_element = jq_obj [0];Concrete use cases
For example, when you want to change the color of an element, you might use a combination of DOM and jQuery methods. You can first retrieve the element with the DOM method and then change the color with the jQuery method.
var sample = document.querySelector('#sample'); $(sample).css('color', 'blue');Conclusion
Since DOM elements and jQuery objects have different properties, it is important to convert them to take advantage of their respective merits. Appropriate conversion enables access to a greater variety of methods and properties, and more efficient code writing.