Skip to main content
X

Explore your training options in 10 minutes

What is the Javascript DOM?

Kelly M. - January 04, 2021


The JavaScript Document Object Model (DOM) is a representation of the HTML elements of a webpage. It is an interface we can use to manipulate a web page by changing its content or style.

We can access the DOM by right clicking on a webpage and selecting ‘inspect’. By doing this, a section should appear (either on the right or left) with the HTML elements of the webpage you are currently on. By hovering over these elements, you can tell what sections of the page are being represented by them as sections of the page itself become highlighted.

We can manipulate the pages content or styling by coding in the console.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

The DOM itself is a tree data structure with parent and nested children elements. Elements without children are called ‘leaves’. While inspecting a page, you can see our head node element of our tree is the document, then our html tag, then our head tag, which contains scripts and our title, branching off as a single tree. We can also see our body tag, which is separate from the head tag and branches off into a different tree carrying a different element. Below is an example of the elements used to represent Career Karma’s home page.

screenshot-of-career-karma-honepage-with-HTML-elements-displayed

Notice how the right section of the homepage gets highlighted when hovering on a particular div element child of the body tag. In this article, we discuss ways to select elements in the DOM in order to be able to manipulate it in the future.

Selecting Elements in the DOM

There are two ways to select elements in the DOM. One is by using the getElements methods, the other is by using the querySelector methods.

getElement Methods

The getElement methods take a single string argument of either a tag name, class name, or id. Tag and class name will return an array-like object called an HTML collection which states how many times the element you are looking for occurs on the page.

document.getElementsByTagName(‘p’) : Notice that there are seven p tags currently on Career Karma’s homepage.

 screenshot-of-career-karma-homepage-with-code-in-console

document.getElementsByClassName(‘hzjqne’) : This will return the HTML collection containing all of the elements with the given class.

 screenshot-of-career-karma-homepage-with-code-in-console

document.getElementById(‘__NEXT_DATA__’) : Getting an element by id will return the matching element in the console. Because id names should be unique, they should not return a collection of anything.

 screenshot-of-career-karma-homepage-with-code-in-console

querySelector Methods

When using query selector methods, we have to remember to include the dot before the class name and the hash symbol before the id name to find or select what we are looking for. This is the most common mistake when using querySelector() or the querySelectorAll() methods.

 screenshot-of-career-karma-homepage-with-code-in-console
 screenshot-of-career-karma-homepage-with-code-in-console

Notice in the screen shots above, we received the element that held the class or the id.

Another difference is when using querySelectorAll() instead of an HTML collection, we receive in return something called a node list, which is also an array-like object.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

 screenshot-of-career-karma-homepage-with-code-in-console

The difference between an HTML collection and a node list is that we can use the .forEach() method on a node list. We cannot do this with an HTML collection if we were trying to manipulate the DOM. However, JavaScript does have a method we can use to create an array from an array-like object like an HTML collection or a node list. That method is .from() , and it is from the Array class. Array.from(arrayLikeObject)

Note that we can select all elements with querySelectors that we can with the getMethods() .

Conclusion

The DOM is a powerful interface that represents the HTML of a webpage. It has a tree structure which we can see when we inspect the page. We can utilize methods like querySelector() or the getMethods in order to be able to manipulate what we see with JavaScript.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Kelly M.

About the author: Kelly is a technical writer at Career Karma, where she writes tutorials on a variety of topics. She attended the University of Central Florida, earning a BS in Business Administration. Shortly after, she attended Lambda School, specializing in full stack web development and computer science. Before joining Career Karma in September 2020, Kelly worked as a Developer Advocate at Dwolla and as a team lead at Lambda School. Her technical writing can be found on Codecademy, gitConnected, and JavaScript in Plain English.

Skip to main content