How to Call HTML Elements in JavaScript

Last updated on May 24th, 2023 at 08:47 am

One of the first things you should learn as a developer is how to call HTML elements in JavaScript. JavaScript is capable of just about anything, and that’s because of its ability to affect the behavior of HTML elements. Think of each element as a lone ball of yarn.

Photo by Ilya Chunin on Unsplash

Each has infinite potential. You could do anything with it. Most will be used for their intended purpose, crocheted or knitted into a sweater or a hat or a toy. But with some creativity, each ball, or HTML element, could be made to behave in a manner outside its scope of inherent abilities. It could be used for something unexpected, like tying down the limbs of a supervillain with a cotton allergy or being strung out to help you find your way out of an ancient labyrinth.

JavaScript allows you to take a simple div, for instance, and make it bounce off the walls of the screen, rather than sit there dormant like a sad, dormant box. But in order to change an element’s behavior, JavaScript needs a way to reference it.

Document Methods

In JavaScript, a method is an action that’s pre-programmed to affect an object or objects. There are a number of methods called Document Methods. These reference the HTML Document and manipulate elements within it. In order to do this, you start with the word, “document,” followed by the member operator: a period or “dot.” (You can also use bracket notation.) Then, you add instructions and finish with parentheses encasing the ID of the object you’re calling, like so:

document.getElementById(‘id-name’);

Remember to close off your JS sentences with a semi-colon.

This document method reaches into the HTML document and searches for the element with the ID you specify, then pulls it into your JS document for use. But there’s one more step before you can actually affect the element. You have to assign the element to a JS variable, so add some code to the beginning of your method like this:

const varName = document.getElementById(‘id-name’);

This way, id-name is stored in JavaScript. Without the variable, JavaScript would find the ID and promptly forget it again before you could use it. Now, you can call varName and JavaScript would dutifully refer directly to id-name in the HTML document and perform any action you assign to it.

Now, there are many document methods. We won’t cover all of them here, but you should know there are other ways of referencing HTML elements in JS using more than just their ID. You can call elements by ID, class, or tag name, thus:

  • const varName = document.getElementById(‘id-name’);
  • const varName = document.getElementsByTagName(‘tag-name’);
  • const varName = document.getElementsByClassName(‘class-name’);

Note the “s’ after “Element” in the last two. That’s there because an ID should only ever be used for one specific element. That is, you can have many IDs, but each should be used on only one HTML element because the code won’t know which element to apply your changes on. But tag names and classes can hold any number of elements without any such repercussions and the “s” is added to reflect that.

But it can be cumbersome to have to type out a different method every single time you need to reference an HTML element in JavaScript, so some very kind people invented another method as a convenient shorthand: document.querySelector('selector-name');

Image of a computer with code on the screen.
Photo by Arnold Francisca on Unsplash

Shorthand

The benefits to the querySelector() method are that it is slightly shorter and that it allows you to call by tag name, class, or ID with a single selector. Any selector is valid as long as you specify its type inside the 'single-quotes'. Use the same syntax as you would to call a selector in CSS. For example:

  • document.querySelector('tag-name'); would return the first HTML element with the specified tag name.
  • document.querySelector('.class-name'); would return the first HTML element with the specified class name.
  • document.querySelector('#id-name'); would return the first HTML element with the specified ID name.

But what if you need a list of all elements that share a certain selector? In that case, use document.querySelectorAll('selector') and the complete list will be returned instead of just the first one found in the HTML document.

Want want to learn more about these methods? Check out MDN‘s articles on each:

Congratulations! Now you know how to call HTML elements in Javascript! If you’re a beginner, be sure you understand what JavaScript is before you go too much further. Have a question? Submit an article request via the comments and I’ll do my best to answer your question in another blog post!

Leave a Comment

Your email address will not be published. Required fields are marked *