Naming Elements in the DOM

HTML5

John R. Williams and Abel Sanchez

Video - Giving ID to Elements in the DOM

Main Points from the Video

We identify elements (tags) in the HTML page by using ID="T1" say.
In Javascript we use "document.getElementById("T1")" to access the element (tag) called "T1". Notice the "dot" between "document" and "getElementById("T1")". In Javascript this means that "getElementById()" is a function that can be referenced via the "document" object. We will cover this in more detail later. For now just copy what we tell you to do in the Exercises.

How the Browser Renders the HTML

The Chrome Browser is an application that runs on your computer. Like any other application it creates data and objects in memory. It takes as input data HTML files that it downloads from other computers. Typically, you type in a URL, such as http://mit.edu which is the address of the MIT Web Server.
An MIT Web Page.

Once you type in a URL and hit return the browser sends a request to the Web Server. In response the Web Server sends back a message which is HTML text. Here is a simple HTML page on the left and how it looks rendered on next page.
We saw in the video that the browser creates data (name and values) in memory. We call these objects and the W3C standard organization specifies exactly what these objects are called. The standard is called the Document Object Model or DOM for short. The standard is quite large so we will only explore a small part of it. However, as you will see we can do some exciting things even with just this small part.

Exercise - In the code on next page (you may already have typed it in during our last exercise), bring up the Chrome console and do the following: 1) change the value in the textbox from 10 to 33, 2) change the text displayed in your browser from "Hello World" to "Goodbye Earthling".
Now edit the file to change the function Run() so that when it is executed it changes the text in your browser to "Good Day Sunshine".

THE END