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.
How do we communicate with this interface? Through JS. It is written in Javascript. Every element on your web can be accessed through the DOM.
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 .querySelectorAll()
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 .innerText value.
<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."
The .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 classList attribute.
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 createElement():
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.
Some thoughts
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?
Top comments (0)