Dev.to

Playing with The DOM

A couple months ago I decided to jump into the tech world by enrolling in a bootcamp. It's been an interesting journey, from starting with the classic "Hello, World!" to building a small project. I'm currently learning JavaScript, and even though it has been a roller coaster of emotions I'm enjoying the process. As my assessment for my final phase approaches, I'm building an app to showcase everything I've learned. One topic I've really enjoyed working with is manipulating the DOM. What's the DOM? Document Object Model (DOM) is the way your browser turns HTML into something JavaScript can understand and manipulate. when a website loads, takes the HTML and turns it into the DOM making it possible to find elements, modify text and add or removes elements. In my short time working with the DOM I've had a lot of fun specially using methods to find elements like getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() and querySelectorAll(). getElementById() Let's start with one of my favorites methods. This one allows you to quickly access an element by introducing its id and just returns one element at the time due that ids are expected to be unique. Here is an example of its implementation in my current project: const search = document.getElementById('search-input'); getElementsByClassName() This method returns all elements with a given class name in the form of an HTMLCollection (which is similar to an array). You can loop through them and manipulate each one. Hello! Sup? Tinier heading document.getElementsByClassName('banner'); getElementsByTagName() If you don't know the ID or class of an element but know the tag, this method it's perfect because by using the tag it gives you an HTMLCollection of it. This is paragraph 1. This is paragraph 2. This is paragraph 3. const paragraphs = document.getElementsByTagName("p"); for (let i = 0; i { item.textContent = `Updated Item ${index + 1}`; }); .textContent vs .innerHTML I've also been using properties like .textContent and .innerHTML, and I've learned when to use each one. With .textContent, you can set plain text while ignoring any HTML tags. With .innerHTML, you can set or return the HTML content inside an element, allowing you to replace or add HTML tags and structure. However, when using .innerHTML, you're essentially rebuilding the element, which can sometimes remove IDs, classes, and other attributes. If you're working with a database or accepting user input, this can lead to cross-site scripting (XSS)—a type of security vulnerability where malicious HTML can be injected. In that regard, .textContent is the safer option. const renderMovies = (movieArray) =>{ const movieList = document.getElementById('movie-list'); movieList.innerHTML = ""; movieArray.forEach(movie =>{ movieList.innerHTML +=` ${movie.title} (${movie.year}) Genre: ${movie.genre} Add to Watchlist ` }) h1.textContent = "Hello, world!"; Creating and Appending Elements with createElement() Another cool method I've started using is document.createElement(). This lets me build elements completely from scratch in JavaScript. Instead of using innerHTML, I can create an element, set its content or attributes, and then add it to the page using .appendChild() or .append(). Here's a simple example: const selectedMovie = allMovies.find(movie => movie.id == movieId) const block = document.createElement('div'); block.id = `watchlist-item-${movieId}` block.innerHTML = ` ${selectedMovie.title} Remove ` console.log(selectedMovie.title); document.getElementById('watchlist').appendChild(block) }; }); Using createElement() is cleaner and often reduces the risk of accidentally removing other elements or opening up security issues like cross-site scripting. JavaScript Events When working with the DOM, one of the coolest things is making elements respond to user actions like getting a button to do something when it's clicked. With JavaScript, we have the ability to listen for events that happen in the browser and run code in response. This makes our pages more interactive and dynamic. These events can include things like clicking a button, submitting a form, moving the mouse, or even pressing a key. Common Event Listeners -Click Used when you want something to happen when the user clicks a button or element. document.getElementById('watchlist').addEventListener('click', (e) => { if(e.target.classList.contains('remove-watchlist-btn')) { e.target.closest('div').remove(); } }) -S

Mar 31, 2025 - 02:40
 0
Playing with The DOM

A couple months ago I decided to jump into the tech world by enrolling in a bootcamp. It's been an interesting journey, from starting with the classic "Hello, World!" to building a small project. I'm currently learning JavaScript, and even though it has been a roller coaster of emotions I'm enjoying the process.
As my assessment for my final phase approaches, I'm building an app to showcase everything I've learned. One topic I've really enjoyed working with is manipulating the DOM.

What's the DOM?

Document Object Model (DOM) is the way your browser turns HTML into something JavaScript can understand and manipulate.

when a website loads, takes the HTML and turns it into the DOM making it possible to find elements, modify text and add or removes elements. In my short time working with the DOM I've had a lot of fun specially using methods to find elements like getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() and querySelectorAll().

getElementById()

Let's start with one of my favorites methods. This one allows you to quickly access an element by introducing its id and just returns one element at the time due that ids are expected to be unique. Here is an example of its implementation in my current project:

const search = document.getElementById('search-input');

getElementsByClassName()

This method returns all elements with a given class name in the form of an HTMLCollection (which is similar to an array). You can loop through them and manipulate each one.


   class="banner">
    
Hello!

  

   class="banner">
    
Sup?
class="banner">
Tinier heading