Manipulating the DOM

#beginners #codenewbie #javascript

When it comes to programming, it is very easy to be intimidated. After all, starting anything with no prior knowledge is quite intimidating. Not to worry, after this post, you will have some knowledge on what it takes to become a programmer.

What are we doing?

Before we get into any actual coding, it is important to know what we will be doing. What we're going to be doing today is manipulating the Document Object Model (DOM) of a wikipedia website. What exactly is the DOM? The DOM is the data being presented on your screen. This very second, the DOM of this website is displaying my blog post which is what you're reading. When I say we are going to be "manipulating the DOM," what I mean is we are going to be changing the data being represented on the website.

Opening Developer Tools

Now that we have an understanding of what we are going to be doing, go ahead and open a wikipedia website in google chrome of your favorite historical figure. Once the site is loaded, right click anywhere on the page, and click on the "Inspect" button. Once clicked, you should have access to the Developer Tools on the right-hand side of the screen. As you hover over the different lines of code, you can see different parts of the page being highlighted. As you may assume, the line of code you hover over correlates to the highlighted part of the page. Go ahead and find the line of code that highlights the main content of the page. It will look something like this:

Finding Header Element

Once you found the line of code, press the triangle on the left side of that line. This will collapse the code to expose the underlying code. One more line of code will appear, go ahead and collapse the underlying code in that line as well. Keep repeating the process of finding the line of code that highlights the title until there are no more collapsible code lines. In the example I have provided, I will keep doing this until I see that "Abraham Lincoln" is highlighted. The line of code for my Abraham Lincoln page looks like this:

<span class="mw-page-title-main">Abraham Lincoln</span>

Your line of code should look very similar to this other than the class name, and text content being different. Now that we know what line of code is responsible for creating our title, we can get to the manipulation aspect of this process.

Manipulating the DOM

Now that we have the element we want to manipulate, we can go ahead and go into the console. At the top of the of the developer tools, there should be an option that says "Console". Once clicked, we can start using javascript to change the header of this page. In the console, for the website I'm using, we are going to type this line of code:

const header = document.getElementsByClassName('mw-page-title-main')

What this line is saying is we are going to be looking in the document, for elements with the Class "mw-page-title-main" and storing it into a variable called "header". In your website, the class name is going to be different than mine. Whatever the class name is in your span code line, go ahead and type that in here.

There are various ways to retrieve this element which I will cover briefly later on. For now, this is the easiest way to do this task. Notice how the line states "getElements". This indicates that there will be more than one element being selected. The variable "header" will be stored with every element in the document that has this specific class name. Moving forward, we will write this code in the console:

header[0].textContent = "I'm a Programmer!"

Now remember, the header variable is stored with every element in the document with the class name "mw-page-title-main". We only want the first element in this list, which is why we put the 0 in the brackets. Then we are changing its text content with "I'm a Programmer!". After running this code, you should see "I'm a Programmer!" as the title of the page. You can go ahead and try changing its text content with whatever you like.

Congratulations!

Congrats, you are now a programmer. You have officially manipulated the DOM using javascript. As mentioned earlier, there are various ways to retrieve elements from the DOM. Javascript provides us with 6 different methods to retrieve elements from the DOM. These methods include:

getElementsByClassName (the one we used)
getElementsByName
getElementsByTagName
getElementById
querySelector
querySelectorAll

Using these 6 different methods, we can retrieve any specific, or range of elements we want from the DOM. I will go ahead and save that for a different blog post. Feel free to do any research to try and use these different methods yourself. However, now that you know the general gist of: how to grab a certain element from the DOM, store it into a variable, and change its content, go ahead and try to change any little thing you want on any website. Congratulations, you know have a taste of what it takes to become a programmer. Have fun out there changing every website you come across!