Introduction
The step from creating static sites to making dynamic sites is a big deal when learning how to be a frontend dev! A static site website is a hardcoded site that loads the same information for any user while a dynamic site constructs itself on the request of the user. While sometimes it is preferable to create static sites depending on the app or content you want to create, I have found that using dynamic methods makes your website much more interactive and entertaining. In my experience and learning, using DOM manipulation is the first start in making a dynamic site!
What is the DOM?
In a nutshell, the Document Object Model (DOM) is like an artist painting on an empty canvas. He/she can choose to add items, remove items, or alter items on his/her canvas to create a mastapiece!
Going back to technical terms, the DOM is an object that just represents the webpage you are creating and can be called using dot-notation to alter the website's content of your choosing. Using the DOM is a great what to make your site dynamic by allowing the content of the page to be different depending on what the user is wanting to do. I also find it an easier method to create content from arrays and objects. Of course, there is a lot more to it than my cheesy simile but I find it helpful to break down these concepts into something realistic. While it may sound intimidating, it is quite simple to understand and use once you get the hang of the logic behind it.
How do you use the DOM?
To use the DOM, you first need to select a piece of the document which you are wanting to use. For example, if you want to grab an input field you can do one of these options.
const button = document.querySelector('button')
const userInput = document.getElementById('user-input')
In the code above, I have selected a button through a querySelector and I have selected an input that I have given the ID of 'user-input'. Once you have selected your elements through your chosen method you know are able to modify aspects of that element. For example:
button.textContent = 'Press Me'
By selecting the button I am now able to modify its textContent and any of its other properties through JS! This is really useful when you want to create and modify content based on the user's input. Now, this is a bare-bones example of how to use the DOM but in the example below I will demonstrate and explain how I use the DOM throughout my projects.
example code and how I use the DOM.
The code below is an example of how I would use DOM manipulation to create a very simple app where people could type a story together and have it shown on the document.
- Set up the HTML doc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- input element -->
<input type="text">
<!-- button element -->
<button>submit</button>
<!-- element where we are going to push content into -->
<section id="story"></section>
<script src="app.js"></script>
</body>
</html>
- Write the JS
// create an empty array to push items into
const story = [];
// target input and button fields
const input = document.querySelector('input');
// *remember the variables above are targeting the input and the butt elements
const submit = document.querySelector('button');
// target the story element
// make a function that pushes the input value and renders on the DOM
const storyEl = document.querySelector('#story');
const render = (arr) => {
// create a div for the item in the arr
const div = document.createElement('div');
// append div inside the story element
storyEl.append(div);
// create a p to append into the div
const p = document.createElement('p');
// set the textContext of the p element to the items into the array
p.textContent = arr[arr.length - 1];
// append into the div
div.append(p);
};
// add a click listener event for the button
submit.addEventListener('click', () => {
// push the value of the input into the array
story.push(input.value);
console.log(story);
// reset the input value
input.value = '';
// render is on the DOM
});
Conclusion
I hope this post was able to help or teach you a little bit about DOM manipulation. These examples and tips are just the very basics of some of the things you can do with the DOM. It is also possible to change elements classes, id, and CSS properties inside the DOM. Understanding how to use it is a powerful tool for any web dev. If there is anything I missed or want to know more comment below and feel free to contact me!