DOM and Events

Document Object Model (DOM) is an interface that allows programs and scripts contents to be updated. It is constructed like a tree. A documents contents is parsed into application nodes and the nodes have children (childNode). The nodes represent the document’s structure consisting of variables (leaves) and values (leaves) the nodes can be explored. The DOM give traversal (tree) visual of the program’s structure. It also make updating/editing code easier by following the nodes.

The DOM contains a numeric identifier for the type of node. A regular element (node) has value of 1, the text node (leaves) has the value3, and comments have the value of 8. The numeric feature of the DOM is not a JavaScript favorite, but the DOM was designe to work with several programming languages and to work in different browsers.

jQuery is a JavaScript library, which to me contains shortcuts that make programming for HTML and Ajax easier ()div, tables load, etc.).


Browser Events — a signal that something (an action) has happend in the browser

Document Loading — an action that takes place when the when the page loads up

Event Handler Attachment — attaching a handler to an event usually using the “.on” method

Event Object — is sent to a handler function as an argument

Form Events — takes place when an event is triggered pertaining to the form, like reset, search, etc.

Keyboard Events — waiting for a press (up/down).

Mouse Events — an event is triggered when the mouse is clicked

An example of the click event to a button that will alert the message “YES!” when clicked.

//function will listen for button click and call alertMessage

function initbtn() {

var btn = document.getElementById(“btn”);

btn.onclick = alertMessage;


//function will display the alert message “Yes”

function alertMessage() {