Home / Tutorials / Javascript / HTML Element Selection

Javascript HTML Element Selection Tutorial

In this Javascipt tutorial we learn several functions that allow us to select HTML elements in our document.

We learn how to select by id and name attributes, tags and classes. We also learn how to use the query selector functions for complex queries.

Lastly we discuss which selector functions are the best to use.

DOM Element Selection
How to select elements by their id attribute
How to select elements by their tag names
How to select elements by their name attribute
How to select elements by their class names
How to get the amount of elements selected
How to select single elements with the query selector
How to select multiple elements with the query selector
Which Javascript selector method should you use
Summary: Points to remember

DOM HTML Element Selection

Javascript allows us to perform operations on HTML elements, such as changing text, styles etc. Before we can manipulate an element or its attributes however, we must select it first.

There are several handy methods to easily select an element, or group of elements, in our document.

getElementById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()

These methods are invoked from the element object we want to search inside of. For example, if we want to search through the whole document, we would use the document object.

Example:

 document.getElementById("id");

How to select elements by their id attribute

If an HTML element has an id specified, we can use the getElementById() method to retrieve it as an object.

Note that the method is named in the singular, getElementById. That’s because elements must have unique id values, we can’t get more than one with the same id.

Syntax:

 element.getElementById("id");

Example:

<html>
<body>
  <!-- HTML div element with unique id -->
  <div id="container">Container div</div>
</body>
<script>
  // get the element by its id
  // and store it in the 'x' object
  const x = document.getElementById("container");

  // mutate innner html for demonstration
  x.innerHTML = "Container div has been selected";
</script>
</html>

In the example above, we selected the div with the ‘container’ id.

In this, and the following examples, we’ll use properties like innerHTML to change the contents of the selected elements as a demonstration.

If you’re not familiar with these properties, don’t worry. We cover them in the Text Manipulation lesson .

How to select elements by their tag names

We can select elements from their tag names by using the getElementsByTagName() method.

Note that this time the method is named in the plural form, getElementsByTagName. That’s because there can be multiple elements with the same tag.

Syntax:

 element.getElementsByTagName("tag");

This method will store all the elements it finds inside an array, even if it only finds one.

Example:

<html>
<body>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</body>
<script>
  // get all <li> elements in the
  // document and store them in
  // 'x' as an array
  const x = document.getElementsByTagName("li");

  // the elements must then be
  // accessed by their index in
  // the array
  x[0].innerHTML = "L1";
  x[1].innerHTML = "L2";
  x[2].innerHTML = "L3";
</script>
</html>

In the example above, we access each list item element with the indexer from where we’re able to change their text.

How to select elements by their name attribute

We can also select multiple elements by their name attribute with the getElementsByName() method. The method will return the elements in an array.

Syntax:

 element.getElementsByName("name");

Example:

<html>
<body>
  <!-- h1 with name attribute -->
  <h1 name="heading">Heading 1</h1>
</body>
<script>
  // get all elements with 'heading' name
  const x = document.getElementsByName("heading");

  // this method also returns
  // an array of elements
  x[0].innerHTML = "H1";
</script>
</html>

Even though there’s only one element with a name attribute, the method still returns an array.

How to select elements by their class names

We can select multiple different elements by their class name with the getElementsByClassName() method. The method will return the elements in an array.

Syntax:

 element.getElementsByClassName("class");

Example:

<html>
<body>
  <!-- two elements with the same class -->
  <h1 class="theme">Heading 1</h1>
  <div class="theme">Container div</div>
</body>
<script>
  // get all elements with the 'theme' class
  const x = document.getElementsByClassName("theme");

  // this method also returns
  // an array of elements
  x[0].innerHTML = "H1 changed";
  x[1].innerHTML = "Div changed";
</script>
</html>

How to get the amount of elements selected

We can use the length property to return the number of elements that our selector method will return.

Example:

<html>
<body>
  <!-- two elements with the same class -->
  <h1 class="theme">Heading 1</h1>
  <div class="theme">Container div</div>
