DEV Community: Jose Arteaga

Difference between HTMLCollection and NodeList

Jose Arteaga — Thu, 26 Mar 2020 20:40:08 +0000

These days that I have been working with javascript for DOM manipulation, I realized that I can bring a group of elements by its class name in two ways:

document.getElementsByClassName();
document.querySelectorAll();

However, none of them is better than another because they should be used according to the structure that we have in our HTML and our needs. But! it's important that we have to take into consideration the output of each of them and understand how they work.

Theory

According to MDN documentation:

getElementsByClassName() returns a live HTMLCollection representing an array-like object of all child elements which have all of the given class name(s).
querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

That being said, I questioned myself what the heck means a live HTMLCollection and a static NodeList? From there, let me explain to you in a better way this difference.

Hands-on

Let's consider the following HTML structure:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
  </head>
  <body>
    <ul id="list">
      <li class="item">First Item</li>
      <li class="item">Second Item</li>
      <li class="item">Third Item</li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>

Now, let's get the items by their class name item in the two ways mentioned above:

We can see that both brought all the elements that I needed with the class item. However, there is a big difference in the data structure they were returned.

Now, let's add a new <li> element to our list, and let's add some javascript code to our script.js file.



//get UL element
const list = document.getElementById('list');

//Get items by class name (two ways)
const itemsByClassName = document.getElementsByClassName('item');
const itemsByQuerySelector = document.querySelectorAll('.item');

console.log('First console log', itemsByClassName, itemsByQuerySelector);

//adding the fourth element
list.innerHTML += `<li class="item">Fourth Item</li>`;

console.log('Second console log', itemsByClassName, itemsByQuerySelector);

Let's see the results!

We can see that the new item was added to the list, though, the HTMLCollection was updated with the fourth item and the NodeList still has the first three elements, it didn't realize that there was a change in our list.

Therefore, this is the big reason why HTMLCollection is a live data structure and NodeList is a static data structure. At first hand the HTMLCollection updates itself automatically every time it detects a change in the items that were retrieved by the method. On the other hand, NodeList will remain the same since the moment we executed it no matter the changes that occur in our HTML.

Conclusion

To sum up, feel free to use them, but take into consideration this huge difference to decide which of them suits you better according to your needs.

For more information, check these resources out:

Thanks for reading!

CSS Units: REM or EM!?

Jose Arteaga — Thu, 19 Mar 2020 04:26:19 +0000

Are you struggling trying to understand what the heck is the difference between rem and em in your CSS files? Trying to guess which to use for font-sizes, margin and padding? I was in the same position, and throughout this article, I aim to help you understand each of them, their differences and my rule of thumb to apply them inside any web project.

Before we start, we should be aware of what kind of units are we going deal with, and for that, let's see the following groups of CSS units available:

CSS Length units group	Units
Absolute	px, pt, cm, mm, in, Q, pc
Relative	em, rem, vw, vh, vmin, vmax, ex, ch, lh
Percentages	%

As you may see, rem and em are relative units, and according to MDN documentation:

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport.

Let's get started!

Theory

em unit is relative to its parent, either the root element or any container; it depends where it's defined.
rem unit is relative only to the root element, no matter whether or not it has a different parent than the root.

The theory is important, however, let's see an example to clarify these meanings with the font-size property.

Hands-on

Note: By default, the browser font size is 16px.



<div class="em-container">
  <p>EM</p>
</div>
<div class="rem-container">
  <p>REM</p>
</div>



.em-container,
.rem-container {
  font-size: 32px;
}

.em-container p {
  font-size: 1em;
}

.rem-container p {
  font-size: 1rem;
}

Even though we have defined to each container a font-size of 32px, we can see different behaviours. em will always behave according to its parent, in this case, em-container, and rem always according to the root. Therefore, our values for each of them are the following:

1em = parent font-size (32px)

1rem = root font-size (16px, by default)

Cascading EM problem in font-size



<div class="em-container-1">
  <p>EM-1</p>
  <div class="em-container-2">
    <p>EM-2</p>
  </div>
</div>



.em-container-1 {
  font-size: 32px;
}

.em-container-2 {
  font-size: 64px;
}

.em-container-1 p,
.em-container-2 p {
  font-size: 1em;
}

Despite both <p> elements have a font-size of 1em, both behave completely different, no matter both have the same font-size. In this case we have the following font-size assigned:

.em-container-1 { font-size: 1em } = parent font-size: 32px

.em-container-2 { font-size: 1em } = parent font-size: 64px

If we are not aware of this cascading effect, we could have a frustrating day trying to understand why the font-size doesn't behave as we want.

My Rule of thumb

Having said that, as a rule of thumb I have decided to use each of these CSS units in the following way:

em units for margin and padding properties

rem units for font-size

I really hope this post had helped you to understand this difference, however, the best way to understand it is playing with the code and check the differences of behaviours.

Please let me know, according to your experience, how do you use these units.

Thanks for reading!

%, px, em, rem, viewport...How to know which one to use in CSS for responsive design?

Jose Arteaga — Mon, 25 Nov 2019 11:53:41 +0000

I've been working on the FreeCodeCamp Responsive Design projects, and there has been one thing that I've struggled a lot designing responsive websites, and it's understanding whether I have to use pixels, EM, REM, percentages, Viewport, etc. for font sizes, images, containers, and media queries.

Do you have any recommendations on how to get a better understanding of it and overcome it?

I'd appreciate your help!

Thanks!

Traditional Functions or Arrow Functions in Javascript?

Jose Arteaga — Wed, 30 Oct 2019 18:41:14 +0000

Recently, I started my Web Dev journey, and these days I have been reading about functions in Javascript. I've noticed that there are many ways to declare a function. Two of them caught my attention though, which are Traditional Functions and Arrow Functions.

I have read about them and in my understanding, I have to take into consideration the following:

Traditional Functions	Arrow Functions
No matter where you declare and call the function, Hoisting is the key.	The order matters. Declare it into a variable and then call it.
Once you declare it, you won't lose it.	The code seems cleaner than a traditional declaration.
	Once you override the variable where the function lives, it's over.

So, I would like to put on the table this topic in order to clarify my mind a little bit more about it, and comprehend the best use case for each of them.

Which one do you usually use when you code functions in Javascript?

DEV Community: Jose Arteaga

Difference between HTMLCollection and NodeList

Theory

Hands-on

Conclusion

CSS Units: REM or EM!?

Theory

Hands-on

Cascading EM problem in font-size

My Rule of thumb

em units for margin and padding properties

rem units for font-size

%, px, em, rem, viewport...How to know which one to use in CSS for responsive design?

Traditional Functions or Arrow Functions in Javascript?