THE DOCUMENT OBJECT MODEL (DOM): The button and text box in our app now works. But how will user add and remove items from the list?
To allow user to do this we need to use the Document Object Model (or DOM for short). We learnt earlier that an HTML web page file is called a document.
As you know, HTML documents are made up of lots of smaller pieces of HTML, called HTML elements. When we save our HTML file and run the code in our web browser, the browser draws the elements on-screen.
If we want to build the app we need to be able to change, delete or add new HTML elements after our browser has drawn the page on our screen. As we’ve seen as we’ve worked through earlier assignments, built-in functions such as the alert are very useful when we code.
The DOM is a set of built-in functions that work with your web browser. The built-in functions make it easy to build web pages that are dynamic, changing according to what the user does.
The DOM will help make your app interactive.
The alert function we used earlier is a built-in function. Rather than having to code an alert, we can just type the alert keyword and our browser knows what to do.
The DOM works in a very similar way. We can use the DOM’s built-in functions to make changes to our HTML document after it’s been drawn on-screen.
Using the DOM lets us build web pages that change and react when the user does something. So if we want our to-do list to be interactive and change on-screen when user adds a new task or checks one off, we need to use the DOM’s methods and properties.
APPLICATION PROGRAM INTERFACES (APIS) save lots of time when you are writing code because they allow you to use their built-in functions. Rather than having to write the code for these functions yourself, you can use the API’s functions in your code. There are APIs to do all sorts of things, from storing information to adding content to your page.
Using the DOM
The DOM API is structured in a special way called a “hierarchy“, which is a bit like a family tree. This structure is called the document object. In the document object, the individual HTML elements are all connected to each other, like the members of a family, with parents and children.