HTML magic through DOM functions
Tags: html, javascript, beginners, basics
Published: 2020-03-23 21:00:12

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.

```javascript
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:
```javascript
document.getElementById('customElementID');
document.getElementsByClassName('customCSSClass');
document.getElementsByTagName('tagnames like: 'a', 'div', 'span'');
```
Or the most universal ones; the `.querySelector()` and the `.querySelectorAll()`
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction).

<h2>Getting the content 📝</h2>

Now when we know how to select elements, we could work with their content. To do this we could use the `.innerText` value. 

```html
<div class="sentence">I'm just a simple div.</div>
```
```javascript
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.
{% codepen https://codepen.io/garysiladi/pen/PoqyYPp %}

<h2>Changing looks 🎨</h2>

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.
{% codepen https://codepen.io/garysiladi/pen/LYVgYGL %}
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:
```javascript
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.
 
<h2>Creating stuff 💡</h2>

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()`:
```javascript
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.
{% codepen https://codepen.io/garysiladi/pen/mdJzdwj %}

<h2>Some thoughts</h2>

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?