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 browser’s 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 Document Node Element Node Parent Node Child Node Text Node

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 window’s chrome

22. Creating a window

24. window.open() 參數 • height=100 視窗高度　　 • width=400 視窗寬度 • top=0 視窗左上角y座標 • left=0 視窗左上角x座標 • toolbar=no 是否工具列，yes為顯示 • menubar 選單 • scrollbars 捲軸 • resizable=no 是否允許改變視窗大小，yes為允許 • location=no 是否顯示網址列，yes為顯示 • status=no 是否顯示狀態列，yes為顯示 window.open ('page.html', 'targetWindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

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. <script type="text/javascript"> var answer = prompt("請輸入您的姓名：", "?"); if (answer) { alert("您好！\n" + answer); } else { alert("真可惜！"); } </script>

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; rv:1.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 <script type="text/javascript"> //test for Firefox/x.x or Firefox x.x (ignoring remaining digits); if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){  var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number if (ffversion>=3)  document.write("You're using FF 3.x or above") else if (ffversion>=2)  document.write("You're using FF 2.x") else if (ffversion>=1)  document.write("You're using FF 1.x")}else document.write("n/a")</script>

33. Detecting IE x.x <script type="text/javascript"> //test for MSIE x.x; if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number if (ieversion>=8) document.write("You're using IE8 or above") else if (ieversion>=7) document.write("You're using IE7.x") else if (ieversion>=6) document.write("You're using IE6.x") else if (ieversion>=5) document.write("You're using IE5.x") } else document.write("n/a") </script>

34. The document Object • The document object holds the real content of the page • document.forms[] property • Array of <form> • document.forms.length 表單數量 • document.forms[0] 存取第一個表單 • document.forms["formName"] 依名稱存取表單 • document.formName

35. The document Object • document.images[] property • Array of <img>

36. The document Object • document.write() method • Append output to the document • Can include HTML tags • After a page loads, the browser’s 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

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("salesResults");