Computer Information System Information System California State University Los Angeles Jongwook Woo...
If you can't read please download the document
Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I HTML DOM part II Jongwook
Computer Information System Information System California State
University Los Angeles Jongwook Woo CIS 461 Web Development I HTML
DOM part II Jongwook Woo, PhD [email protected] California State
University, Los Angeles Computer Information System Department
Slide 3
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System Content nDOM Node Access nDOM Events
Slide 4
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System DOM Node Access (Contd) 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":
Slide 5
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System DOM Node Access (Contd) 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":
Slide 6
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System DOM Node Access (Contd) 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.
Slide 7
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System DOM Node Access (Contd) 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
Slide 8
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System DOM Node Access (Contd) 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!
Slide 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
Slide 10
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System DOM Node Access Navigating Node Relationships
(Contd) 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);
Slide 11
Jongwook Woo CSULA Jongwook Woo Computer Information System
Information System DOM Node Access Navigating Node Relationships
(Contd) nDOM Root Nodes mdocument.documentElement returns the root
node of the document mdocument.body gives direct access to the
tag
Slide 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
Slide 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
Slide 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!
Slide 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:
Slide 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:
