The DOM is basically a developer’s magic playground where we can play around with all of the information in our html and make it more dynamic using something interactive like Javascript. You locate the DOM by opening up the developer tools. While on a website, simply right click and select the inspect button. That will pull up the DevTools. Here, you have access to layers upon layers of elements to play around with.
We’ll start by saying the browser itself is the window. However, it is smart enough to know that so we can start with the document object and call methods on that. Otherwise you could locate elements by typing “window.document.method.method.method… etc.” However we’ll just start with the document object as being the entire page of which you are inspecting. I would suggest opening up all the arrows to physically be able to see all of the nested elements to make it easier for yourself.
There are many methods you can use here but I will use the getElementById() function to keep it simple. This function accepts one argument. In your HTML you are going to give your tags id labels so you can manipulate individual pieces of information. Let’s say I want to be able to add an event listener to an element to be able to click on a name and see someones bio. The name maybe would be in an <h2> tag. So you will assign it to <h2 id=”person”>, and then you can create a variable using let or const depending on your application to say that “let name = document.getElementById(“person”)” and that will allow you to now play around with the variable ‘name’. You can then go on to say “name.addEventListener(‘click’, myFunction()), and define a function below. You would probably have your function console.log(“person’s bio”), or really do anything there are so many functions to play with! You can add text, or create forms, just get creative with the interactions and explore all the different options in the DOM!
