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.
Programming interfaces
The DOM is an application program interface (or API). APIs help when you are coding. They are sets of built-in functions that you can easily use with your HTML and JavaScript code.
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.
The way the document object is structured allows you to use another programming language, such as JavaScript, to access, change, add or remove any of the HTML elements inside the document.
Using the DOM when you code allows you to make changes to individual HTML elements after they have been drawn on-screen. You can use the DOM’s methods and properties to find an HTML element on your page and then, using JavaScript, add to it, remove it or change it.
If we want our app to be interactive, we need to learn how to use these methods and properties with JavaScript. User needs to be able to see tasks on-screen and then add and remove items.
