What is the Javascript DOM?

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.

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.

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.

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

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.

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. 

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.

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.