Document Object Model (DOM) Introduction – Provart Lab (BAR) Undergrads

What is the DOM?

Introduction

The Document Object Model (DOM) is an interface for HTML elements which represents its elements as nodes which has objects in a tree-like fashion which can be modified in a scripting fashion by JS. The HTML DOM API adds functionality for manipulating HTML elements and advanced features like web workers.

The tree root always begins at the window, where the document object is then loaded under (when the document is loaded into the window [think your browser window]). Your html elements are then loaded under the document in the HTML structure you wrote.

Try using document.body right now on a web page (via your console) and see what prints out!

An html document represented in DOM form. Source

You should get something that looks like this:

<body> .... LOTS OF STUFF </body>

This is a DOM node. It is an object and as such has specific object properties to traverse its sisters/children and modify its contents.

Some terminology: Elements which are nested within another one are called descendants. Direct descendants are called children. Siblings are nodes which are at the same nested level, i.e. share the same direct parent.

One can traverse a DOM tree node via established object properties Source

Try out some of the above or these methods and see what you can access on your HTML web page of choice.

Note: The childNodes property may seem to return an array but it is actually a collection. To loop through it we need to use a for... of loop as it does not contain the native array properties. You should still be able to use the [] syntax to access its elements though.

Exercise: Given the below HTML structure. Just from the document.body, how do we access the <p> tag?

<body>
  <div>Hi!</div>
  <p>
    Example text
  </p>
  <div>End!</div>
</body>

Accessing elements directly

Instead of traversing the tree and finding the desired element, we may access elements direct via their id attribute . In fact this is a very common technique.

The most common method is to use the document.getElementById('YOURID'). You can also try the document.querySelectorAll('yourCSSSelector') which uses a CSS selector. You can also access collections from methods such as document.getElementsByClassName which return live collections which means it auto-updates as the DOM gets manipulated.

Now that we have a desired element, we can perform operations on it such as changing its styling and/or setting text!

Probably the most common thing you will see in vanilla JS is to add callback functions (handlers) to a node when an event such as a click is fired.

document.getElementById('myID').addEventListener('click', function(){console.log('clicked')})

Once we get an node, we can get its and modify its text via the innerHTML property.

Exercise: Find a node with an ID and change its text.

We can also change the styling of a DOM node directly instead of using CSS. Think about the implications now that we can intertwine javascript with CSS! Although the better pattern is to add and remove classes to a DOM node, there may be edge cases where you want to set styling direct and manually.

Exercise: Find out how to style a node. Then learn how to add and remove classes from a node.

Conclusion

There are many other node properties you can find here in addition to many other DOM concepts. But in general this tutorial was more a conceptual exercise for you to understand how the browser loads a HTML document and how front-end libraries use these base methods to access & manipulate nodes. For example, you may realize how long-winded it is to access an element. Thus libraries such as jQuery ( $('#myDiv) versus document.getElementById('myDiv') ) have been invented to easier DOM manipulation.