DOM Manipulation
The DOM is like kinda like the world and just like the world, the DOM is always changing. In this blog, I’m going to go over a few things like what the DOM is and a few of the many ways you can manipulate the DOM. So let's get started by going over what the DOM.
What is DOM?
Well to start DOM stands for (D)document (O)object (M)model. Now that we know what DOM stands for let us talk about what it is. Most people think the HTML we write is the DOM and in a way they're right. The DOM is just an HTML file we wrote parsed by a browser and turned in to the DOM. Now when you open your browser’s dev tools and you see what seems to be HTML that’s the DOM. Another thing to note the DOM can be changed or manipulated but this won’t have an effect on the original HTML. But if the HTML is changed this is reflected on the DOM. I think the next steps is to talk about navigating and manipulating the DOM.
Navigating the DOM
Before we can start manipulating the DOM we need to know how some of the ways to get around first. In my experience, there are two key parts of getting around the DOM fast and clean. The first thing is having great element/node attributes or identifiers. These being classes, ids, data-sets, etc.. The second thing is our selectors. The reason the attributes and identifiers are so important is that when you go use your selectors you can get supper accurate on the node you are choosing. As for the selectors, these are important because you can target the attributes we just talked about. Here are some of the selectors I use the most:
- document.querySelector() — finds the first element with the class, tag, id that you put in.
- document.querySelectorAll() — finds all the elements with that class or tag
- document.getElementById() — finds the element with that tag
- document.getElementsByClassName() — finds and returns a HTMLcollection of all the elements with this class name
- document.getElementsByTagName() — finds and returns a HTMLcollection of all the elements with this tag name
Ways to manipulate the DOM
So we've mentioned manipulating, changing, and editing the DOM earlier. Now let’s go over a few ways we can actually go about doing that. You can change the DOM by adding, removing, replacing, elements/nodes. DOM elements can also have their attributes edited here you could add more identifiers for easy access later on or even change some simple styling. There are also functions that let you change the content/values of elements. Here are some functions you can use to alter the DOM.
- document.createElement() — lets the user create a new element.
- element.appendChild() — take is an argument and added it to an element.
- document.dataset.x = x — lets you add a data set an attribute to your element.
- element.innerText = “something” — This lets you edit the text within an HTML file.
This briefly covers the DOM Document, Object, Models. This is a very developed concept that is widely used — you can find more in-depth information in the articles I linked below. This is nowhere near all of the information on DOM. That being said This should be a nice little starting place for anyone new to the DOM. I hope you learn something from my Blog have a good day.
Links I used
