CHAPTER 7 JavaScripts & HTML Documents
DOM (Document Object Model) Is an API that defines an interface between XHTML documents and application program developed by the World Wide Web Consortium (W3C),. a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML document It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects
DOM (Document Object Model) The DOM is most often used in conjunction with JavaScript. That is, the code is written in JavaScript, but it uses the DOM to access the web page and its elements. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.
DOM (Document Object Model) DOM specification consist of collection of interface similar to java interfaces to define the object method and properties associated with their respective node types. With DOM users can write code to create document, change, add, delete elements and their content.
Status of the DOM DOM Level1 DOM Level2 DOM Level3 W3C recommendation, 1 Oct. 1998. DOM Level2 W3C recommendation, 13 Nov. 2000. DOM Level3 W3C candidate recommendation, 7 Nov. 2003 There are many parts in the DOM (e.g. DOM Level2 contains DOM Level2 Core, DOM Level2 Event, etc.). Generally speaking, we use the term “DOM” for “DOM Core” if no specific indication.
The DOM structure model The DOM presents documents as a hierarchy of Node objects that also implement other, more specialized interfaces. What is a node object? Element, attribute, etc. We can say that “everything” in an XML document is a node object. Some types of nodes may have child nodes of various types, and others are leaf nodes that cannot have anything below them in the document structure.
The DOM presents an HTML document as a tree-structure. The node tree below shows the set of nodes, and the connections between them. The tree starts at the root node and branches out to the text nodes at the lowest level of the tree:
HTML DOM Properties and Methods The programming interface of the DOM is defined by standard properties and methods. Properties are often referred to as something that is (i.e. the name of a node). Methods are often referred to as something that is done (i.e. remove a node).
<html> <body> <p id="intro">Hello World <html> <body> <p id="intro">Hello World!</p> <script type="text/javascript"> txt=document.getElementById("intro").innerHTML; document.write("<p>The text from the intro paragraph: " + txt + "</p>"); </script> </body> </html> getElementById is a method, while innerHTML is a property.
HTML DOM Access Nodes You can access a node in three ways: By using the getElementById() method By using the getElementsByTagName() method By navigating the node tree, using the node relationships
getElementById() method <html> <body> <p id="intro">Hello World!</p> <p>This example demonstrates the <b>getElementById</b> method!</p> <script type="text/javascript"> x=document.getElementById("intro"); document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>"); </script> </body> </html>
getElementsByTagName() <html> <body> <p>Hello World!</p> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>getElementsByTagName</b> method.</p> <script type="text/javascript"> x=document.getElementsByTagName("p"); document.write("Text of first paragraph: " + x[0].innerHTML); </script> </body> </html>
the node relationships <html> <body> <p id="intro">Hello World!</p> <script type="text/javascript"> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html>
HTML DOM - Events Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML elements. Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form
EVENTS AND EVENT HANDLING 15 EVENTS AND EVENT HANDLING Event Tag Attribute abort onAbort blur onBlur change onChange click onClick error onError focus onFocus load onLoad mouseout onMouseOut mouseover onMouseOver reset onReset resize onResize select onSelect submit onSubmit unload onUnload
EVENTS AND EVENT HANDLING 16 EVENTS AND EVENT HANDLING The same attribute can appear in several different tags e.g., The onClick attribute can be in <a> and <input> A text element gets focus in three ways: When the user puts the mouse cursor over it and presses the left button When the user tabs to the element By executing the focus method Event handlers can be specified in two ways: By assigning the event handler script to an event tag attribute onClick = "alert('Mouse click!');“ onClick = "myHandler();“ Example: the load event - triggered when the loading of a document is completed
EVENTS AND EVENT HANDLING 17 EVENTS AND EVENT HANDLING <!-- load.html An example to illustrate the load events --> <html> <head><title> The onLoad event handler></title> <script type = "text/javascript"> <!-- // The onload event handler function load_greeting () { alert("You are visiting the home page of \n" + "Pete's Pickled Peppers \n" + "WELCOME!!!"); } // --> </script> </head> <body onload="load_greeting();"> </body></html>
EVENTS AND EVENT HANDLING 18 EVENTS AND EVENT HANDLING Radio buttons <input type = "radio" name = "button_group“ value = "blue" onClick = "handler()"> The checked property of a radio button object is true if the button is pressed Can’t use the element’s name to identify it, because all buttons in the group have the same name Must use the DOM address of the element, e.g., var radioElement = document.myForm.elements; Now we have the name of the array of elements for (var index = 0; index < radioElement.length; index++) { if (radioElement[index].checked) { element = radioElement[index].value; break; }
EVENTS AND EVENT HANDLING 19 EVENTS AND EVENT HANDLING Event handlers can be specified by assigning them to properties of the JavaScript objects associated with the HTML elements The property names are lowercase versions of the attribute names If the event handler is a function, just assign its name to the property, as in document.myForm.elements[0].onclick = myHandler; This sets the handler for the first element in the form This would need to follow both the handler function and the HTML form If this is done for a radio button group, each element of the array must be assigned - The disadvantage of specifying handlers by assigning them to event properties is that there is no way to use parameters
EVENTS AND EVENT HANDLING 20 EVENTS AND EVENT HANDLING The advantage of specifying handlers by assigning them to event properties are: It is good to keep HTML and JavaScript separate The handler could be changed during use Checking Form Input A good use of JavaScript, because it finds errors in form input before it is sent to the server for processing Things that must be done: Detect the error and produce an alert message Put the element in focus (the focus function) Select the element (the select function) The focus function puts the element in focus, which puts the cursor in the element document.getElementById("phone").focus(); The select function highlights the text in the element To keep the form active after the event handler is finished, have it return false
EVENTS AND EVENT HANDLING 21 EVENTS AND EVENT HANDLING Example – comparing passwords If a password will be used later, the user is asked to type it in twice The program must verify that the second typing of the password is the same as the first The form just has two password input boxes to get the passwords and Reset and Submit buttons The event handler is triggered by the Submit button Handler actions: If no password has been typed in the first box, focus on that box and return false If the two passwords are not the same, focus and select the first box and return false. if they are the same, return true --> SHOW pswd_chk.html
End of lecture..