DOM is one of the most important concepts for web developers. As a web developer, if you want to create a dynamic web page, you’ll have to do that through DOM.
In this article, I’ll show what dom is and how to manipulate a web page with DOM.
Prerequisite
I assume you know the fundamentals of JavaScript. If you don’t know the fundamentals yet, don’t worry. I wrote an article that covers all the JS fundamental topics. You can read it here.
So, without any delay, let's get started.
What is DOM?
DOM stands for Document Object Model.
Here’s what MDN says about DOM.
The Document Object Model (DOM) is a programming interface for web documents . It represents the page so that programs can change the document structure, style, and content.
By manipulating the DOM with JavaScript you can add interactivity to the web page.
Let’s look at how you can manipulate the web page with DOM.
Selecting Single Element with DOM
To manipulate a web page first you need to access its elements. With DOM you can access a single element in many ways. Here are a few:
- getElementById(”elements-id”)
- querySelector(”element name or class, or id”)
//get element by ID
const element = document.getElementById("intro");
//Get element with querySelector
const elementQuery = document.querySelector("intro");
Selecting multiple elements with DOM
When working with DOM sometimes you’ll need to select multiple elements at once. There are quite a few ways to get multiple elements at once.
Like:
- getElementsByClassName(”Id”);
- querySelectorAll(”intro”)
//get all elements by class names
const element = document.getElementsByClassName("intro");
//Get all elements with querySelector
const elementQuery = document.querySelector("intro");
Styling an Element with DOM
Now that, you know how to select single element and multiple elements.
Let's add some style to the element you selected.
You can add styling to your element with the .style property and the CSS property you want to add or change.
Here’s an example.
const body = document.quearySelector("body");
body.style.color = "red";
Adding Events with addEventListener
Before we add events to elements, first you need to understand what an event is?
Events are some kind of action that happens when the user or browser does something.
Here are a few examples of events:
- Browser load the website
- User changes an input field
- User clicked on a button
- User hovers over an element.
One of the most used events is the OnClick event. Which is added for the click event of an element.
here's an example of a click event.
const btn = document.querySelector(".btn");
btn.addEventLister("click", function() {
console.log("The button was clicked");
})
To add the event, first, you’ll need to grab the element with any DOM selector.
Then you’ll have to add .addEventListener("event", eventHandlerFunction) method to that element.
As you can see addEventLister method takes 2 arguments, one is the event and the other one is the event handler function.
The event handler function determines what will happen when the event occurs.
In our example above, when you clicked the button it will console.log "The button was clicked" string.
Conclusion.
In this article, we discussed what DOM is and how to query HTML elements with DOM, and finally how to add EventLIstenter to them.
Thanks for reading till the end. If you enjoyed this article you might enjoy my other content too.
Follow me on Twitter @coderamrin to see all my stuff.