# HTML Elements

# Retrieving HTML Elements

# Using getElementById()

The getElementById('id') function returns a single element by the element's unique id.

const box = document.getElementById('boxId')

In this example below we target a specific element by the id "boxId" to check the element's width and height.

# Using querySelector()

The querySelector() function returns a single element through the use of a CSS Selector. In the case that a CSS Selector matches more than one element, the first element matched will be retrieved.

const box = document.querySelector('.box')

Any valid CSS Selector will work with querySelector().

// using tags and pseudo-classed
const box2 = document.querySelector('div:nth-child(2)')
// using attributes
const box3 = document.querySelector('[data-type]')

In the example below, three different CSS selectors are used to retrieve each of the three boxes and set the background color and text.

# Using getElementByClassName()

The getElementsByClassName() returns a list of elements with a specific class allowing the retrieval of more than one element. Using the Array returned, it is possible to manipulate all of the matched elements.

const boxes = document.getElementsByClassName('box')

For example document.getElementsByClassName('select') will return an array of elements that all have the class "select".

# Using querySelectorAll()

The querySelectorAll() function returns all the elements as a list that match the provided CSS Selector. Using the Array returned, it is possible to manipulate all of the matched elements.

const boxes = document.querySelectorAll('.box')

In the example below, all the boxes except the second one is retrieve using the querySelectorAll() function and the :not selector.

# Manipulating HTML Elements

When retrieving an HTML Element using one of the method discussed above, each HTML Element is represented as an [Object] in JavaScript. Updating the properties of this object will also manipulate the HTML. From this object it possible to add, remove or change an elements attributes, classes, text and even its inner HTML.

# HTML Elements Attributes

All native attribute (non-custom attributes), can be access as properties in the HTML Element Object. So if we were to have an anchor tag like the one below, we would be able to read, change, add, and remove its attributes.

<a id="link" href="https://facebook.com"></a>

# Reading Attributes

Once an HTML element has been retrieved, we can read the values of the attributes.

const link = document.getElementById('link')
link.textContent = link.href

# Adding / Changing Attribute Values

By changing the values of the properties, the value of the attributes will also change in the HTML.

link.href = 'https://twitter.com'

The same process can be use to add new attributes to HTML elements.

link.target = '_blank'

# The setAttribute() function

It is also possible to use the setAttribute() function to add/change attributes.

link.setAttribute('href', 'https://instagram.com')
link.setAttribute('target', '_blank')

# The removeAttribute() function

The removeAttribute() function, as the name implies, is used to remove an attribute from an HTML Element.

link.removeAttribute('target')

# HTML Element Classes

On of the most common changes made to an HTML Element by JavaScript is adding, removing and toggling classes. Because this is so common, JavaScript has a special class object and a set of methods specifically for HTML Element class manipulations. Using the classList object of an HTML Element, we can add(), remove() and toggle() classes.

# Adding Classes

To add a class to an HTML Element, we can use the classList.add() function. It is possible to add more than one class at a time by separating them by a comma.

link.classList.add('btn', 'btn-primary')

# Removing Classes

To remove a class from an HTML Element, we can use the classList.remove() function. It is possible to remove more than one class at a time by separating them by a comma.

link.classList.remove('btn', 'btn-primary')

# Toggling Classes

To remove a class form an HTML Element if it is present or to add a class if it is not, we can use the classList.toggle() function. It is NOT possible to toggle more than one class with a single function call.

link.classList.toggle('active')