Document Object Model

1
Document Object Model

• ???
• http//www.ywdeng.idv.tw

2
Document Object Model (DOM)

• What is model?
• Prototype or plan for the organization of objects
  on a page
• Defined by the World Wide Web Consortium (W3C)
• HTML markup is applying markup solely to define
  the structure of a document
• DOM focuses primarily on the HTML document and
  the content nested inside it

3
Element Hierarchy of an Empty HTML Document
4
The DOM in a Browser Window
5
The DOM in a Browser Window

• window object
• Represents the content area of the browser window
  where HTML documents appear
• In a multiple-frame environment, each frame is
  also a window
• The outermost element of the object hierarchy
• navigator object
• read-only
• primarily to read the brand and version of browser

6
The DOM in a Browser Window

• screen object
• read-only
• about the physical environment
• the number of pixels high and wide available in
  the monitor
• history object
• this object assists a script in simulating a
  click of the Back or Forward button

7
The DOM in a Browser Window

• location object
• This object is the primary avenue to loading a
  different page into the current window or frame
• document object
• Each HTML document that gets loaded into a window
  becomes a document object
• Contains the content that you are likely to
  script
• Except for the html, head, and body element
  objects

8
DOM Object Hierarchy
9
DOM Object Hierarchy
10
DOM Object Hierarchy
11
Object References

• After a document is loaded into the browser, all
  of its objects are safely stored in memory in the
  containment hierarchy structure specified by the
  browsers DOM
• Object Naming

12
Rules About Object IDs (Identifiers)

• May not contain spaces
• Should not contain punctuation except for the
  underscore character(_)
• Must be inside quotes when assigned to the id
  attribute
• Must not start with a numeric character
• May not occur more than once in the same document

13
Referencing a Particular Object

• The getElementById() command belongs to the
  document object
• JavaScript is case sensitive

14
Node Terminology
15
What Defines an Object?

• Properties
• Methods
• Events (Handlers).

16
Properties
17
Methods
18
Events
19
Window and Document Objects
20
The window Object

• Accessing window properties and methods
• window.propertyName
• window.methodName(parameters)
• self.propertyName
• self.methodName(parameters)
• propertyName
• methodName(parameters)

21
Creating a window

• The method that generates a new window is
  window.open().
• Parameters
• the URL of the document to load
• its name for target attribute reference purposes
  in HTML tags
• physical appearance (size and chrome contingent)

chrome The area where scrollbars, toolbars, the
status bar, and (non-Macintosh) menu bar live is
known as a windows chrome
22
Creating a window
23
(No Transcript)
24
window.open() ??

• height100 ????
• width400 ????
• top0 ?????y??
• left0 ?????x??
• toolbarno ?????,yes???
• menubar ??
• scrollbars ??
• resizableno ??????????,yes???
• locationno ???????,yes???
• statusno ???????,yes???

window.open ('page.html', 'targetWindow',
'height100, width400, top0, left0,
toolbarno, menubarno, scrollbarsno,
resizableno, locationno, statusno')
25
Window Properties and Methods

• window.alert() method
• This method generates a dialog box that displays
  whatever text you pass as a parameter
• A single OK button (whose label you cannot
  change) enables the user to dismiss the alert.

26
Window Properties and Methods

• window.confirm() method
• presents two buttons (Cancel and OK)
• returns a value true if the user clicks OK or
  false if the user clicks Cancel
• as a way to have a user make a decision about how
  a script progresses

27
Window Properties and Methods

• window.prompt() method
• displays a message that you set and provides a
  text field for the user to enter a response
• Two buttons, Cancel and OK
• canceling the entire operation or accepting the
  input typed in the dialog box.

28
ltscript type"text/javascript"gt var answer
prompt("???????", "?") if (answer)
alert("??!\n" answer) else
alert("???!") lt/scriptgt
29
The location Object

• location.href "http//www.dannyg.com"
• relative URL is OK
• If the page to be loaded is in another window or
  frame
• newWindow.location.href "http//www.dannyg.com"

30
The navigator Object

• navigator.userAgent
• returns a string with numerous details about the
  browser and operating system
• Internet Explorer 7 in Windows XP
• Mozilla/4.0 (compatible MSIE 7.0 Windows NT
  5.1)
• Firefox 1.5 on a Macintosh
• Mozilla/5.0 (Macintosh U PPC Mac OS X Mach-O
  en-US rv1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

31
The navigator Object

• navigator.appVersion
• Firefox 3.0 on Windows Vista
• 5.0 (Windows zh-TW)
• Internet Explorer 7.0 on Windows Vista

32
Detecting Firefox x.x
ltscript type"text/javascript"gt //test for
Firefox/x.x or Firefox x.x (ignoring remaining
digits) if (/Firefox\/\s(\d\.\d)/.test(navig
ator.userAgent))  var ffversionnew
Number(RegExp.1) // capture x.x portion and
store as a number if (ffversiongt3) 
document.write("You're using FF 3.x or
above") else if (ffversiongt2) 
document.write("You're using FF 2.x") else if
(ffversiongt1)  document.write("You're using FF
1.x")else document.write("n/a")lt/scriptgt
33
Detecting IE x.x
ltscript type"text/javascript"gt //test for MSIE
x.x if (/MSIE (\d\.\d)/.test(navigator.userAge
nt)) var ieversionnew Number(RegExp.1) //
capture x.x portion and store as a number if
(ieversiongt8) document.write("You're using IE8
or above") else if (ieversiongt7)
document.write("You're using IE7.x") else if
(ieversiongt6) document.write("You're using
IE6.x") else if (ieversiongt5)
document.write("You're using IE5.x") else
document.write("n/a") lt/scriptgt
34
The document Object

• The document object holds the real content of the
  page
• document.forms property
• Array of ltformgt
• document.forms.length ????
• document.forms0 ???????
• document.forms"formName" ???????
• document.formName

35
The document Object

• document.images property
• Array of ltimggt

36
The document Object

• document.write() method
• Append output to the document
• Can include HTML tags
• After a page loads, the browsers output stream
  automatically closes
• After that, any document.write() method issued to
  the current page opens a new stream that
  immediately erases the current page

37
The document Object

• document.close()
• Your script should close the output stream when
  it finishes writing its content to the window
  (either the same window or another).

38
The document Object

• If you want to add to or modify a page that has
  already loaded, you need to call
• document.createElement() method to create an
  element node
• document.createTextNode() method to create a text
  node
• Use elementNode.appendChild(childNode) to append
  child node to the DOM tree

39
(No Transcript)
40
The document Object

• document.getElementById() method
• The sole parameter of this method is a quoted
  string containing the ID of the element you wish
  to reference
• document.getElementById("output")
• The method returns a value, which you typically
  preserve in a variable for use by subsequent
  script statements
• var oneTable document.getElementById("salesResul
  ts")