The DOM, Part II




In this second lesson I want to deep down on the DOM concepts of the previous lesson, and give some practical guidance over common operations you might want to perform in plain JavaScript without needing to use a higher level framework like React, Vue or Angular, or even a library like jQuery.

jQuery in the past was very, very popular because it helped us with the differences between browsers. There were lots of inconsistencies we had to worry about. In recent years, some of the features introduced by jQuery were added to the DOM. Like the Selectors API.

We’ll see these practical ways to interact with the DOM:

Add a class to a DOM element

When you have a DOM element reference you can add a new class to it by using the add method:

element.classList.add('myclass')

You can remove a class using the remove method:

element.classList.remove('myclass')

Implementation detail: classList is not an array, but rather it is a collection of type DOMTokenList.

You can’t directly edit classList because it’s a read-only property. You can however use its methods to change the element classes.

Change a DOM node value

Given a DOM element, how do you change its value?

Change the value of the innerText property:

element.innerText = 'x'

To lookup the element, combine it with the querySelector():

document.querySelector('#today .total')

Check if a DOM element has a class

How do you check if a particular DOM element you have the reference of, has a class?

Use the contains method provided by the classList object, which is:

element.classList.contains('myclass')

Technically, classList is an object that satisfies the DOMTokenList interface, which means it implements its methods and properties.

You can see its details on the DOMTokenList MDN page.

Hide a DOM element

How do you hide a DOM element using plain JavaScript?

Every element exposes a style property which you can use to alter the CSS styling properties.

You can set the display property to ‘none’ (like you would do in CSS, display: none;):

element.style.display = 'none'

To display it again, set it back to block or inline:

element.style.display = 'block'

Replace a DOM element

Given a DOM element, how do you replace it with another?

Say you have a DOM element, which you have a reference to (maybe retrieved using querySelector()).

To replace it with another DOM element, you can call the replaceWith() method on the first element, passing the second element as argument:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.replaceWith(el2)

Since Edge <17 and IE11 do not support it, you should transpile it to ES5 using Babel if you plan to support those browsers.

Another solution is to lookup the parent and use the replaceChild() method, which is much older and supported by all browsers:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.parentNode.replaceChild(el2, el1)

Style DOM elements by changing CSS inline properties

You might have the need to dynamically apply CSS properties to DOM elements.

You can directly change each CSS property of an element by using the style property, which references the element inline styles.

For example you can change an element color using

element.style.color = '#fff'

You can alter the border:

element.style.border = '1px solid black'

You saw color and border. You can change all the CSS properties, by using camelCase instead of dashes when the CSS property name contains them.

A translation table is conveniently listed in this MDN page.

Loop over DOM elements from querySelectorAll

The querySelectorAll() method run on document returns a list of DOM elements that satisfy the selectors query.

It returns a list of elements, which is not an array but a NodeList object.

The easiest way to loop over the results is to use the for..of loop:

for (const item of document.querySelectorAll('.buttons')) {
  //...do something
}

Remove an HTML class from a DOM element

When you have a DOM element reference you can remove a class using the remove method:

element.classList.remove('myclass')

You can add a new class to it by using the add method:

element.classList.add('myclass')

Implementation detail: classList is not an array, but rather it is a collection of type DOMTokenList.

You can’t directly edit classList because it’s a read-only property. You can however use its methods to change the element classes.