Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 use a 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.
Use the arrow function expression to write shorthand for document.getElemenetById() method
The easiest solution is to create shorthand for the document.getElementById() method uses the arrow functions. We can create an arrow function taking id as a parameter and returning the element after accessing the element using the document.getElementById() method in the arrow function body.
Syntax
You can follow the syntax below to use an arrow or anonymous functions to write shorthand for document.getElementById() method.
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, and access the element using the document.getElementById() method and id, and returns it.
Example
In the example below, we have used the anonymous arrow function to create a shorthand for the document.getElementById() method. In the code, users can observe that we don’t need to write a ‘document.getElementById()’ every time to access an element using id, as we can use the get() function
<html>
<body>
<h3>Using the arrow or anonymous functions to write shorthand for document.getElementById() method in JavaScript </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 an id equal to the test. <br>";
</script>
</body>
</html>
Use the prototypes to write shorthand for the document.getElementById() method
In JavaScript, most things are objects, and every object contains its prototype. Again, the prototype is also an object containing its prototype creating the prototype chain. We can add methods or properties to the prototype of the object and can use it. Here, we will add a property to the ‘document’ object with a ‘document.getElementById’ value. After, we can use that property to access an element using id.
Syntax
Users can follow the syntax below to write shorthand for the document.getElementById() method using object prototypes.
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()’. We can pass the id as a parameter of the ‘get’ property to access the element by id.
<html>
<body>
<h3>Using the <i> object prototypes </i> to write shorthand for document.getElementById() method in JavaScript </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');
output.innerHTML += "The test div accessed by id using the get prototype. <br>";
</script>
</body>
</html>
Use the jQuery
jQuery is a JavaScript library allowing us to write more readable JavaScript code. We can use the ‘$()’ element accessors of jQuery to access the HTML element using its id.
Syntax
Users can follow the syntax below to write shorthand for document.getElementById() method using the JQuery.
$('#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. We created the ‘div’ element in HTML. In JQuery, we have used the ‘$()’ accessor to access the element with id. The ‘#’ character specifies that users 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 the <i> jQuery</i> to write shorthand for document.getElementById() method in JavaScript </h3>
<div id = "test"> </div>
<script>
$('#test').html('This div is accessed via id using jQuery.');
</script>
</body>
</html>
Users learned to write a shorthand for document.getElementById() method using various approaches. JQuery provides a simple and short code format to access an element using id. If users want to use JavaScript, they can use the arrow function or document the object’s prototype according to their comfort.
600 Views
