Intro to 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
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)
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.
documentwhich 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
Now, let's use what we learned here for a little activity:
There are a number of different functions / methods on the
documentobject 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
getElementByTagName()- Target nodes based on their tag
getElementsByClassName()- Target nodes based on their
We can use the DOM API and some of the above functions to maniupulate our
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.
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
idattributes. 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
linode, and then append the
linode 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.
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.
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
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