Difference Between classList and className

Mahabubur Rahman — Sun, 06 Dec 2020 10:26:15 +0000

We use classList and className on JavaScript DOM to manipulate classes from the element. These two DOM property has different use cases. Let's see what is the main difference between them.

classList

Using classList, you can add or remove a class without affecting any other classes the element may have.
So this is helpful for adding additional classes to an element that contain other classes.
classList has some handy methods like toggle and replace.

if (clicked) {
    button.classList.add('clicked');
} else {
    button.classList.remove('clicked');
}

Here if the button was clicked it will add the clicked class along with other classes the element may have and it will remove only the clicked class from the element.

className

If you use className, it will wipe out any existing classes while adding the new one (or if you assign an empty string it will wipe out all of them).
Using className can be a convenience when you know this element will not use any other classes.

if (clicked) {
    button.className = 'clicked';
} else {
    button.className = '';
}

In this case, className will wipe all the classes the element may have and add clicked class to it. The empty string('') will wipe all the classes.

Conclusion

My recommendation would be to use className whenever possible.
Use classList when you need classList methods like toggle, replace, etc.

Shortcuts For Command-Line Ninjas

Mahabubur Rahman — Sat, 05 Dec 2020 12:55:06 +0000

Nowadays, I spend more time in the Terminal. I'm learning some useful shortcuts to get things done faster. Here are some of those shortcuts.

Navigation

Ctrl + a => Go to the beginning of a line.

Ctrl + e => Go to the end of a line.

Alt + b => Move backward one word.

Alt + f => Move forward one word.

Cutting & Pasting

Ctrl + k => Delete all after the cursor.

Ctrl + u => Delete all before the cursor.

Ctrl + w => Delete one word before the cursor.

Ctrl + y => Paste deleted caracters.

(tips: use Alt + b to move anywhere you want and use Ctrl + k to delete all words after the cursor.)

Others

!! => Repeats the last command.

Ctrl + h => If you don't want to use the BACKSPACE key.

Ctrl + j => If you don't want to use the ENTER/RETURN key.

Alt + u => Capitalize all characters in a word after the cursor.

Alt + l => Uncaptalize all characters in a word after the cursor.

Ctrl + l => Clears the screen and redisplay the line.

history => To see the past command you used. To use those command type ! before the command number.

(tips: use Alt + b and Alt + u to Capitalize a word before the cursor. The same goes for Alt + l)

DEV Community: Mahabubur Rahman