DOM - SOEN287week3 Document Object Model JavaScript...

Info iconThis preview shows pages 1–15. Sign up to view the full content.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: SOEN287week3 Document Object Model JavaScript Execution Environment- The JavaScript Window object represents the window in which the browser displays documents- The Window object provides the largest enclosing referencing environment for scripts- All global variables are properties of Window- Implicitly defined Window properties:- document- a reference to the Document object that the window displays- frames- an array of references to the frames of the document- Every Document object has: - forms- an array of references to the forms of the document- Each Form object has an elements array, which has references to the form’s elements- Document also has anchors , links , & images The Document Object Model- DOM 0 is supported by all JavaScript-enabled browsers (no written specification)- DOM 1 was released in 1998- DOM 2 was released in 2000- DOM 3 is the latest approved standard (2004)- DOM 2- Nearly completely supported by FX2- IE7’s support is lacking some important things- The DOM is an abstract model that defines the interface between HTML documents and application programs—an API Documents in the DOM- Documents in the DOM have a treelike structure- A language that supports the DOM must have a binding to the DOM constructs- In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties e.g., <input type = "text" name = "address"> would be represented as an object with two properties, type and name , with the values "text" and "address" = The Document Object Model- Both IE7 and FX2 have ways to show the tree of a document <html> <head> <title> A simple table </title> </head> <body> <table border = "border"> <tr> <th> </th> <th> Apple </th> <th> Orange </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> </tr> </table> </body> </html> 5-7 The DOM structure for table2.html with IE7 5-8 The DOM Inspector display of table2.html with FX2 DOM illustration • A diagram to represent a form object. • The branches show object references. • The primitive variables are listed at the ends of branches Part of the Browser Object Element Access in JavaScript- There are several ways to do it- Example (a document with just one form and one widget): <form action = ""> <input type = "button" name = "pushMe"> </form> 1. DOM address document.forms[0].element[0] Problem:This DOM address is defined by address elements that could change If a button is added before pushme, the DOM address would be wrong. Another Approach: use element names 2. Element names – requires the element and all of its ancestors (except body ) to have name attributes- Example: <form name = "myForm" action = ""> <input type = "button" name = "pushMe"> </form> document.myForm.pushMe Problem : XHTML 1.1 spec doesn’t allow the name attribute on form elements ( validation problem only ) Yet another approach Element Access in JavaScript (continued) 3. getElementById Method (defined in DOM 1)- Example: <form action = ""> <input type = "button"...
View Full Document

{[ snackBarMessage ]}

Page1 / 75

DOM - SOEN287week3 Document Object Model JavaScript...

This preview shows document pages 1 - 15. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online