JavaScript Part 5

The DOM and manipulating objects on a HTML page

The Components of a Web Page

Think about your HTML web page (your "browser document") as being made up of many blocks.

Blocks

Pre-defined Blocks

Some blocks are defined by the browser, such as the browser window.

Window

User-defined Blocks

And some blocks we make ourselves via HTML
(e.g. <fieldset>, <div>, and <img> HTML tags).

Blocks

Document Objects

All of these blocks are objects -- just like the ones we covered earlier! And all these objects have pre-written functions/methods you can use.

Does the line of code below make more sense now? document is one of the main objects of a web page and it has a method named write that accepts a string as a parameter. document has lots of other properties and methods too: check out this list.

<script>

document.write("Hello!");

</script>

HTML Element Objects

The most common thing you'll do with JavaScript is get references to your HTML tags ("elements") via document.getElementById().

Important! Your HTML tag must have an id attribute in order to do this!

<div id="status">
  <p>Loading...>/p>
  <p><img src="assets/loading.gif"></p>
</div>

HTML Element Objects

For example, let's get a reference to the "status" div element by using document.getElementById(). Then confirm this by dynamically reading all the HTML in it using the innerHTML property.

(You can find all the things you can do with elements here.)

<div id="status">
  <p>Loading...</p>
  <p><img src="assets/loading.gif"></p>
</div>

<script>

  // 1. Use document.getElementById()

  // 2. Use innerHTML

</script>

<style>
#status {
  border: 1px solid #666;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px;
  width: 200px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}
</style>

HTML Element Objects (cont'd)

You can also use innerHTML to replace what's already in an element.

<div id="status">
  <p>Loading...</p>
  <p><img src="assets/loading.gif"></p>
</div>

<script>

  // 1. Use document.getElementById()
  var statusDiv = document.getElementById("status");

  // 2. Use innerHTML

</script>

<style>
#status {
  border: 1px solid #666;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px;
  width: 200px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}
</style>

HTML Element Objects (cont'd)

Or let's dynamically swap out one image for another by updating the src attribute of an image tag.

<img id="robot"
     src="exercises/assets/nesting-dolls.jpg" />

<script>

  // 1. Use document.getElementById()
  
  // 2. Set src to be "exercises/assets/salt-pepper-shakers.jpg"

</script>

However there is an easier way!

Typing document.getElementById() gets tedious after a while so many people will use a JavaScript library to make repetive tasks easier.

With the jQuery library:

  document.getElementById("status")

  document.getElementById("robot")

➞

$("#status")

$("#robot")

Just remember that it is still JavaScript under the hood!