Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to write shorthand for document.getElementById() method in JavaScript?
The document.getElementById() method allows us to access any HTML element using its id in JavaScript. Every webpage can contain only a single HTML element with a single id.
You can use the below example code to access any HTML element using its id:
let element = document.getElementById('id');
In the above code, we used the getElementById() method of the document object and passed the id as a parameter.
Now, if we require to access multiple elements using their id, it is not a good idea to repeatedly type document.getElementById(), but we can create a shorthand for it and use it.
You can follow the below approaches to create shorthand for the document.getElementById() method.
Using Arrow Function Expression
The easiest solution is to create shorthand for the document.getElementById() method using arrow functions. We can create an arrow function taking id as a parameter and returning the element after accessing it using the document.getElementById() method.
Syntax
let get = (id) => document.getElementById(id);
let element = get('element_id');
In the above syntax, we have created the get() arrow function, which takes id as a parameter, accesses the element using the document.getElementById() method and returns it.
Example
In the example below, we have used the arrow function to create a shorthand for the document.getElementById() method. Users can observe that we don't need to write 'document.getElementById()' every time to access an element using id, as we can use the get() function:
<html>
<body>
<h3>Using arrow functions to write shorthand for document.getElementById() method</h3>
<div id="output"></div> <br>
<div id="test"></div>
<script>
let get = (id) => document.getElementById(id);
let output = get('output');
output.innerHTML += "This text is written in the div with id equal to output. <br>";
let test = get('test');
test.innerHTML += "This text is written in the div with id equal to test. <br>";
</script>
</body>
</html>
Using Object Prototypes
In JavaScript, most things are objects, and every object contains its prototype. We can add methods or properties to the prototype of the object. Here, we will add a property to the document object's prototype with a document.getElementById value. After that, we can use that property to access an element using id.
Syntax
HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');
In the above syntax, we have used the 'HTMLDocument' object to access the document object's prototype. We have added the 'get' property to the document object.
Example
In the example below, we added the 'get' property to the HTML document object and assigned the document.getElementById() method as a value. Now, we can access the get property using the 'document' object like document.get():
<html>
<body>
<h3>Using object prototypes to write shorthand for document.getElementById() method</h3>
<div id="output"></div>
<div id="test"></div>
<script>
HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');
output.innerHTML += "The output div accessed by id using the get prototype. <br>";
let test = document.get('test');
test.innerHTML += "The test div accessed by id using the get prototype. <br>";
</script>
</body>
</html>
Using jQuery
jQuery is a JavaScript library allowing us to write more readable JavaScript code. We can use the $() element accessor of jQuery to access the HTML element using its id.
Syntax
$('#id')
In the above syntax, we used the '#' character to access an element using its id.
Example
In the example below, we have added jQuery CDN in the <head> tag to use jQuery with HTML. The '#' character specifies that we want to access the element by id:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h3>Using jQuery to write shorthand for document.getElementById() method</h3>
<div id="test"></div>
<script>
$('#test').html('This div is accessed via id using jQuery.');
</script>
</body>
</html>
Comparison
| Method | Syntax Length | Dependencies | Best For |
|---|---|---|---|
| Arrow Function | Short | None | Modern JavaScript projects |
| Prototypes | Short | None | Extending document functionality |
| jQuery | Very Short | jQuery library | jQuery-based projects |
Conclusion
Creating shorthand for document.getElementById() improves code readability and reduces repetition. The arrow function approach is recommended for modern JavaScript, while jQuery provides the shortest syntax if you're already using the library.
1K+ Views
