Site icon MiltonMarketing.com – Bernard Aybout's Blog

THE DOCUMENT OBJECT MODEL (DOM)

To-Do-List

To-Do-List

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.

DOM methods and properties

Before you can use any of the DOM’s built-in functions, you have to tell your browser you want to access the API.

To do this you always have to type this piece of code at the start of an instruction for the DOM.

[javascript] document.[/javascript]

Once you’ve told your browser you want to use the DOM, you then have to say which DOM functions you want to use. The DOM has built-in functions called methods and properties that allow you to change HTML elements.

A method is an action you can do, such as adding or removing a HTML element. A property is a value that you can access and change, such as setting the contents of a HTML element to a piece of text.

When you want to use a method or property, you separate the DOM keyword from the DOM method or property with a dot (.).

Because the DOM lets you access any HTML element in your web page, lots of DOM methods have the word “element” in them. Earlier you used a DOM method with JavaScript when you wrote this code:

[javascript] document.getElementById("password");[/javascript]

Here we are telling our browser to use the DOM. Then we are asking to use a DOM method called getElementById to find a HTML element.

Finally, we’re directing our browser to find the HTML element with that specific id attribute, in this case, password.

When we use dots (.) to separate pieces of code we are using dot notation. The dot tells your browser you will be using DOM methods and properties.

Changing your app with the DOM

We can use a DOM method to find an HTML element in our app by its id attribute. We can then use a DOM property to change the contents of that element. Let’s take a look at how we do this.

Using the getElementById method

The getElementById method is a very handy way of finding a specific HTML element in your block of code. To use the getElementById method, you have to include the id attribute you gave to the HTML element in brackets after the keyword, like this:

[javascript] document.getElementById("list");[/javascript]

Here we have asked our browser to find the HTML element in our web page that has the id attribute set to the value “list“.

Using the innerHTML property

You can use the DOM’s innerHTML property to access or change the contents of an HTML element in your app. You can then use the contents of the HTML element as a value in your JavaScript code.

[javascript] var showList = document.getElementById("list");
alert(showList.innerHTML);[/javascript]

Here we have created a variable where the value is set to the contents of the HTML element that we have called “list“, using the id attribute.

We have then created an alert. The alert will pop up the value of our variable.

Our browser can access this information because we have set the innerHTML property of the variable.

The DOM is case sensitive. Make sure your capital letters are in the right place.

Let’s have a look at using the getElementById method with the innerHTML property to pop up an alert:

[javascript] <!DOCTYPE html>
<html>
<head>
<title>List Alert</title>
</head>
<body>
<div id="list">Buy milk</div>
<script>
var showList = document.getElementById("list");
alert(showList.innerHTML);
</script>
</body>
</html>[/javascript]

In this example, we’ve used the getElementById method to find the < div > with the id attribute set to “list“.

You will remember < div > tags from earlier. They are containers for pieces of content and you can use them to divide your page into sections.

We’ve then stored the contents of that < div > in a variable.

Then we’ve used innerHTML to set the text in our alert to the value of our variable. If the text in the < div > changes, so will the text inside the alert box, without us having to write any more code.

METHODS AND PROPERTIES

1) Open up your text-editing program. Create a new HTML file called methods.html. In your < body > use the < input/ > tag to create a button. Also create an empty < div >, like this:

[html] <!DOCTYPE html>
<html>
<head>
<title>Methods</title>
</head>
<body>
<input type="button" value="Add item"/>
<div id="container"></div>
</body>
</html>[/html]

2) Now create a JavaScript function in your < head > that uses the getElementById method to find your empty < div >. Then use innerHTML to set the contents of your empty < div > to some text, like this:

[html] <script>
function addItem() {
document.getElementById("container").innerHTML = "Item to remember";
}
</script>[/html]

3) Then make your button call your JavaScript function when it is clicked. Add the onclick attribute to your < input/ > tag and set the value of the onclick attribute to the name of your function, like this:

[html] <input type="button" value="Add item" onclick="addItem();"/>
<div id="container"></div>[/html]

4) Save your HTML file and open it in your browser. You will see a button. When you or user clicks on the button, the innerHTML text will be added to your tag  < div >.

Adding to your app using the DOM

We now know how to use the DOM’s methods and properties to find and change HTML elements in our app, which will be really useful.

We now need to learn how to use the DOM to add new HTML elements to our app. After all, users need to be able to add items to the list.

The DOM has two methods that we can use with JavaScript to do this.

The createElement method

The createElement method is used to make a new HTML element, such as

a < div >, button or a paragraph.

You have to include the name of the type of HTML element you want to create in double quotes (” “) and brackets after the keyword, like this:

[javascript] document.createElement("div");[/javascript]

You can then use JavaScript to assign your new element to a variable, using the assignment operator (=) we learnt about earlier.

Then you can use the innerHTML property to set the content of your new element before your browser draws it on-screen.

The appendChild method

The appendChild method lets you add a new HTML element to an existing HTML element.

When the new element is drawn on-screen, it will be drawn underneath the existing element.

You have to include the HTML element you want to add in brackets after the keyword, like this:

[javascript] <script>
var newDiv = document.createElement("div");
newDiv.innerHTML = "Bob";
document.body.appendChild(newDiv);
</script>[/javascript]

The appendChild and createElement methods allow you to add each item to the list in the app.

All the DOM methods and properties are written using camelCase.

Let’s have a look at an example that uses the createElement and appendChild methods to create a new HTML element on our page.

The HTML element will be a < div > with a piece of text inside it. A < div > is a useful way of creating a section or container for other HTML elements.

[javascript] <!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
</head>
<body>
<div id="list">To-Do List</div>
<script>
var newItem = document.createElement("div");
newItem.innerHTML = "Item added to list";
document.getElementById("list").appendChild(newItem);
</script>
</body>
</html>[/javascript]

The first thing we’ve done is code a < div > and set its id attribute to list.

This < div > will be the HTML element we add our new HTML element to, using appendChild.

Then we’ve opened the < script > tag and created a block of JavaScript code. In the first line of JavaScript we have used createElement to make a < div >.

We have then stored this new < div > in a variable called newItem.

You can use any name you want here. In our next line of JavaScript, we’ve set the value of our variable to a piece of text using the innerHTML property.

Our new < div >, stored in our variable now contains text.

In our final line of JavaScript, we’ve used getElementById to find the first

< div > we made using the id attribute. We’ve then used appendChild to add the < div > stored in our variable to the first < div > on our page.

When we run our code in our web browser, we will see our new < div > has been added to our first < div >.

ADDING NEW HTML ELEMENTS

Now it’s your turn to have a go at using the createElement and appendChild methods.

In your code, use the DOM and JavaScript to create a new HTML element when an existing element is clicked.

Using APIs like the DOM makes building apps easier.

1) Open up your text-editing program. Create a new HTML file called newelements.html. Code a < div > (with an id attribute) that contains text, like this:

[javascript] <!DOCTYPE html>
<html>
<head>
<title>New Elements</title>
</head>
<body>
<div id="list">Click here to add item</div>
</body>
</html>[/javascript]

2) In your < head >, create a new function. Your code will look like this:

[javascript] <head>
<title>New Elements</title>
<script>
function addItem() {
}
</script>
</head>[/javascript]

3) Now make your function create a new < div > using the createElement method. Store your new < div > in a variable and give the variable a name.

Then set the value of your new < div > to some text using the innerHTML property.

Your code will look like this:

[javascript] <script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = "New item";
}
</script>[/javascript]

4) Add a final line to your function. Use getElementById to find the < div > in your < body >. Use the appendChild method to add the new < div > to the

< div > in your < body >. Your code will look like this:

[javascript] <script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = "New item";
document.getElementById("list").appendChild(newItem);
}
</script>[/javascript]

5) Now the only thing missing is the function call in the < body > of our code. Add the onclick attribute to the < div > in your < body >, so that when the

< div > text is clicked your addItem function is called.

Your code will look like this:

[javascript] <body>
<div id="list" onclick="addItem();">Click here to add item</div>
</body>[/javascript]

6) Save your HTML file and open it in your browser.

When you click on the “Click here“ piece of text a new < div > will be added to your app every time you click.

But how do we add the button to our app? Keep reading…

Exit mobile version