DOM (Document Object Model) is the way web browsers represent and manipulate web pages. The DOM is an object-oriented representation of a web page in JavaScript, and it enables access to and manipulation of a web page's elements, attributes, and styles. Every time a web page is loaded in the browser, the browser parses the HTML to create a hierarchical tree-like structure. Elements of this web page are represented as items in this tree. These items can be accessed, modified, and manipulated by the DOM in JavaScript.
DOM can be used in HTML documents to:
- change contents of HTML elements
- change the CSS styles of HTML elements
- add and delete HTML elements (class names)
- create new HTML elements in the web page
In this article, we'll learn how to use the HTML DOM to add and remove class names with JavaScript.
Using querySelector
The querySelector method is used to select the first element that matches a CSS selector. You can use the following code, for instance, to select an element with a particular ID of container.
1 |
const mainElement = document.querySelector('#container'); |
With querySelector, you can also select elements based on their class or tag names. For instance, you can use the following code to select all div elements that have a class name of contents:
1 |
const theContent = document.querySelectorAll('div.contents'); |
The sample code snippets above each return a NodeList object which can be used to modify or manipulate the elements that have been selected.
Adding a Class Name
There's something called the add method in the classList property. This can be used to add a class name to an element. If, for instance, you want to add a class name firstClass to an element that has the id firstID, you can use this code:
1 |
const myElement = document.querySelector('#firstId'); |
2 |
myElement.classList.add('firstClass'); |
Removing a Class Name
Just like the add method, there's also a method from the classList property that can be used to remove a class name from an element. It's the remove method. If, for instance, you want to remove the class name firstClass that was added to an element, you can use this code:
1 |
const myElement = document.querySelector('#firstId'); |
2 |
myElement.classList.remove('firstClass'); |
Example of Adding and Removing Class Names With querySelector
This is a mini-project that demonstrates using querySelector to add and remove element class names.
In the above example, we start by using querySelector to get references to the textHead element and the two buttons (addButton and removeButton). Then, we add event listeners to the buttons so that when they are clicked, they will use the classList.add and classList.remove methods to either add or remove the style class from the textHead element.
When the style class is added to the textHead element by clicking the Add Class button, it will change the color of the element to green and give it a padding of 10 px, since you have defined a CSS class with these properties. When the style class is removed by clicking the Remove Class button, the color of the text will return to its original value and the padding will be removed.
Example of Adding and Deleting Elements Using querySelector
Let's look at a more advanced project to demonstrate how this concept is applied in the real world. We'll be using HTML, CSS, and JavaScript to build a simple to-do list application where users can add and remove to-dos.
Users can add tasks to this project's to-do list by entering them in the input field and clicking the Add To-do button. When a task is added, it appears in the task list as a list item. There will be a Delete button next to each task item so users can take it off the list. Users can click on each item, and this draws a line through the item to indicate that a task has been completed.
This project uses querySelector a few times: to find the input field, to find the Add To-do button, and to find the container div for the list of tasks.
1 |
const newTaskInput = document.querySelector('#new-task'); |
2 |
const addTaskButton = document.querySelector('#add-task'); |
3 |
const taskList = document.querySelector('#task-list'); |
Later on, we use these elements in various ways. We add an event listener to the button:
1 |
addTaskButton.addEventListener('click', addTask); |
Then, when that button is clicked, we get the value of the new task input field and add a new element to the task list.
1 |
function addTask() { |
2 |
|
3 |
//get the value of the input field
|
4 |
const newTask = newTaskInput.value; |
5 |
|
6 |
//if the new task string is not empty
|
7 |
if (newTask) { |
8 |
|
9 |
//create a new list element
|
10 |
const li = document.createElement('li'); |
11 |
|
12 |
//give it the string value from the new task input
|
13 |
li.textContent = newTask; |
14 |
|
15 |
//append it to the task list
|
16 |
taskList.appendChild(li); |
17 |
|
18 |
//and clear the new task input field
|
19 |
newTaskInput.value = ''; |
20 |
|
21 |
//...
|
Practice Projects to Learn querySelector
There are a lot of ways this method can be applied when building web applications. Below are a few examples that I recommend working on to practice this concept more:
Responsive Navigation Menu
You can use the querySelector method to select a button or icon element and add an event listener to it. This will toggle the display of the navigation menu when a user clicks the button or icon.
Validating User Form Input
Use the querySelector method to select form elements and validate the user's input before the form is submitted.
Creating Animations and Effects
Use querySelector to select elements and apply CSS transitions or animations to be able to create scroll animations, fade-in effects, or toggle animations.
Conclusion
In this article, we studied how to select elements, change elements, and add or remove class names from elements using the querySelector method. You should now be able to use this method accurately. Try implementing the practice projects to further solidify your knowledge of this concept.
