A Beginner JavaScript Tutorial Series: Accessing the HTML DOM (Document Object Model) With JavaScript (Part II)

In part one of this two part tutorial, A Beginner JavaScript Tutorial Series: Accessing the HTML DOM (Document Object Model) With JavaScript (Part I) The HTML DOM (Document Object Model) was introduced and we demonstrated several methods for accessing HTML content and modifying it. The examples in that tutorial demonstrate the technical features which one must understand, but they lacked the "flash" of seeing a web page change dynamically. In this tutorial on events we will see some of that flash because events will trigger pages updates. Also, we will add in CSS styling is some of our examples.

In this example, we change the self-portrait of Rembrandt with that of Cardinal Wolsey. If anything, it demonstrates that there is really no "magic" involved. We locate the new picture by invoking the getElementById() method and the subtitution is performed by doing the assignment to the src property. In this example we avoid distortion because the original Rembrandt image was 439px by 599px while the Cardinal is 444px by 599px. If the images sizes were much different you would really want to change the width and height craracteristics as well.

The following snapshot illustrates changing multiple properties. My using the inspect element for the unchanged, identical heading we see the attributes taken on and those overridden specific to the h2 element defaults.

This is where we see pages change dynamically, when an event occurs. The types of events which can occur (and what follows is just a sampling) are:

Input Events

onchange - a user changes the content of an input field

onfocus - an input field gets focus

onkeydown - a user is pressing/holding down a key

onkeyup - the user releases a key

onreset - a user clicks the reset button

onselect - input text is selected

onsubmit - a user clicks the submit button

Mouse Events

onmousedown/onmouseup - pressing/releasing a mouse button

onmousemove/onmouseout - moving the mouse pointer over/out of an element

Click Events

onclick - button is clicked on

dblclick - a text is double-clicked

Load Events

onerror - an error occurs when loading an image

onload - the page/image has been loaded

onresize - the browser window is resized

onunload - the browser closes the document

The following snapshot shows a change in the CSS style for the header element whwn the button is clicked. The coloris changed from the defualt color black to blue.

This is another onclick example. It differs from the first in that instead of invoking the getElementById() method directly in the statement, we invoke a function which does the processing. This can sometimes make your code look a little less "busy". For example, if we were changing an image here with multiple parameters of src,width, and height is cleaner, clearer (and less error prone) to read multiple statements in a function rather than an elongated string following the onclick=.

There are a number of handy JavaScript functions which you can use in your web pages. The Date() function is one of them. When building a web page you could simply run a script to display the time the page was loaded. In other cases you might want to use JavaScript to set and refresh a simple digital clock. Simple options are available and by styling you can make them as simple or involved as you want.

In this example, we check to see if cookies are enabled in the browser. This example illustrates something more and something we have been taking for granted.

When we perform a document.write("Something"); What are we really doing? In terms of the OOP model, document is really an object and it is the entire writable area of the screen or web page. write is a method associated with the object.

Now, notice carefully at the current example, we have never seen the object "navigator" before. That is because it is not part of the HTML DOM but rather is a part of the BOM, Browser Object Model which we will be discussing in the next tutorial.

In this example we look at the two events which occur. When we mouse over the rectangle the code changes. Then when we leave the rectangle it changes back to the original text. This is the general case for "mousing"

In this tutorial we looked at modifying the HTML DOM when an event occurs. The code which makes the change is called an event handler. Anything that you could possibly do in interacting with a web page could probably result in some coding for the event. We indicated that there are four types of events: when pages are loaded and unloaded, when there is a mouse action, when an input value is entered to changed, and when a button is clicked.

Thereis some other items related to the HTML DOM such as nodes and nodelists which we will defer until we have had the opportunity to study JavaScript arrays.

We alluded to the Browser Object Model (BOM) in this tutorial in that we used it to determine wheteher cookies were enabled. Unfortunately the BOM is not like the DOM. There is no uniform adopted standard. So, it must be used with care. Many of the methods which can be used in the BOM have been adopted by the major browsers (e.g. Chrome, Internet Explorer, Safari, Opera, etc.) but more on this subject in the next installment.

Till then experiment with the enevnts we didn't get to illustrate. The list in this tutorial is a good place to start ferreting out information.