search

Home >Web Front-end >JS Tutorial >How to write shorthand for document.getElementById() method in JavaScript?

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

王林
王林forward
2023-08-27 18:53:02953browse

如何在 JavaScript 中编写 document.getElementById() 方法的简写？

document.getElementById() method allows us to access any HTML element using its id in JavaScript. Each web page can only contain a single HTML element with a single id.

You can use the sample code below to access any HTML element by 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 need to access multiple elements using id, then using document.getElementById() is not a good idea, but we can create a shorthand for it and use that.

You can create a shorthand for the document.getElementById() method as follows.

Use arrow function expression to write the abbreviation of document.getElemenetById() method

The simplest solution is to use arrow functions to create a shorthand for the document.getElementById() method. We can create an arrow function that takes id as a parameter and returns the element after accessing it using the document.getElementById() method in the arrow function body.

grammar

You can use arrows or anonymous functions according to the syntax below to write the document.getElementById() shorthand for the method. 

let get = (id) => document.getElementById(id);
let element = get('element_id');

In the above syntax, we create the get() arrow function which takes the id as parameter, accesses the element using the document.getElementById() method and the id, and returns it.

Example

In the following example, we use an anonymous arrow function to create a shorthand for the document.getElementById() method. In the code, user can observe that we don't need to write "document.getElementById()" every time to access an element using id because we can use 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 prototype to write the abbreviation of document.getElementById() method

In JavaScript, most things are objects, and each object contains its prototype. Likewise, a prototype is an object that contains the prototype that creates the prototype chain. We can add a method or property to the object's prototype and can use it. Here we will add a property to the "document" object using the "document.getElementById" value. Afterwards, we can use this attribute to access the element by id.

grammar

Users can use the object prototype to write the abbreviation of the document.getElementById() method according to the following syntax. 

HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');

In the above syntax, we use the "HTMLDocument" object to access the prototype of the document object. We have added the "get" property to the document object.

Example

In the following example, we add the "get" attribute to the HTML document object and specify the document.getElementById() method as the value.

Now, we can access the get property using the "document" object (such as "document.get()"). We can pass id as parameter of "get" attribute 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 jQuery

​​>

jQuery is a JavaScript library that allows us to write more readable JavaScript code. We can access an HTML element by its id using jQuery’s “$()” element accessor.

grammar

Users can use JQuery to write the abbreviation of the document.getElementById() method according to the following syntax. 

$('#id')

In the above syntax, we use the "#" character to access an element by its id.

Example

In the example below, we have added JQuery CDN in the

tag to use JQuery in HTML. We created the "div" element in HTML. In JQuery, we use "$()" accessor to access the element with id. The "#" character specifies that the user wants 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 have learned to use various methods to write the abbreviation of the document.getElementById() method. JQuery provides a simple and short code format to access elements using id. If users want to use JavaScript, they can use arrow functions or record the object's prototype according to their own preferences.

The above is the detailed content of How to write shorthand for document.getElementById() method in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to create an element from a string in JavaScript?Next article：How to create an element from a string in JavaScript?

Related articles

See more