The difference between $('#id') and document.getElementById('id') in jquery

I used to think that $("#id") in jquery and document.getElementByIdx_x("id") have the same effect. I will do special effects today. Only then did I discover that this was not the case. Through testing, I got:

1. What alert($("#p")) got was [object Object]

2. alert(document.getElementById("p")) gets [object HTMLpElement]

3. alert($("#p")[0]) or alert($("#p").get(0)) gets [object HTMLpElement]

Reason interpretation:

##document.getElementById() returns DOM Object, while $() returns a jQuery object

What is a jQuery object?
---It is the object generated by wrapping the DOM object through jQuery. The jQuery object is unique to jQuery and can use methods in jQuery.
For example:
$("#test").html() means: Get the html code in the element with the ID test. Among them, html() is a method in jQuery
This code is equivalent to using DOM to implement the code:
document.getElementById("id" ).innerHTML;
Although Although the jQuery object is generated after wrapping the DOM object, jQuery cannot use any method of the DOM object. Similarly, the DOM object cannot use the methods in jQuery. Indiscriminate use will cause Report an error. For example: $("#test").innerHTML, document.getElementById("id").html() and other writing methods are wrong.
Another thing to note is that using #id as the selector obtains the jQuery object and the DOM object obtained by document.getElementById("id"), which are not equivalent. Please see the conversion between the two below.
now that Although jQuery is different but also related, then jQuery objects and DOM objects can also be converted to each other. Before converting the two, we first give a convention: if one obtains a jQuery pair Object, then we add $ in front of the variable, such as: var $variab = jQuery object; if the DOM object is obtained, it is the same as usual: var variab = DOM object; this convention is only for convenience of explanation and distinction, and is not stipulated in actual use.

Convert jQuery object to DOM object:
Two conversion methods convert a jQuery object into DOM object: [index] and .get(index);
(1 )jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.
For example: var $v =$("#v"); //jQuery object
var v=$v[0]; //DOM object
alert(v.checked) //Detect this Whether the checkbox is selected
(2) jQuery itself provides, through the .get(index) method, the corresponding DOM object
For example: var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //Detect whether this checkbox is selected

Convert DOM object to jQuery object:
For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object. $(DOM object)
For example: var v=document.getElementById("v"); //DOM object
var $v=$(v); //jQuery object
After conversion, you can Feel free to use jQuery's methods.
Through the above methods, you can convert jQuery objects and DOM objects to each other at will. What needs to be emphasized again is that only DOM objects can use methods in DOM, and jQuery objects cannot use methods in DOM.

The following are other related usage methods:
1. Convert DOM object to jQuery object
Ordinary Dom objects can generally be converted into jQuery objects through $().

For example: $(document.getElementById("msg"))
What is returned is the jQuery object, and you can use jQuery methods.

2. Convert jQuery object to DOM object
Because the jQuery object itself is a collection. Therefore, if the jQuery object is to be converted into a Dom object, one of the items must be retrieved, which can generally be retrieved through an index.
For example: $("#msg")[0], $("p").eq(1)[0], $("p").get()[1], $("td" )[5]

These are Dom objects. You can use methods in Dom, but you can no longer use jQuery methods.

The following writing methods are correct:
$("#msg").html();
$("#msg")[0].innerHTML;
$ ("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3. Two methods to obtain the object: If there is

By id:

## document.getElementById('formid');

　$('#formid')

By name

document.getElementsByName('formName')[ 0]

　$("form[name='formName']")

jquery inherent method:

##document.getElementById() returns a DOM object, while $() returns jQuery object

What is a jQuery object?
---It is the object generated by wrapping the DOM object through jQuery. The jQuery object is unique to jQuery and can use methods in jQuery.
For example:
$("#test").html() means: Get the html code in the element with the ID test. Among them, html() is a method in jQuery
This code is equivalent to using DOM to implement the code:
document.getElementById("id" ).innerHTML;
Although Although the jQuery object is generated after wrapping the DOM object, jQuery cannot use any method of the DOM object. Similarly, the DOM object cannot use the methods in jQuery. Indiscriminate use will cause Report an error. For example: $("#test").innerHTML, document.getElementById("id").html() and other writing methods are wrong.
Another thing to note is that using #id as the selector obtains the jQuery object and the DOM object obtained by document.getElementById("id"), which are not equivalent. Please see the conversion between the two below.
now that Although jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before converting the two, we first give a convention: if one obtains a jQuery pair Object, then we add $ in front of the variable, such as: var $variab = jQuery object; if the DOM object is obtained, it is the same as usual: var variab = DOM object; this convention is only for convenience of explanation and distinction, and is not stipulated in actual use.

Convert jQuery object to DOM object:
Two conversion methods convert a jQuery object into DOM object: [index] and .get(index);
(1 )jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.
For example: var $v =$("#v"); //jQuery object
var v=$v[0]; //DOM object
alert(v.checked) //Detect this Whether the checkbox is selected
(2) jQuery itself provides, through the .get(index) method, the corresponding DOM object
For example: var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //Detect whether this checkbox is selected

Convert DOM object to jQuery object:
For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object. $(DOM object)
For example: var v=document.getElementById("v"); //DOM object
var $v=$(v); //jQuery object
After conversion, you can Feel free to use jQuery's methods.
Through the above methods, jQuery objects and DOM objects can be converted to each other arbitrarily. What needs to be emphasized again is that only DOM objects can use methods in DOM, and jQuery objects cannot use methods in DOM.

The following are other related usage methods:
1. Convert DOM object to jQuery object
Ordinary Dom objects can generally be converted into jQuery objects through $().

For example: $(document.getElementById("msg"))
What is returned is the jQuery object, and jQuery methods can be used.

2. Convert jQuery object to DOM object
Because the jQuery object itself is a collection. Therefore, if the jQuery object is to be converted into a Dom object, one of the items must be retrieved, which can generally be retrieved through an index.
For example: $("#msg")[0], $("p").eq(1)[0], $("p").get()[1], $("td" )[5]

These are Dom objects. You can use methods in Dom, but you can no longer use jQuery methods.

The following writing methods are correct:
$("#msg").html();
$("#msg")[0].innerHTML;
$ ("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3. Two methods to obtain the object: If there is

By id:

## document.getElementById('formid');

##　$('#formid')

by name

　　document.getElementsByName('formName')[0]

　　$("form[name='formName']")

The above is the detailed content of The difference between $('#id') and document.getElementById('id') in jquery. For more information, please follow other related articles on the PHP Chinese website!