Skip to content
Related Articles

Related Articles

Improve Article

Which is faster document.getElementByID(‘txtName’) or $(‘#txtName’) ?

  • Last Updated : 25 Jul, 2021
Geek Week

In this article, we will see which is fast document.getElementByID(‘txtName’) or $(“#txtName”). Let’s first what are these and what they do.

document.getElementByID(‘txtName) Method: This method is used to get the element that has ID attribute with the specified value.

Syntax:

document.getElementById( elementID )

Parameter: The ID of the element that you want to get.

Return Value: It returns null if no element with a specified id found.



This method is basically used if we want to manipulate a particular element or you want info about a particular element. An ID should be unique within a page otherwise if two elements have the same id then this method will return the first element.

Example: In this example, we will change the text of the element whose id matched.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- using jquery library -->
    <script src=
    </script>
</head>
  
<body>
    <p id="first">My id is first. <br>
        Click on the button <br>
        to change my text.
    </p>
  
    <button onclick="FirstFunction()">Click Here</button>
    <script>
        FirstFunction = ()=>{
            document.getElementById("first")
            .innerHTML = "Hey! i am changed."
        }
    </script>
</body>
  
</html>

Output:

$(‘#txtName) Method: This id selector of jQuery select element with the specified id. Everything like an id should be unique, all apply here too.

Syntax:

$("#id")

Parameter: Pass the id of element that you want to get.

Basically, we select an element using this method, and then perform various operations on the selected element like getting inner text, changing CSS, etc.



Example: In this example, we will change the CSS of the selected element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- using jquery library -->
    <script src=
    </script>
</head>
  
<body>
    <p id="first">
        Click on button to <br>
        Change my look.
    </p>
  
    <button onclick="FirstFunction()">Click Here</button>
  
    <script>
        FirstFunction = ()=>{
            $("#first").css({
                "border": "2px solid red",
                "background-color": "pink",
                "width":"10%",
                "padding": "10px"
            })
        }
    </script>
</body>
  
</html>

Output:

Which one is faster method between document.getElementByID(‘txtName’) and $(‘#txtName’): This is really a nice question. To answer this let’s recall what is jQuery?  

JQuery is a javascript library designed to simplify the code. So basically jQuery is written in javascript. Document.getElementByID(‘txtName’) is used to select an element whose id is txtName and it is written in native javascript. Whereas, $(‘#txtName’) is also used to select an element whose id is txtName.  This is a function present in the jQuery library. If you look at the implementation of this function, it internally makes a call to document.getElementByID().     The simple answer is document.getElementByID(‘txtName’) is faster than $(‘#txtName’) because jQuery is written on top of javascript. It means internally jQuery is using only native javascript codes. And native javascript will be always fast.

Difference between document.getElementByID(‘txtName’) and $(‘#txtName’).                

 document.getElementByID(‘txtName’)                           $(‘#txtName’)                                    
It is used to select an element with specified id.It is also used to select an element with a specified id.
This method is written in native javascript.This method belongs to jQuery. And jQuery is written in javascript.
Native methods are always fast.

The methods written in jquery are slower as compared to native 

methods because internally they call native methods.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :