How to convert jquery and dom

jQuery and DOM are two very important and widely used technologies in front-end development. When implementing complex interactive effects or operating page elements, we often need to have a clear understanding and mastery of the conversion between the two. This article will introduce the conversion method between jQuery and DOM, and give specific practical cases.

1. The conceptual difference between jQuery and DOM

Before talking about the conversion of jQuery and DOM, let’s first review their concepts.

1. jQuery: jQuery is a lightweight, fast, and concise JavaScript library. It allows developers to complete more operations with less code, and provides many encapsulated tool functions that are compatible with various browsers.
2. DOM: Document Object Model (Document Object Model) is a browser- and platform-independent API that represents HTML, XML or other documents as a tree structure and provides a way to access the structure way to update and operate the document content and its style.

Simply put, jQuery is a JavaScript library, and DOM is an API. jQuery mainly encapsulates some operations of the DOM and provides more convenient syntax and functions. The two are not unrelated to each other, but can be used interchangeably.

2. Convert DOM object to jQuery object

When we need to use jQuery to operate a DOM object, we need to convert the DOM object into a jQuery object first.

The conversion method mainly uses jQuery's $() function, which receives various types of parameters, including selector expressions, DOM elements, HTML strings, functions, etc.

The way to convert a DOM object into a jQuery object is to pass the DOM object as a parameter to the $() function. For example, the way to convert a div element with the id "test" into a jQuery object is as follows:

var testDiv = document.getElementById('test');
var $testDiv = $(testDiv);

In the above code, first use the document.getElementById() method to obtain the id is the div element of "test", and then passes the DOM object as a parameter to the $() function to generate a jQuery object $testDiv.

You can also use the $() function that comes with jQuery to directly select DOM elements, for example:

var $testDiv = $('#test');

In the above code, use the parameters of the $() function It is the selector expression "#test", which selects the DOM element with the id "test" and converts it into a jQuery object. Both methods can convert DOM objects into jQuery objects and perform corresponding operations.

3. Convert jQuery object to DOM object

Similarly, when we need to use native DOM operations to operate a jQuery object, we need to convert the jQuery object into a DOM object.

In jQuery, we can use the get() method, toArray() method, array destructuring, etc. to convert jQuery objects into DOM objects.

1. Use the get() method to convert jQuery objects into DOM objects

get()The method is a very commonly used method in jQuery Convert jQuery object method, which can help us get the DOM element of the matching element. When no parameters are passed in, the get() method will return all matching elements in the form of an array and provide the corresponding index; when an index is passed in, get() The method will return the DOM element corresponding to the index.

For example, the way to convert a <div id="test"> element to a DOM object is as follows: <pre class='brush:php;toolbar:false;'>var testDiv = $('#test').get(0);</pre><p>In the above code, use # The ##$()<code> function obtains the div element with the id "test" and calls the get() method to convert the jQuery object into a DOM object.

Use toArray() method to convert jQuery object to DOM object

toArray() method can also convert jQuery object to DOM object, and returned as an array. For example:

var testDivArray = $('#test').toArray();
var testDiv = testDivArray[0];

In the above code, use the

toArray() method to convert the div element with the id "test" into an array of DOM objects, and take out the first element as the DOM object .

Use destructuring arrays to convert jQuery objects into DOM objects

ES6 provides the syntax for destructing arrays (destructing arrays), which can deconstruct an array into a single variable or Multiple variables. You can also use destructuring array syntax to convert jQuery objects into DOM objects, for example:

var [testDiv] = $('#test');

In the above code, use destructuring array syntax to convert the div element with the id "test" into a DOM object.

4. Practical Case

Finally, we give a simple practical case, using jQuery and DOM to convert each other, and perform corresponding operations.

In the HTML file, we first define a button element and a div element:

<button id="clickme">Click me</button>
<div id="content">The content to be changed</div>

Then in the JavaScript file, we use jQuery to convert the button element into a jQuery object and create the button Bind the click event. When the button is clicked, we use DOM to convert the div element into a DOM object and use the innerHTML attribute to modify the content of the div element.

$(document).ready(function() {
  var $clickMe = $('#clickme');
  var contentDiv = document.getElementById('content');

  $clickMe.on('click', function() {
    contentDiv.innerHTML = 'The content has been changed';
  });
});

In the above code, first use the

$() function to convert the button element with the id "clickme" into a jQuery object, and then use the on() method Bind the click event, and use the document.getElementById() method in the callback function to convert the div element with the id "content" into a DOM object, and finally use the innerHTML attribute to modify the div The content of the element.

Summarize

This article mainly explains the conversion method between jQuery and DOM, and gives specific practical cases. In front-end development, jQuery and DOM are two very commonly used technologies that are closely related to each other. Mastering their conversion methods can bring more convenience and flexibility to our development.