Class Days
23 Dom

Class 23: Document Object Model (DOM)

Instructions

  • Please review all of the lecture material placed below and try things out yourself as you go along, creating new files like we do in the lecture (which you can put into a folder called lecture)
  • Finish JavaScript HTML DOM (opens in a new tab). You should try all the examples and finish all the exercises.

DOM and Javascript

Here's our first video (opens in a new tab) which explains the DOM and how its used in Javascript.

The DOM (opens in a new tab) stands for Document Object Model (opens in a new tab) and it presents a way for us to access elements of an HTML page so that we can then modify or access those elements in Javascript. This is useful, because then we can follow the ideals of unobtrusive Javascript (opens in a new tab) and keep Javascript interactions out of HTML page content. This approach also helps in keeping a web page as similar as possible if a user does not have javascript turned on. Similar to its wording, it presents the HTML in our page as a document object and then contains a tree of objects that we can access in Javascript.

The HTML Model is not something that is part of the Javascript language, but has been pushed to be standardized and is supported by all major browsers. Having the HTML Model means that we can now manipulate HTML, which we'll discuss below.

Event Handlers and the DOM

Our next video (opens in a new tab) covers event handlers and their relation to the DOM and Javascript.

In order to follow unobtrusive Javascript, we can use event handlers (opens in a new tab) in Javascript to add interactions to the HTML without adding or editing anything in the HTML at all.

FYI: If you haven't taken COMP 55, or are not sure what an event really is, Mozilla also has a well-written introduction to events (opens in a new tab) that gives you a better sense of what events really are and how they work in browsers.

Here is a reference to a few of the different events for Elements (opens in a new tab):

And a few more for events related to the Window (opens in a new tab)

DOM Tree and its elements

Part of the idea of the HTML DOM is that it is best represented as a tree. This means that the <html> can be thought of as the parent node, and any of its subelements (like <head> and <body>) would be child nodes. And then each of those nodes would have sub nodes that represent the top-most level of any of its children, and any further sub-nodes would be sub-children, thus representing a tree.

figure of the dom

Figure of a DOM element as a tree By ‍Birger Eriksson - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18034500 (opens in a new tab)

Our next video (opens in a new tab) covers this in more detail.

As a reference to the above video, we access particular elements either by their id or by their tag name via methods like:

Once you get the Element (opens in a new tab), you can access and modify its various properties via a . access. Here's some of the most popular read only properties:

And here are a few more of the most popular ones discussed (though any html property, such as href or value could also be used):

Though in addition to this, you can also access any of the CSS properties or other HTML properties by prefixing it with style, so it would be something like:

let personalLink = document.getElementByID("portfolioLink");
personalLink.style.backgroundColor = "salmon";

The one difference is that to access any of the css properties, you would change the key to be something in camelCase.

Debugging Styling Errors

The following video (opens in a new tab) is quite short (less than 4 min!) but covers some important tips when debugging style errors.

The main recommendation here is just to use className as a way to change an entire set of properties. Instead of trying to change the properties one by one. Just make two classes that have different properties, and when you want to change an element, just change the class that it belongs to.

Also, if you are having issues with your style did you remember to:

Traversing the DOM

Once we have an element in the DOM, (referred to as a Node (opens in a new tab)) we can traverse from that point around to different elements, which means that we don't need to always start at the root of the document. The following video demonstrates that (opens in a new tab)

Here are links to some of the different methods that you can use to traverse the DOM:

Modifying the DOM

You can also modify the existing DOM structure on a webpage by adding nodes and removing nodes on the existing tree. This means that new nodes need to be attached to an existing node in the tree for them to appear. The video below (opens in a new tab) goes over how to use create an <h2> element into an existing webpage via javascript.

Here are some additional references that would be useful as reference for you.

commandusageexplanation
createElement (opens in a new tab)const newDiv = document.createElement("div")creates an element based off the tag name
appendChild (opens in a new tab)parentNode.appendChild(newDiv)adds a new child element to the parent Node
removeChild (opens in a new tab)parentNode.removeChild(elem)removes the referenced child element from the parent Node
insertBefore (opens in a new tab)parentNode.insertBefore(newDiv, refChildNode)inserts an element before the referenced node as a child of the parentNode

DOM and CSS

Think of this last video (opens in a new tab) as like a roundup of all the gotchas that can happen as you start to integrate Javascript with CSS and the DOM. It reviews some of our earlier work regarding truthy values, using parseInt and console.log to help extract values, and how empty strings are assigned to many properties in elements when they do not have explicit values set and still have their default values.

20 JavaScript Part 225 Events