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

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 an 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 is 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

<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>

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

<!-- using jquery library -->
<script src="https://code.jquery.com/jquery-git.js">
</script>
<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>

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.