1. Internet & World Wide Web How to Program, 5/e

2. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.2 Revised by Dr. T. Tran for CSI3140

3. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.3 Revised by Dr. T. Tran for CSI3140

4.  The Document Object Model (DOM) is an API that allows programs to interact with HTML (or XML) documents  JavaScript programs access the DOM through a host object named document  So, the DOM gives you scripting access to all the elements on a web page. Using JavaScript, you can create, modify and remove elements in the page dynamically. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 4 Revised by Dr. T. Tran for CSI3140

5. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.5 Revised by Dr. T. Tran for CSI3140

6.  getElementById( String ) method  Returns an object called DOM node corresponding to the HTML element with the id attribute specified by the String argument, or returns null if no document element has the specified id attribute  Every piece of an HTML5 page (elements, attributes, text, etc.) is modeled/represented by a DOM node  The DOM nodes of a document make up the document’s DOM tree, which describes the relationships among elements  Nodes are related to each other through child-parent relationships  A node can have multiple children, but only one parent  Nodes with the same parent node are referred to as siblings  The html node in a DOM tree is called the root node, because it has no parent  Today’s desktop browsers provide developer tools that can display a virtual representation of a document’s DOM tree ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 6 Revised by Dr. T. Tran for CSI3140

7. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.7 Revised by Dr. T. Tran for CSI3140

8. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.8 Revised by Dr. T. Tran for CSI3140

9. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.9 Revised by Dr. T. Tran for CSI3140

10. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.10 Revised by Dr. T. Tran for CSI3140

11.  The next example demonstrates several DOM node features and two additional document- object methods.  It allows you to highlight, modify, insert and remove elements.  CSS class “ highlighted” is applied dynamically to elements in the document as we add, remove and select elements using the form. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 11 Revised by Dr. T. Tran for CSI3140

12. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.12 Revised by Dr. T. Tran for CSI3140

13.  We’ll manipulate the HTML5 document dynamically by modifying its DOM. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 13 Revised by Dr. T. Tran for CSI3140

14. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.14 Revised by Dr. T. Tran for CSI3140

15. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.15 Revised by Dr. T. Tran for CSI3140

16. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.16 Revised by Dr. T. Tran for CSI3140

17. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.17 Revised by Dr. T. Tran for CSI3140

18.  The JavaScript code declares two variables  Variable currentNode keeps track of the currently highlighted node—the functionality of each button depends on which node is currently selected.  Variable idcount is used to assign a unique id to any new elements that are created.  The remainder of the JavaScript code contains event-handling functions for the buttons and two helper functions that are called by the event handlers. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 18 Revised by Dr. T. Tran for CSI3140

19. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.19 Revised by Dr. T. Tran for CSI3140

20. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.20 Revised by Dr. T. Tran for CSI3140

21. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.21 Revised by Dr. T. Tran for CSI3140

22. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.22 Revised by Dr. T. Tran for CSI3140

23. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.23 Revised by Dr. T. Tran for CSI3140

24. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.24 Revised by Dr. T. Tran for CSI3140

25. Finding and Highlighting an Element Using getElementById, setAttribute and getAttribute  The first row of the form allows the user to enter the id of an element into the text field and click the Get By Id button to find and highlight the element. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 25 Revised by Dr. T. Tran for CSI3140

26. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.26 Revised by Dr. T. Tran for CSI3140

27.  The DOM element methods setAttribute and getAttribute allow you to modify an attribute value and get an attribute value, respectively. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 27 Revised by Dr. T. Tran for CSI3140

28.  document object’s createElement( String ) method  Creates a new DOM node representing an element, given a String argument representing the element type (such as “p”, “div”, etc.). Although this method creates an element, it does not insert the element on the page.  document object’s createTextNode( String ) method  Creates a DOM node that contains only text. Given a String argument, this method inserts the string into the text node.  Method appendChild( Node )  Inserts the argument Node to the end of the list of children of this node (i.e., the node on which this method is called).  Property parentNode contains the parent of this node  insertBefore( Node, Node ) method  Inserts the first argument Node in the list of children of this node, immediately before the second argument Node (or at the end of child list if the second argument is null).  replaceChild( Node, Node ) method  In the list of children of this node, replaces the second argument Node with the first argument Node.  removeChild( Node ) method  Removes the argument Node from this node’s list of children. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 28 Revised by Dr. T. Tran for CSI3140

29. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.29 Revised by Dr. T. Tran for CSI3140

30. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.30 Revised by Dr. T. Tran for CSI3140

31. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.31 Revised by Dr. T. Tran for CSI3140

32. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.32 Revised by Dr. T. Tran for CSI3140

33. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.33 Revised by Dr. T. Tran for CSI3140

34.  DOM has collections—groups of related objects on a page  DOM collections are accessed as properties of DOM objects, such as the document object or a DOM node  The document object has properties containing the images collection, links collection, forms collection, and anchors collection  Contain all the elements of the corresponding type on the page  The collection’s length property specifies the number of items in the collection ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 34 Revised by Dr. T. Tran for CSI3140

35.  You access the elements of the collection using indices in square brackets  item method of a DOM collection  An alternative to the square bracketed indices  Receives an integer argument and returns the corresponding item in the collection  namedItem method  receives an element id as an argument and returns the element with that id in the collection.  href property of a DOM link node  Refers to the link’s href attribute  Collections allow easy access to all elements of a single type in a page  Useful for gathering elements into one place and for applying changes across an entire page ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 35 Revised by Dr. T. Tran for CSI3140

36. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.36 Revised by Dr. T. Tran for CSI3140

37. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.37 Revised by Dr. T. Tran for CSI3140

38. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.38 Revised by Dr. T. Tran for CSI3140

39. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.39 Revised by Dr. T. Tran for CSI3140

40.  An element’s style can be changed dynamically  E.g., in response to user events  Can create mouse-hover effects, interactive menus and animations  The document object’s body property refers to the body element  The setAttribute method is used to set the style attribute with the user-specified color for the background-color CSS property.  If you have predefined CSS style classes defined for your document, you can also use the setAttribute method to set the class attribute. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 40 Revised by Dr. T. Tran for CSI3140

41. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.41 Revised by Dr. T. Tran for CSI3140

42. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.42 Revised by Dr. T. Tran for CSI3140

43. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.43 Revised by Dr. T. Tran for CSI3140

44.  The next example introduces the window object’s setInterval and clearInterval methods, combining them with dynamic styles to create animated effects.  This example is a basic image viewer that allows you to select a book cover and view it in a larger size. When the user clicks a thumbnail image, the larger version grows from the top-left corner of the main image area. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 44 Revised by Dr. T. Tran for CSI3140

45. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.45 Revised by Dr. T. Tran for CSI3140

46. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.46 Revised by Dr. T. Tran for CSI3140

47. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.47 Revised by Dr. T. Tran for CSI3140

48. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.48 Revised by Dr. T. Tran for CSI3140

49. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.49 Revised by Dr. T. Tran for CSI3140

50. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.50 Revised by Dr. T. Tran for CSI3140

51. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.51 Revised by Dr. T. Tran for CSI3140

52. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.52 Revised by Dr. T. Tran for CSI3140

53. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.53 Revised by Dr. T. Tran for CSI3140

54. ©1992-2012 by Pearson Education, Inc. All Rights Reserved.54 Revised by Dr. T. Tran for CSI3140

55.  setInterval method of the window object  Repeatedly executes a statement on a certain interval  Takes two parameters:  A statement to execute repeatedly  An integer specifying how often to execute it, in milliseconds  Returns a unique identifier to keep track of that particular interval.  window object’s clearInterval method  Stops the repetitive calls of object’s setInterval method  Pass to clearInterval the interval identifier that setInterval returned  Anonymous function  Defined with no name—it’s created in nearly the same way as any other function, but with no identifier after the keyword function. ©1992-2012 by Pearson Education, Inc. All Rights Reserved. 55 Revised by Dr. T. Tran for CSI3140