DOM Selectors in JavaScript
Tags: javascript, beginners, html
Published: 2021-11-08 21:50:26

While creating interactive content with JavaScript, you will often find yourself needing to access various HTML elements in order to make changes to them. We'll go through some of the main ways you can grab elements in the DOM, and how you can make use of what they hold.
<h1>Different Types of Selectors</h1>
<h3>ID</h3>
If you want to manipulate one single element, the easiest and most straight-forward approach is to find that element by `id`. Only one HTML element can have a specific `id` attribute, and each ID is unique to one element.
<h3>Class</h3>
Multiple elements can be grouped together when they are given the same `class` name. An example would be if you have multiple buttons that serve the purpose of deleting content, and you want all of those buttons to be manipulated in the same manner.
<h3>Tag</h3>
Some common tags in HTML are `body`, `h1`, `p`, `div`, `span`, and `img`, though there are numerous others. Another DOM selector is `tagName`, which selects elements based on the type of element they are.
<h1>Accessing an Element by ID</h1>
In order to access an element with a specific `id`, you have a few options. You can either use:
```
document.getElementById('element-id')
```
or 
```
document.querySelector('#element-id')
```
Either option will search the entire document and return the element with a matching `id` as an object. If no element with the given `id` is found, `null` will be returned. If you encounter a `TypeError: Cannot read properties of null`, it is likely that no element with that `id` was found.

You can also use these methods to create a variable, and then manipulate the DOM by calling that variable. 
```
let foundElement = document.getElementById('first-header')
foundElement.style.color = 'blue'
```
If an element does not exist in the HTML file and is created using JavaScript, you can still give that element an `id` using JavaScript with the following syntax:
```
let createdWithJsElement = document.createElement('p')
createdWithJsElement.id = 'js-element'
```
<h1>Accessing an Element by ClassName</h1>
Similar to accessing an element by `id`, you have a few choices for selecting elements by `class`. You can access elements by `class` name with the following methods.
```
document.querySelector('.element-class')
```
This will return only the **first** element that matches the specified `class` name.
```
document.getElementsByClassName('element-class')
```
The use of `getElementsByClassName` will return a live `HTMLCollection` of all the elements matching that `class`. 
```
document.querySelectorAll('.element-class')
```
Using the `querySelectorAll` method will return a static `NodeList` of all the elements matching that class. Distinguishing between a `NodeList` and an `HTMLCollection` is a whole other topic which you can explore [here](https://unicorntears.dev/posts/queryselectorall-vs-getelementsbyclassname/).

*Note the use of a __dot__ prior to the `class` name, as opposed to the __hash-tag__ prior to doing a query selector on an `id`.*

In order to manipulate every element that is returned from the `getElementsByClassName` or `querySelectorAll` methods, you'll need to run a `for loop` to iterate the array-like object and make the desired changes to each element.
```
let allButtons = document.getElementsByClassName('button')

function testButtons () {
  for (let i = 0; i < allButtons.length; i++) {
    console.log(`I am button ${[i+1]}`);
  }
}
```
You can create or change an element's `class`, or other `attribute`, by accessing that element by its `[index]`.
```
allButtons[5].className = 'delete-button'
```

<h1>Accessing an Element by TagName</h1>
Yet another way to select elements in the DOM is to select the elements by their `tag` name.
```
let allParagraphs = document.getElementsByTagName('p')
```
You can get even more specific with your search for specific elements based on `tag name`. Suppose you want to change the color of the text in all the paragraphs of a "Skills" section. You can search for elements by `tag name` within a specific div.
```
const mySkills = document.getElementById("skills-div");
const skillParagraphs = mySkills.getElementsByTagName("p");
```
Like when the `getElementsByClassName` method is called, `getElementsByTagName` will return a live HTML collection of elements. This can be iterated over with a `for loop` just like the list of elements gathered with the `getElementsByClassName` method.
<h1>Wrapping It Up</h1>
If you can't precisely locate elements, you'll have difficulty making your JavaScript code come to life. These selectors are just the tip of the iceberg for making your creations dynamic.

Photo by <a href="https://unsplash.com/@max_duz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Max Duzij</a> on <a href="https://unsplash.com/s/photos/programming?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>