Intro to the DOM

What is the DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. - MDN Web Docs

😱 Again in English, please.

Basically, we have seen HTML, which is what we write in order to define the structure of our page. The DOM is an abstraction of this structure we have defined, presented in a way which programming languages can easily interact with (as Objects, which we looked at last time)

Working with the DOM

So how do we interface with the DOM? If we can do this, It will allow us to make much more dynamic pages than if we used just HTML and CSS.

Well, in JavaScript (when it is running in a browser) we have a global variable called document which exposes the DOM API for us to play with.

⚡️ A global variable is basically one which already exists, which all levels of our program can access

⚡️ An API is an Application Programming Interface, and is basically just a set of functionality one system exposes for other systems to use.

If we wanted to get all the paragraph tags in our HTML page, we could use the DOM API to do this by calling the getElementsByTagName function.

🤓 Element Finding Example

Now, let's use what we learned here for a little activity:

💪 Element Finding Activity

There are a number of different functions / methods on the document object which we can use to find the DOM node we are looking for. Some common ones are:

• write("string") - Writes the given string to the end of the DOM

• writeln("string") - Writes the string to the dom and then a newline

• getElementById() - Target a node based on its id attribute

• getElementByTagName() - Target nodes based on their tag

• getElementsByClassName() - Target nodes based on their class attribute

Adding Nodes

We can use the DOM API and some of the above functions to maniupulate our document and control what the user sees. remember, the role of JavaScript in the web is primarily for adding interaction and logic to pages, which are presented visually by a combination of HTML and CSS.

Because of this, depending on what we want to change, we can manipulat one of these two areas for the desired result. Let's look at an example.

🤓 Node Adding Example

So what is happening in the above example? You will notice in the HTML on the left, The heading is simple 'My List of …', and the unordered list (<ul id="list"></ul>) is empty, yet, in the output at the bottom we can see clearly there is more content than we would expect. We are using the DOM API to add content to the HTML document.

In the JS on the right, we define some variables which will act as our content later on.

Then, using the document methods mentioned above, we are able to find specific dom nodes by using their unique id attributes. Now that we have the nodes, and the content, we can combine them to add our new content to the page.

Populating the list is a bit more complex, as we need to create new nodes from scratch. We create an <li> node, and a text node, and append the text node to the li node, and then append the li node to the list node. We do this inside of a loop, so that we do it once for each item in our array.

⚡️ According to the HTTP spec, only 1 element per page should have a given ID, so they should be unique.

Removing Nodes

We can also use the DOM API to remove nodes. This is done by calling the remove() method on the node we want to remove. Let's take a look at a basic example of this now.

🤓 Node Removal Example

Event Listeners

Sometimes you want to trigger some code when a certain event or action happens. We can use event listeners for this. An event listener is essentially a function which will be called whenever a certain event occurs. Check out the following example for the basics of event listeners

🤓 Event Listener Example

Exercise:

Using what we have learnt in this session, try to make the following A shopping list application, with the following:

• text field for adding items

• button for adding the typed item to the list

• a list for display the items the user has added

• (bonus) add a button to each list item which when click, will delete the item from the list