Working with modern JS frameworks most of the time, most of us haven't had the need to work with the DOM directly. What even is the DOM? 🤷🏻♀️🤷🏽♂️
The DOM is the programming interface for communicating with your HTML document. In short it can edit your HTML's structure, content and style.
const myHtmlBody = document.querySelector('body'); // the variable now has a reference to our <body> tag
We are calling the
document object for the DOM. Every modern browser has this object directly accessible in its developer tools.
For accessing your elements you can call the following functions:
document.getElementById('customElementID'); document.getElementsByClassName('customCSSClass'); document.getElementsByTagName('tagnames like: 'a', 'div', 'span'');
Or the most universal ones; the
.querySelector() and the
document.querySelectorAll('any type of CSS selector') const divsWithClassMenu = document.querySelectorAll('div.menu') // ^ this returns an array of all the <div class="menu" /> elements present on the site const divWithClassMenu = document.querySelector('div.menu') // ^ this returns a single element, the first occurrence of the <div class="menu" /> elements present on the site
There are more functions for selecting elements, you can found them here.
Getting the content 📝
Now when we know how to select elements, we could work with their content. To do this we could use the
<div class="sentence">I'm just a simple div.</div>
const simpleDiv = document.querySelector('.sentence'); console.log(simpleDiv.innerText); // "I'm just a simple div."
.innerText isn't just a getter, but a setter as well. By rewriting its value you rewrite the element itself.
Changing looks 🎨
We have a few different ways to access and change our element's look. We could inspect and set the
.style attribute. As a getter it returns the whole inline style string of the element.
There is a possibility to look into the active classnames of the element through the
classname simple getter or the
classname getter returns the full class in a string. Most of the time we want to work with the separate classnames on a given element. To achieve this we can benefit from using the
classList attribute, which returns a 'quasi-array' of the separate classnames, and comes with its own functions to work with those classnames.
These include the functions:
document.getElementById('x').classList.contains('some-classname'); // ^ return `true` or `false` depending of the existence of such classname on the element document.getElementById('y').classList.add('a-new-classname'); // ^ adds the new classname document.getElementById('z').classList.remove('existing-classname'); // ^ removes the given classname
These provide a great way to replace some of your jQuery logic, if you're using jQuery.
Creating stuff 💡
With the help of the
document object we can create whole new elements for our web as well. For this we would use the function
const newSentence = document.createElement('div'); newSentence.innerText = 'It feels good to exist. But I want to be pink!' newSentence.style = 'color: pink;'
But this element is not yet visible. Why? Because it wasn't actually added to the DOM. We can add it by calling the
appendChild() function on an already mounted element. The next example does this on the button click.
Sometimes we use over-engineered solutions for small problems. With these examples I wanted to showcase that even simple DOM operations can change how your web looks, behaves. There is no need to import a heavy dependency for every small task. Sometimes a nice mixture of simple DOM functions will do the trick. There is much more into it, I know. But that's for next time. Give me your thoughts. What's your most-used low-level DOM function?