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

3. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Content nDOM Node Access nDOM Events

4. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access (Cont’d) nYou can access a node in three ways: mBy using the getElementById() method mBy using the getElementsByTagName() method mBy navigating the node tree, using the node relationships nThe getElementById() Method mreturns the element with the specified ID: mSyntax –node.getElementById("id"); mExample –document.getElementById("intro"); The example gets the element with id="intro":

5. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access (Cont’d) getElementsByTagName() Method nThe getElementsByTagName() Method mreturns all elements with a specified tag name. nSyntax mnode.getElementsByTagName("tagname"); nExample 1 mdocument.getElementsByTagName("p"); –The example returns a nodeList of all elements in the document: nExample 2 mdocument.getElementById('main').getElementsByTagName ("p"); –The example returns a nodeList of all elements that are descendants of the element with id="main":

6. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access (Cont’d) getElementsByTagName() Method nreturns a node-list. mThat is, elements mA node-list is an array of nodes nExample mx=document.getElementsByTagName("p"); –The code selects all nodes in a node-list: –The nodes can be accessed by index number. To access the second you can write: –y=x[1]; Note: The index starts at 0.

7. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access (Cont’d) getElementsByTagName() Method Hello World! The DOM is very useful! x=document.getElementsByTagName("p"); document.write("Text of second paragraph: " + x[1].innerHTML); nDisplay “The DOM is very useful!” nFor x[0].innerHTML mDisplay “Hello World!” nFor x[2].innerHTML mDisplay Nothing – out of bounce error

8. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access (Cont’d) getElementsByTagName() Method nDOM Node List Length mThe length property defines the number of nodes in a node-list. mYou can loop through a node-list by using the length property: nExample x=document.getElementsByTagName("p"); for (i=0;i "); } mGet all element nodes –For each 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!

9. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access Navigating Node Relationships nWith parentNode, firstChild, and lastChild m Hello World! The DOM is very useful! This example demonstrates node relationships. mFor 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 mFor the “div” element –the parent node of the p elements inside the div element

10. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access Navigating Node Relationships (Cont’d) nto access the text of an element: mThe firstChild property can also be used nExample m Hello World! x=document.getElementById("intro"); document.write(x.firstChild.nodeValue);

11. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Access Navigating Node Relationships (Cont’d) nDOM Root Nodes mdocument.documentElement –returns the root node of the document mdocument.body –gives direct access to the tag

12. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Events nEvents mEvents are actions that can be detected by JavaScript. mEvery element on a web page has certain events –which can trigger JavaScript functions. nExamples of events: mA mouse click mA web page or an image loading mMousing over a hot spot on the web page mSelecting an input box in an HTML form mSubmitting an HTML form mA keystroke

13. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System onload and onUnload Events ntriggered when the user enters or leaves a page. nThe onload event moften used to check the visitor's browser type and version, –load the proper version of the web page based on that information. nBoth the onload and onUnload events moften used to deal with cookies that should be set when a user enters or leaves a page. mFor example, you could have a popup to display an alert after loading a page

14. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Onload Event nAlert "Page is loaded" mimmediately after a page is loaded: function load() { alert("Page is loaded"); } Hello World!

15. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System onChange Events noften used in combination with validation of form fields. nExample E-mail: mThe checkEmail() function will be called –whenever the user changes the content of the e-mail field:

16. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System onChange Events nexample when a user changes the content of an input field: mhttp://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchangehttp://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange mThe toUpperCase() method of Javascript converts a string to uppercase letters (http://www.w3schools.com/jsref/jsref_touppercase.asp)http://www.w3schools.com/jsref/jsref_touppercase.asp –string.toUpperCase() function upperCase(x) { var y=document.getElementById(x).value; //input document.getElementById(x).value=y.toUpperCase(); //output } Enter your name: