How to write shorthand for document.getElementById() method in JavaScript ?

0 0 1 minute read

The task is to select the elements with id by using the shorthand for document.getElementById() with the help of JavaScript. we’re going to discuss a few techniques.

Approach 1:

Define a function that returns the document.getElementById(‘idName’).
This method takes IDName as the first and only argument.
Call the method with ID as the argument.

Example: In this example, a function is created which returns the document.getElementById(‘idName’).

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        Write Shorthand for document.getElementById() 
        method in JavaScript
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        zambiatek
    </h1>
 
    <p>
        Click on the button to select the 
        element by shorthand instead of 
        getElementById
    </p>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <p id="result"></p>
 
    <script>
        let ID = function (elementId) {
            return document.getElementById(elementId);
        };
 
        let res = ID("result");
 
        function GFG_Fun() {
            res.innerHTML = "Element selected by "
                + "shorthand of getElementById";
        }
    </script>
</body>
 
</html>

Output:

How to write shorthand for document.getElementById() method in JavaScript ?

Approach 2:

Define a prototype = document.getElementById.
Use this prototype by passing IDName as the first and only argument in-place of document.getElementById.

Example: In this example, a HTMLDocument Prototype is created which then used to select the element by IDName.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        Write Shorthand for document.getElementById()
        method in JavaScript
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        zambiatek
    </h1>
 
    <p>
        Click on the button to select the
        element by shorthand instead of
        getElementById
    </p>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <p id="result"></p>
 
    <script>
        HTMLDocument.prototype.e = document.getElementById;
 
        let res = document.e("result");
 
        function GFG_Fun() {
            res.innerHTML = "Element selected by "
                + "shorthand of getElementById";
        }
    </script>
</body>
 
</html>

Output:

How to write shorthand for document.getElementById() method in JavaScript ?

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!