Difference Between Native Dom And jQuery Object

As a web UI programmer, you always need to operate DOM objects and jQuery objects both in your JavaScript code. Sometimes you may confuse which object to use because different objects provide different methods. This article will tell you the difference between them and how to use them correctly with examples.

1. DOM And jQuery Object Difference.

DOM is an abbreviation of Document Object Model, an application programming interface for HTML and XML documents, DOM maps the entire page to a file composed of hierarchical nodes.
A jQuery object is a new object that is created after wrapping the DOM object through the jQuery framework, which is essentially a generic JavaScript object that contains a collection of DOM objects.

So you can think of a DOM object as a separate individual and a jQuery object as a collection of data from multiple DOM objects.

2. How To Get DOM Object Or jQuery Object.

2.1 Get DOM Objects Method.

To get DOM objects you can use below JavaScript method of the document objects. Each method will return a DOM object or a list of DOM objects.
getElementById(var elementId): getElementById(“company_list”).

getElementsByTagName(var tagName): getElementsByTagName(“li”).
getElementsByClassName(var className): getElementsByClassName(“class_one”).
getElementsByName(var elementName): getElementsByName(“name_company_list”).

getElementsByTagNameNS(var nameSpace, var localName): getElementsByTagNameNS(“nameSpace”, “localName“).
After getting each DOM object, you can call it’s innerHTML or innerText attribute to get the element’s Html or text value.

2.2 Get jQuery Objects Method.

To get jQuery objects you can use jQuery provided methods like below.

$(“#element_id”): For example $(“#language_list”).
$(“element_tag_name”): For example $(“li”).
$(“.element_css_class_name”): For example $(“.class_one”).

$(“selector_1, selector_2, selector_3”): For example $(“#language_list, .class_one, li”).
$(“#language_list > li”): Return a jQuery array object, each object in the array is a html li tag and all the li element’s parent element’s id is language_list.
After getting each jQuery object, you can call it’s methods such as html() to get the related Html element text value.

3. DOM And jQuery Object Transition Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/apSYoxcCn7M

There are two ul lists and two buttons in this example.

The first list object list some programming languages and the second list object list some IT company names.
When you click the first button, it will use the jQuery method to get all the first li Html tag elements in an array and then transform each li tag to Html DOM and show the text in a javascript alert window.
When clicking the second button, it will use DOM method to get all the li Html elements in an array, and then transform each li DOM object to jQuery object and use the jQuery html() method to get li tag element text.

jquery-dom-transition.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery And DOM Transition</title>
    <script type="text/javascript" src="./lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Set html body element css style paddingLeft value to 180px.
            $('body').css({paddingLeft : '180px'})

            // When click the button with id jquery_to_dom.
            $('#jquery_to_dom').click(function () {


                /* Get jQuery list object. "#language_list > li" is a selector which means
                   get all li html element under ul( ul id is language_list). */
                var li_array = $("#language_list > li");

                // Get jQuery array length.
                var length = li_array.length;

                var message = "";

                // Loop in the array.
                for(var i=0; i < length; i++)
                {
                    // Get each html DOM object in the array.
                    var dom_li_object = li_array[i];

                    // Use jQuery array object get method to get html DOM object.
                    //var dom_li_object = li_array.get(i);

                    message = message + dom_li_object.innerHTML;

                    if(i < length - 1)
                    {
                        message += ",";
                    }
                }

                // Display html DOM innerHTML value in alert.
                alert(message);
            })


            // When click the button with id dom_to_jquery.
            $('#dom_to_jquery').on('click', function () {

                var message = "";

                // Get the top ul DOM object by id.
                var ul_dom = document.getElementById("company_list");

                // Get ul DOM child nodes.
                var ul_dom_child = ul_dom.childNodes;

                // Get child nodes length.
                var length = ul_dom_child.length;

                // Loop the DOM object array.
                for( var i = 0; i < length; i++)
                {
                    // Get each child DOM object.
                    var child_dom = ul_dom_child[i];

                    // Get child DOM object text.
                    var child_dom_text = child_dom.innerText;

                    // If the text is not undefined.
                    if(child_dom_text != undefined) {

                        // Transform DOM to jQuery object.
                        var jquery_li_obj = $(child_dom);

                        // Get li text by jQuery html() method.
                        message += jquery_li_obj.html();

                        if (i < length - 1) {
                            message += ",";
                        }
                    }

                }

                // Display message in alert.
                alert(message);
            })
        });

    </script>
</head>
<body>
    <P>jQuery To DOM</P>
    <ul id="language_list" name="name_language_list">
        <li>jQuery</li>
        <li>JavaScript</li>
        <li>Node.JS</li>
        <li>C++</li>
        <li>Java</li>
        <li>Android</li>
    </ul>

    <P>DOM To jQuery</P>
    <ul id="company_list" name="name_company_list">
        <li>Apple</li>
        <li>Google</li>
        <li>IBM</li>
        <li>Microsoft</li>
        <li>Oracle</li>
        <li>Quora</li>
    </ul>

    <button id="jquery_to_dom">jQuery To DOM</button>

    <button id="dom_to_jquery">DOM To jQuery</button>
</body>
</html>

1. DOM And jQuery Object Difference.

2. How To Get DOM Object Or jQuery Object.

2.1 Get DOM Objects Method.

2.2 Get jQuery Objects Method.

3. DOM And jQuery Object Transition Example.

Leave a Comment Cancel Reply