Of Stack

Any conversion between jquery objects and DOM objects

  • 2021-01-02 21:45:00
  • OfStack

What is an jQuery object?
-- Is the object generated after wrapping the DOM object through jQuery. The jQuery object is unique to jQuery and can use methods in jQuery.
Such as:
$("#test").html() means: Gets the html code in the element where ID is test. html() is the method in jQuery
This code is equivalent to the DOM implementation code: 


document.getElementById("id").innerHTML;

Although jQuery objects are generated by wrapping DOM objects, jQuery cannot use any of the methods of DOM objects, nor can DOM objects use the methods in jQuery. Misuse will result in an error. For example: $("#test").innerHTML, document.getElementById ("id").html ().
One more thing to note: the #id selector gets the jQuery object and the DOM object obtained by document.getElementById ("id"), which are not equivalent. See below for a conversion between the two.
Since jQuery is different but also related, the jQuery object and the DOM object can also be converted to each other. Before converting the two, we first give a convention: if one gets an jQuery object, then we add $in front of the variable, such as: var $variab = jQuery object; If you get an DOM object, as usual: var variab = DOM object; Such a convention is only for the convenience of explanation and distinction, the actual use is not specified.

Before discussing the conversion between jquery objects and DOM objects, agree on the style of defining the variable. If you are getting an jquery object, prefix the variable with $, for example

var $varible = jquery object;

If an DOM object is obtained, it is defined as follows:

var varible = DOM object;

1. Convert jquery object to DOM object:

The jquery object cannot use the methods in DOM, but if you are not familiar with the methods provided by the jquery object, or if you do not have the methods that jquery wants to encapsulate, you have to use the DOM object, [index] and get[index].

(1)jquery object is an array object, and the corresponding DOM object can be obtained by [index].

The code for jquery is as follows 


<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery object 
  var cr = $cr[1];  //dom object 
  var ct = $cr.get(0)  // The first 2 Kind of converting DOM Method of object 
  cr.innerHTML = "you"  // Check whether the conversion is successful DOM methods   The output result is no 2 a my Changed to you
  ct.innerHTML = 'fuck'  // Output control 1 a my Changed to fuck
</script>
</body>

(2). Convert DOM object to jquery object:

For an DOM object, just wrap the DOM object with $() to get an jquery object in the form of $(DOM object).

jquery code is as follows: 


<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM object 
  var $cr = $(cr);   //jquery object 
  $cr.eq(0).("fuck"); // Check whether the conversion is successful jquery methods   The output result is no 2 a my Changed to fuck
  $cr.eq(1).html("you"); // The output result is my to you
</script>
</body>

After conversion, you can use the jquery method at will.

With the above method, you can convert jquery object and DOM object to each other arbitrarily.

Finally, again,DOM objects can only use the DOM method. jquery objects cannot use the method in DOM, but jquery objects provide a more sophisticated set of tools for manipulating DOM.

I hope you enjoyed this article.

Related articles: