CNIT 133 Interactive Web Pags – JavaScript and AJAX Document Object Model (DOM)

Agenda

• •

My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).

DOM object hierarchy.

• • • • •

JavaScript Supports three kinds of objects

Built-in objects: are built in to the JavaScript language. (Date, Array, String) DOM (Document Object Model): objects represent various components of the browser and the current HTML document. Custom objects: objects you created.

NOTE: DOM is not part of the JavaScript language. It is an API (Application Programming Interface) build in to the browser. NOTE: The window object is the parent object for all of the objects. (See next diagram)

The DOM object hierarchy

Window Properties Window Object (Global Object) Window Methods document object (DOM) location object history object (array) navigator object self opener alert() back() blur() clearInterval() clearTimeout() close() confirm() focus() forward() home() open() print() prompt() setInterval() setTimeout() stop() Document Object Collection: images[] forms[] links[] anchors[] Document Object Properties: lastModified title URL Document Object Methods: close() getElementById() getElementsByName() getElementsByTagname() open() write()

HTML Document Object Model (HTML DOM)

Scripting Documents

• • • • • • Every web browser window (or frame) displays an HTML document. The Window object that represents that window has a document property that refers to a Document object.

HTML documents can contain text, images, hyperlinks, form elements, and so on.

JavaScript code can access and manipulate the objects that represent each document element.

A Document Object Model, or DOM, is an API that defines how to access the objects that compose a document. The W3C defines a standard DOM that is reasonably well supported in all modern web browsers.

In the early days, Netscape 2 and 3 supported a simple DOM that provided access only to special document elements such as links, images, and form elements. This legacy DOM was adopted by all browser vendors and has been formally incorporated into the W3C standard as the “Level 0” DOM.

Scripting Documents (continue…)

• • • With IE 4, has a new DOM, it allowed access to all elements in a document. Microsoft’s API is known as the IE 4 DOM. It was never standardized, and IE 5 and later adopted the W3C DOM.

Netscape 4 based on dynamically positioned scriptable elements known as layers. It was supported only in Netscape 4 and dropped from the Mozilla and Firefox browsers.

The W3C DOM standard, or simply, DOM, adopted IE and Netscape DOM.

Dynamic Document Content

• • • Let’s exploring the Document object with its write() method. This method is part of the legacy DOM: You might create a pop-up window and write some HTML to it with code like this: function hello() { var w = window.open(); var d = w.document; d.open(); //open a new document – optional d.write("

Hello world!

"); d.close(); } If you call the write() method on a document that has already been closed, JavaScript implicitly opens a new HTML document.

Document Properties

• • Legacy DOM Document object properties:  bgColor (deprecated)  cookie    domain lastModified location   referrer title  URL You can place code like this to the bottom of each web document:

---

document:
URL:
Last Update:

• •

Legacy DOM: Document Object Collections

The Document Object Collections, are array-valued properties. They are the heart of the legacy DOM. They are the properties that give you access to certain especial elements of the document: anchors[ ] applets[ ] forms[ ] images[ ] links[ ] Their elements are in the same order as in the document source code. document.forms[0] refers to the first

tag in the document.

Naming Document Objects

• • • • In the legacy DOM, with the name attribute, you can assign names to important document elements and to refer to those elements by name:

Assuming that the

is the first one in the document: document.forms[0] // refer to the form by position document.f1 // refer to the form by name document.forms["f1"] // refer to the form as array index Setting the name attribute of a , , or (but not of and >) also makes the corresponding Form, Image, or Applet object accessible as a named property of the document object itself. Thus, you can also refer to the form as: document.f1

You have a form that looks like this: /* you can refer to the text input field element as : */ document.shipping.zipcode

Overview of the W3C DOM

• • HTML documents have a hierarchical structure of nested tags that is represented in the DOM as a tree of objects. The tree representation of an HTML document contains nodes representing HTML tags or elements, such as and

.

Consider the following simple HTML document:

An HTML Document

This is a simple document.

DOM Levels and Features

• • • •

There are two versions, or “levels” of the DOM standard. DOM Level 1 was standardized in October 1998 DOM Level 2 was standardized in November 2000 DOM Level 3 was standardized in April 2004

Finding Elements in a Document

• • • • • • When programming with the DOM API, it is quite common to need a particular node within the document or a list of nodes of a specific type within the document.

The Document object is the root of every DOM tree, but it does not represent an HTML element in that tree. The document.documentElement property refers to the tag that serves as the root element of the document. The body property of the HTML Document object is a convenient special case property: document.getElementsByTagName("body")[0] This expression calls the Document object’s getElementsByTagName() method and selects the first element of the returned array.

You can use getElementsByTagName() to obtain a list of any type of HTML element.

var tables = document.getElementsByTagName("table"); alert("This document contains " + tables.length + " tables");

Finding Elements in a Document

• • • • If you pass the special string "*" to getElementsByTagName(), it returns a list of all elements in the document, in the order in which they appear. (this special usage is not supported in IE 5 and IE 5.5, see IE specific HTMLDocument.all[ ]) To get the fourth paragraph in a document: var myParagraph = document.getElementsByTagName(“p")[3]; This is not the best nor the most efficient technique. It is best to give elements an id attribute, then look up your desired element by its ID.

var myParagraph = document.getElementById("specialParagraph");

Window Object – a clock

Window Object - URL

Window Object – Reload and Print

Document Object – title, URL

Document Object - getElementById

This is a header

Click on the header to alert its value

• Result: will display This is a header

Document Object – getElementsByName

• Result: will display 3

Anchor Object – href, target

Visit Microsoft

In this example we change the text and the URL of a hyperlink. We also change the target attribute.

The target attribute is by default set to "_self", which means that the link will open in the same window.

By setting the target attribute to "_blank", the link will open in a new window.

Image Object – resize, change src

Table Object – update cells

Row1 cell1	Row1 cell2
Row2 cell1	Row2 cell2
Row3 cell1	Row3 cell2

Table Object – display cell

Cell 1 data	Cell 2 data
Cell 3 data	Cell 4 data
Cell 5 data	Cell 6 data
Cell 7 data	Cell 8 data

Directory

×