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 object 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 document, DOM maps the entire page to a file composed of hierarchical nodes.

The 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 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 document object. Each method will return a DOM object or a list of DOM object.

  1. getElementById(var elementId) : getElementById(“company_list”).
  2. getElementsByTagName(var tagName) :¬†getElementsByTagName(“li”).
  3. getElementsByClassName(var className) :¬†getElementsByClassName(“class_one”).
  4. getElementsByName(var elementName) :¬†getElementsByName(“name_company_list”).
  5. getElementsByTagNameNS(var nameSpace, var localName).

After get 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.

  1. $(“#element_id”) : For example $(“#language_list”).
  2. $(“element_tag_name”) : For example $(“li”).
  3. $(“.element_css_class_name”) : For example $(“.class_one”).
  4. $(“selector_1, selector_2, selector_3”) : For example $(“#language_list, .class_one, li”).
  5. $(“#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.
READ :   jQuery Ancestor Descendant Selector Example

After get 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.

difference between dom and jquery objects example

There are two ul list and two button in this example. The first list list some programming language and the second list list some it company name.

When you click the first button, it will use jQuery method to get all the first li html element in array and then transform each li to html DOM and show the text in alert.

When click 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 jQuery html() method to get li 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>
(Visited 18 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *