UNIT IV

Document object model

---------------------------------------------
2 marks .

1. What is DOM?
The Document Object Model (DOM) is a programming interface for HTML and XML
documents. It represents the page so that programs can change the document structure,
style, and content.

2. What is an event?

An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
 An HTML web page has finished loading
 An HTML input field was changed
 An HTML button was clicked

3. What is XML?
 Xml (eXtensible Markup Language) is a mark up language.
 XML is designed to store and transport data.
 Xml was released in late 90’s. it was created to provide an easy to use and store
self describing data.
 XML became a W3C Recommendation on February 10, 1998.
 XML is not a replacement for HTML.
 XML is designed to be self-descriptive.
 XML is designed to carry data, not to display data.
 XML tags are not predefined. You must define your own tags.
 XML is platform independent and language independent.

4. What is DTD?
XML Document Type Declaration commonly known as DTD is a way to describe
precisely the XML language. DTDs check the validity of, structure and vocabulary of
an XML document against the grammatical rules of the appropriate XML language.

5. List out some of the HTML event attributes. (APRIL/MAY 2011)

onload, onclick, ondblclick, onmousedown,
onmouseup, onmousemove, onfocus, onblur,
onkeypress, onkeydown, onselect, onchange, onsubmit, onreset etc.

6. What is the important feature of dynamic positioning? (APRIL/MAY 2008)

Dynamic positioning allows you to tell the browser exactly where to put a block of
content without using tables.

7. What is DHTML?
The combination of HTML plus JavaScript and the DOM is referred to as Dynamic
HTML (DHTML), and an HTML document that contains scripting is called
a dynamic document.

1 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------
8. What is XML Namespace? (APRIL/MAY 2011)
An XML namespace is a collection of element and attribute names. Each namespace
has a unique name that provides a means for document authors to unambiguously
refer to elements with the same name in order to prevent collisions.

9. What is the use of XML declaration?

XML declaration is a special tag used to specify the version of XML used to write the
document and optionally some additional meta-information about the document such
as the character set/encoding used. For e.g the syntax of XML declaration is

<? XML VERSION=”1.0”?>

10. How do you access the elements from the html documents?
There are two ways to access the elements from the documents
1. getElementById( )
2. getElementByName( ) methods

2 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

Five/Ten marks solved question

1. Explain the document object model in java script? Explain with example. (5-10
MARKS)
 The original motivation for the standard DOM was to provide a specification that would
allow Java programs and JavaScript scripts that deal with XHTML documents to be
portable among various browsers.
 The DOM is an application programming interface (API) that defines an interface
between XHTML documents and application programs.
 It is an abstract model because it must apply to a variety of application programming
languages.
 Each language that interfaces with the DOM must define a binding to that interface.
 The actual DOM specification consists of a collection of interfaces, including one for
each document tree node type.
 They define the objects, methods, and properties that are associated with their
respective node types.
 With the DOM, users can write code in programming languages to create documents,
move around in their structures, and change, add, or delete elements and their content.
 Documents in the DOM have a treelike structure, but there can be more than one tree in
a document.
 Because the DOM is an abstract interface, it does not dictate that documents be
implemented as trees or collections of trees.

Programming example on DOM :

3 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

Here is DOM object tree:

4 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------
2. Explain how to access elements in java script.

Javascript - document.getElementById() method

getElementById
The getElementById() is a DOM method used to return the element that has the ID attribute
with the specified value. This is one of the most common methods in the HTML DOM and
is used almost every time we want to manipulate an element on our document. This method
returns null if no elements with the specified ID exists. The ID should be unique within a
page. However, if more than one element with the specified ID exists, it returns the last
element in the javascript code.
Example-1
In the following example, there exists a paragraph tag with the inner text "GetElementById"
and with an id called "element". Using the DOM method "document.getElementById()" the
text inside the paragraph tag is accessed and the value is displayed in the output. Without
".innerHtml" the document.getElementById can't read the inner text part of any tag.
<html>
<body>
<p id="element">GetElementById</p>
<script>
var s = document.getElementById("element").innerHTML;
document.write(s);
</script>
</body>
</html>
Output
GetElementById
GetElementById

Example-2
In the following example, using the DOM method "getElementById" we have
replaced the original text part "GetElementById" with the text "Tutorix" and the result
is displayed in the output.
<html>
<body>
<p id="element">GetElementById</p>
<script>
document.getElementById("element").innerHTML = "Tutorix";
</script>
</body>
</html>
Output
Tutorix

5 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

Example 4: Get the element with id="demo" and change its color:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the color of this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("demo");
x.style.color = "red";
}
</script>
</body>
</html>

OUTPUT:
Before clicking: After clicking on button:

6 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------
HTML | DOM getElementsByName( ) Method
The getElementsByName() method returns collection of all elements of particular document
by name. This collection is called node list and each element of the node list can be visited
with the help of the index.
Syntax:
document.getElementsByName(name);
Parameter:This function accepts name of document.

Return Type:This function returns collection of elements.

By using the build in method length we can find the total number of elements presents inside
that particular element. Below example illustrates it clearly.

Output:
Before Clicking: After Clicking:

7 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

3. Explain events and event handling in java script (10 M)

JavaScript | Events:
The change in the state of an object is known as an Event. In html, there are various events
which represents that some activity is performed by the user or by the browser. When
javascript code is included in HTML, js react over these events and allow the execution. This
process of reacting over the events is called Event Handling. Thus, js handles the HTML
events via Event Handlers.