</body>
<script>
  // get all elements with the 'theme' class
  const x = document.getElementsByClassName("theme");

  // .length returns the amount of elements selected
  x[1].innerHTML = "There are " + x.length + " elements with a 'theme' class";
</script>
</html>

How to select single elements with the query selector

The querySelector() method is an alternative way for us to select single elements in our document. The argument we pass to the method is any CSS selector.

Syntax:

element.querySelector("tag");
element.querySelector("#id");
element.querySelector(".class");
// or multiple selectors
element.querySelector("tag #id .class");

The main benefit with this method is that we can combine selectors.

For example, if we wanted to select an anchor tag inside a list element, we would specify the li tag and then the a tag, separated by a space.

Example:

<html>
<body>
  <a href="https://www.google.com">Google</a>

  <!-- nested elements -->
  <ul>
    <li><a href="https://www.koderhq.com">KoderHQ</a></li>
  </ul>
</body>
<script>
  // get the a tag in the list-item tag
  const x = document.querySelector("li a");

  // modify the link
  x.setAttribute("href", "https://www.koderhq.com/tutorial/javascript/");
  x.innerHTML = "KoderHQ Javascript Tutorials";
</script>
</html>

When we want to select hierarchically, like above, we separate our selectors with a space. We also go from parent down to children, outside to inside. The li is the parent of the a tag and so it’s selected first.

Things that occur within the same element are not separated with a space, for example the li tag with a class of item.

Example:

 element.querySelector("li.item");

The query selector allows us to get very specific with our selectors and drill down into our elements.

Example:

<html>
<body>
  <!-- nested elements -->
  <div class="container">

    <a href="https://www.google.com">Google</a>

    <ul id="nav">
      <li class="nav-link"><a href="https://www.koderhq.com">KoderHQ</a></li>
    </ul>

  </div>
</body>
<script>
  // get the first element with the
  // class 'nav-link' inside the list-item
  // inside the '#nav' unordered list
  // inside the 'container' class
  const x = document.querySelector(".container #nav li.nav-link");

  // modify what's inside the list-item
  x.innerHTML = "Link removed";
</script>
</html>

How to select multiple elements with the query selector

Javascript provides us with the querySelectorAll() method to select multiple elements. The method will return the elements in an array.

Syntax:

element.querySelectorAll("tag");
element.querySelectorAll("#id");
element.querySelectorAll(".class");
// or multiple selectors
element.querySelectorAll("tag #id .class");

Example:

<html>
<body>
  <!-- multiple queries -->
  <ul id="nav">
    <li class="nav-link">List item 1</li>
    <li class="nav-link">List item 2</li>
  </ul>
</body>
<script>
  // get all the list items in the
  // '#nav' unordered list with the
  // class 'nav-link'
  const x = document.querySelectorAll("#nav .nav-link");

  // modify what's inside the array
  x[0].innerHTML = "L1";
  x[1].innerHTML = "L2";
</script>
</html>

As with the other muli-selection methods, we access elements with the array indexer.

Which Javascript selector method should you use

The querySelector methods allow for more complex queries because we can combine selectors in order to target the exeact element we want.

The getElement methods are more broad in their selections and it’s more difficult to target specific elements without changing the html.

For these reasons we recommend the querySelector methods, and you’ll typically see them used a lot more often in the wild.

Summary: Points to remember

We can select one or more elements in our document with the special selecting methods Javascript provides.
- We use getElementById() to find the first element of a specific id.
- We use getElementsByTagName() to find all the elements with a specific tag name.
- We use getElementsByName() to find all the elements with a specific name attribute.
- We use getElementsByClassName() to find all the elements with a specific class name.
- The querySelector() and querySelectorAll() both provide us with the option to use multiple selectors to find elements
Selection methods that select multiple values will return them in an array.
We can get the number of elements in an array by using the length property.
The querySelector methods are recommended and most often used by professional developers.

Document Object Model

HTML Element Styling