JavaScript: Window, Document & Form Objects Part 2 Introduction JavaScript is an object-oriented language. An object is a set of variables, functions, etc., that are in some way related. They are grouped together and given a name Internet browsers contain many objects. The hierarchy of objects is known as the Document Object Model (DOM). 2 Introduction Objects may have: Properties: A variable (numeric, string or Boolean) associated with an object. Most properties can be changed by the user. Example: The properties of all HTML elements Methods: Functions associated with an object. Can be called by the user access all HTML elements Example: the alert() method Events: Notification that a particular event has occurred. Can be used by the programmer to trigger responses. Example: the onClick() event. 3 DOM Example 4 In the DOM, all HTML elements are defined as objects. Example: The following example changes the content (the innerHTML) of the

element with id="demo": In the example above, getElementById is a method, while innerHTML is a property. 5 Example Cont. The getElementById Method: The most common way to access an HTML element is to use the id of the element. The innerHTML Property: The easiest way to get the content of an element is by using the innerHTML property. The innerHTML property is useful for getting or replacing the content of HTML elements. The innerHTML property can be used to get or change any HTML element, including and . 6 Finding HTML Elements - The Document Object 7 Method Description Example document.getElementById(id) Find an element by element id Example document.getElementsByTagName(name) Find elements by tag name Example document.getElementsByClassName(name) Find elements by class name Example More advance Example click here Changing HTML Elements - The Document Object Property Description element.innerHTML = new html content Change the inner HTML of an element element.attribute = new value Change the attribute value of an HTML element element.style.property = new style Change the style of an HTML element Method Description element.setAttribute(attribute, value) Change the attribute value of an HTML element 8 The Window Object Window is the fundamental object in the browser. It represents the browser window in which the document appears Its properties include: status: The contents of the status bar (at the bottom of the browser window). For example: window.status = "Hi, there!"; location:The location and URL of the document currently loaded into the window (as displayed in the location bar). For example: alert(window.location); 9 The Window Object Window methods include: alert(): Displays an &aposalert&apos dialog box, containing text entered by the page designer, and an &aposOK&apos button. For example: alert("Hi, there!"); confirm(): Displays a &aposconfirm&apos dialog box, containing text entered by the user, an &aposOK&apos button, and a &aposCancel&apos button. Returns true or false. For example: var response = confirm("Delete File?"); alert(response); prompt(): Displays a message, a box into which the user can type text, an &aposOK&apos button, and a &aposCancel&apos button. Returns a text string. Example: var fileName = prompt("Select File", "file.txt"); alert(fileName); 10 The Window Object Window events include: onLoad() : Usually placed within the tag, for example: would cause the function displayWelcome() to execute automatically every time the document is loaded or refreshed. onUnload(): Usually placed within the tag, for example: would cause the function displayFarewell() to execute automatically every time the document is closed or refreshed. 11 The Document Object The Document object represents the HTML document displayed in a browser window. It has properties, methods and events that allow the programmer to change the way the document is displayed in response to user actions or other events. 12