Javascript has events to provide a dynamic interface to a webpage. These events are hooked
to elements in the Document Object Model(DOM

For example, when a user clicks over the browser, add js code, which will execute the task to
be performed on the event.

Some of the HTML events and their event handlers are:

8 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

Let`s see examples on above events.

Click Event:

1) onclick events: This is a mouse event and provokes any logic defined if the user clicks on the
element (button) it is bound to.

Code #1:
<!doctype html>
<html>

9 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------
<head>
<script>
function hiThere()
{
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button" onclick="hiThere()">Click me
event</button>
</body>
</html>

2) onmouseover event: This event corresponds to hovering the mouse pointer over the element and its children,
to which it is bound to.

Code #2:

<!doctype html>
<html>
<head>
<script>
function hov()
{
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseover="hov()"
style="background-
color:green;height:200px;width:200px;">
</div>
</body>
</html>

10 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

Keyboard Event:
3) onkeyup event: This event is a keyboard event and executes instructions whenever a key is released after
pressing.
Code #2:
<!doctype html>
<html>
<head>
<script>
var a = 0;
var b = 0;
var c = 0;
function changeBackground()
{
var x = document.getElementById('bg');
bg.style.backgroundColor = 'rgb('+a+', '+b+',
'+c+')';
a += 1;
b += a + 1;
c += b + 1;
if (a > 255) a = a - b;
if (b > 255) b = a;
if (c > 255) c = b;
}
</script>
</head>
<body>
<input id="bg" onkeyup="changeBackground()"
placeholder="write something" style="color:#fff">
</body>
</html>

11 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

4) onmouseout event: Whenever the mouse cursor leaves the element which handles a mouseout event, a
function associated with it is executed.

Code #4:
<!doctype html>
<html>
<head>
<script>
function out()
{
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseout="out()"
style="background-color:green;height:200px;width:200px;">
</div>
</body>
</html>

12 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

4. Explain HTML Form Validation (5/10 marks)

1. First, it determines whether the user typed the initial password (in the first input box)
by testing the value of the element against the empty string. If no password has been
typed into the first field, the function calls alert to produce an error message and
returns false.

2. The second test determines whether the two typed passwords are the same. If they
are different, once again the function calls alert to generate an error message and
returns false.
If they are the same, it returns true.

13 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

We now consider an example that checks the validity of the form values for a name and phone number
obtained from text boxes. The pattern for matching names [LastName, FirstName, MiddleName] is as
follows:

/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/

The pattern for phone numbers is as follows:

/^d{3}-\d{8}$/

The following is the XHTML document, validator.html, that displays the text boxes for a customer’s
name and phone number:

14 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

15 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------

5. Explain xml with example.

Extensible Markup Language (XML) is a markup language that defines a set of rules
for encoding documents in a format that is both human-readable and machine-
readable.The design goals of XML focus on simplicity,generality,and usability across
the Internet.It is a textual data format with strong support via Unicode for different
human languages. Although the design of XML focuses on documents, the language is
widely used for the representation of arbitrary data structuressuch as those used in web
services.
1. XML stands for eXtensible Markup Language
2. XML is a markup language like HTML
3. XML is designed to store and transport data
4. XML is designed to be self-descriptive
XML | Syntax
Below is a complete XML document to discuss each component in detail

<?xml version="1.0" encoding="UTF-8"?>

<message>
<to>Students</to>
<from>Teacher</from>
<subject>Regarding assignment submission</subject>
<text>All students will have to submit assignment by tomorrow.</text>
</message>

Syntax rules for XML declaration

<?xml version="1.0" encoding="UTF-8"?>

Below is the explanation of each point.

 This line is called XML Prolog or XML declaration.
 This line is optional i.e, it can be either used or not in an XML document. However, it
should be the very first line if used.
 The version=”1.0″ is the version of the XML currently used. There are various versions
of XML available.
 The encoding=”UTF-8″ specifies the character encoding used while writing an XML
document, for example, êèé is for French and so on. Its default value is “UTF-8”. For
more about character encoding click here.
 This declaration is case sensitive for example “xml” should must be in lower case in .
Syntax rules for Root Element:
 Every XML files should have one or more Root elements to avoid error.
For example below code is wrong because it’s not containing Root element.
filter_none
brightness_4
<to>Students</to>
<from>Teacher</from>

16 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI

 UNIT IV
Document object model
---------------------------------------------
<subject>Regarding assignment submission</subject>
<text>All students will have to submit assignment by tomorrow.</text>
 In the first example the Root element is <message> and all the remaining elements
<to>, <from> etc is the child element and reside within the root element.
 It is case sensitive.
Syntax rules for XML elements:
 The XML element should have a closing element for example <text category =
“message”>Hi</text> is correct but <text category = “message”>Hi is not correct
because it does not contain the closing element and it will throw an error and vice-
versa.
 The elements in XML should be nested properly otherwise it will throw an error. For
example <to><from>Geeks</from></to> is nested correctly
but <to><from>Geeks</to></from> is wrong because if <from> is opened inside the
<to> element then this should also end inside of the </to> element.
 It is also case sensitive i.e, the starting and closing element should be in the same case.
For example <to>….</to> is correct but <to>…..</To> is not correct and it will throw
an error.
Syntax rule for XML Attributes:
 The XML attribute is having two part one is Name and other is its value. It resides
inside of the opening of an XML element. For example: <text category =
“message”>All students will have to submit the assignment by tomorrow.</text>
Here category is the attribute name and message is its value and the attribute value
should either be in a single quotation or in double quotation otherwise it will throw an
error. The Attribute Name is written without any quotation.
 The XML attribute is also case sensitive.
 An XML element can have multiple attributes but can not have the same attribute
names in the same element.
For example: <text category =”message” purpose = “greet”>GeeksforGeeks</text>
Above attributes is correct because of having multiple attributes with the different
attribute name.
<text category =”message” category = “greet”>GeeksforGeeks</text>
above attribute is wrong because of having the same attribute name in a single element.

17 Prof. Raju Vathari KLE BCA COLLEGE CHIKODI