jQuery object and DOM Element

They're both objects but DOMElements are special objects. jQuery just wraps DOMElements in a Javascript object.

jQuery

returns an element it shows up as [object Object] in an alert.

 

relationship between jQuery object and DOM element：

A jQuery object is an array-like object that contains DOM element(s). A jQuery object can contain multiple DOM elements depending on the selector you use.

 

what methods can operate on jQuery object vs DOM element?

jQuery functions (a full list is on the website) operate on jQuery objects and not on DOM elements. You can access the DOM elements inside a jQuery function using .get() or accessing the element at the desired index directly:

$("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

In other words, the following should get you the same result:

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

 

 

DOMElements

When getElementByID returns an element it shows up as [object HTMLDivElement].

 

 

Question

1.How can I convert a JavaScript DOM object to a jQuery object?Is there any way to convert a js DOM object to a jQuery object or using the this keyword in jQuery?

<tr onclick="changeStatus(this)">

function changeStatus(myObject) {
       XXX.removeClass();
}

answer：

var $this = $(myObject);

$this is a jQuery object. You can create jQuery objects from DOM elements.

<tr onclick="changeStatus(this)">

function changeStatus(myObject) {
       $(myObject).removeClass();
}

I would like to recommend doing your event binding with jQuery as well:

This is nice because now all the JS code is in one place and can be updated (in my opinion) more easily. Note that the class I added to the <tr> element is not necessary if you want to bind to all <tr> elements in the DOM.

<tr class="change-status">

$('.change-status').on('click', function () {
    $(this).removeClass( ... );
});

 

　

 

2.My first question is if this is a DOM object or a jQuery Object?

I would assume that it is a DOM object as we are passing it through a jQuery modifier in the next statement i.e $(this).find(".tool-name") to further extract data from it. Is that correct?

$(".foo").click(function() {  
  var displayTool = $(this).find(".tool-name").text() //is this a jquery object or DOM object ?
});

answer：

Yes, this is always a DOM object within a jQuery click handler.

As to why this is...

Do you always want a jQuery object containing the clicked element within a click handler? No, there are occasions when you do not. For example, say you wanted to remove another element from the page when an element was clicked:

$('.delete').click(function() {
    $('.spinner').remove();
});

You never use this.

Or you may want simply to do something with the element's id:

$('.delete').click(function() {
    console.log(this.id);
});

In neither case do you want to have a jQuery selection. And since building a jQuery selection is a relatively expensive operation, it is much better not to create it unless you explicitly say you want it by doing $(this).

You might be thinking "ah, but we already built the selection in the original line of code":

$(".foo").click(function() {

.foo means something different. It means "all the elements with the class foo", not "the element that was just clicked".