CIS 461 Web Development I

CIS 461 Web Development I HTML DOM part II Jongwook Woo, PhD jwoo5@calstatela.edu California State University, Los Angeles Computer Information System Department

Content • DOM Node Access • DOM Events

DOM Node Access (Cont’d) • 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 • The getElementById() Method • returns the element with the specified ID: • Syntax • node.getElementById("id"); • Example • document.getElementById("intro"); • The example gets the element with id="intro":

DOM Node Access (Cont’d) getElementsByTagName() Method • The getElementsByTagName() Method • returns all elements with a specified tag name. • Syntax • node.getElementsByTagName("tagname"); • Example 1 • document.getElementsByTagName("p"); • The example returns a nodeList of all <p> elements in the document: • Example 2 • document.getElementById('main').getElementsByTagName("p"); • The example returns a nodeList of all <p> elements • that are descendants of the element with id="main":

DOM Node Access (Cont’d) getElementsByTagName() Method • returns a node-list. • That is, elements • A node-list is an array of nodes • Example • x=document.getElementsByTagName("p"); • The code selects all <p> nodes in a node-list: • The nodes can be accessed by index number. • To access the second <p> you can write: • y=x[1]; • Note: The index starts at 0.

DOM Node Access (Cont’d) getElementsByTagName() Method <html> <body> <p>Hello World!</p> <p>The DOM is very useful!</p> <script type="text/javascript"> x=document.getElementsByTagName("p"); document.write("Text of second paragraph: " + x[1].innerHTML); </script> </body> </html> • Display “The DOM is very useful!” • For x[0].innerHTML • Display “Hello World!” • For x[2].innerHTML • Display Nothing – out of bounce error

DOM Node Access (Cont’d) getElementsByTagName() Method • DOM Node List Length • The length property defines the number of nodes in a node-list. • You can loop through a node-list by using the length property: • Example x=document.getElementsByTagName("p");for (i=0;i<x.length;i++){ document.write(x[i].innerHTML); document.write("<br />");} • Get all <p> element nodes • For each <p> element, output the value of its text node • For the previous slides: • x.length: 2 • x[0].innerHTML: Hello World! • x[1].innerHTML: The DOM is very useful!

DOM Node AccessNavigating Node Relationships • With parentNode, firstChild, and lastChild • <html> <body> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates node relationships.</p> </div> </body></html> • For the “body” element, • the first p element is the first child node (firstChild) • the div element is the last child node (lastChild) • The parent node (parentNode) of the first p element and the div element • For the “div” element • the parent node of the p elements inside the div element

DOM Node AccessNavigating Node Relationships (Cont’d) • to access the text of an element: • The firstChild property can also be used • Example • <html> <body> <p id="intro">Hello World!</p> <script type="text/javascript"> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body></html>

DOM Node AccessNavigating Node Relationships (Cont’d) • DOM Root Nodes • document.documentElement • returns the root node of the document • document.body • gives direct access to the <body> tag

DOM Events • Events • Events are actions that can be detected by JavaScript. • Every element on a web page has certain events • which can trigger JavaScript functions. • 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 • A keystroke

onload and onUnloadEvents • triggered when the user enters or leaves a page. • The onload event • often used to check the visitor's browser type and version, • load the proper version of the web page based on that information. • Both the onload and onUnload events • often used to deal with cookies that should be set when a user enters or leaves a page. • For example, you could have a popup to display an alert after loading a page

Onload Event • Alert "Page is loaded" • immediately after a page is loaded: <html><head> <script type="text/javascript"> function load() { alert("Page is loaded"); } </script></head><body onload="load()"> <h1>Hello World!</h1></body> </html>

onChange Events • often used in combination with validation of form fields. • Example E-mail: <input type="text" id="email" onchange="checkEmail()" /> • The checkEmail() function will be called • whenever the user changes the content of the e-mail field:

onChange Events • example when a user changes the content of an input field: • http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange • The toUpperCase() method of Javascript converts a string to uppercase letters (http://www.w3schools.com/jsref/jsref_touppercase.asp) • string.toUpperCase() <html><head> <script type="text/javascript"> function upperCase(x) { var y=document.getElementById(x).value; //input document.getElementById(x).value=y.toUpperCase(); //output } </script></head><body> Enter your name: <input type="text" id="fname” onchange="upperCase(this.id)"></body> </html>

CIS 461 Web Development I