Scribd
Upload
21 views

Chapter 5-1

The document discusses the Document Object Model (DOM) and Dynamic HTML (DHTML). It defines the DOM as an API that provides a structured representation of an HTML or XML document and defines how that structure can be accessed from scripts. It describes how the DOM views a document as a tree structure of nodes that can be traversed and manipulated. It provides examples of common DOM properties, methods, and events. It then defines DHTML as combining HTML, JavaScript, DOM and CSS to create dynamic and interactive web pages. It provides examples of how JavaScript and the DOM can be used to dynamically change HTML elements and styles in DHTML.

Uploaded by

Sabona
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

Chapter 5-1

The document discusses the Document Object Model (DOM) and Dynamic HTML (DHTML). It defines the DOM as an API that provides a structured representation of an HTML or XML document and defines how that structure can be accessed from scripts. It describes how the DOM views a document as a tree structure of nodes that can be traversed and manipulated. It provides examples of common DOM properties, methods, and events. It then defines DHTML as combining HTML, JavaScript, DOM and CSS to create dynamic and interactive web pages. It provides examples of how JavaScript and the DOM can be used to dynamically change HTML elements and styles in DHTML.

Uploaded by

Sabona
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Unit 5

1. Document Object Model(DOM)


1.1 Introduction to DOM
 The Document Object Model is an API for HTML and XML
documents. It does two things for web developers:
 it provides a structural representation of the document, and it
defines the way that structure is to be accessed from script, allowing
you to get at the web page as a structured group of nodes.
 Essentially, it connects web pages to scripts or programming
languages.
 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.
Continued…..
Every element in a document—the document as a whole, the head,
tables within the document, table headers, text within the table
cells—is part of the document object model for that document, so
they can all be accessed and manipulated using the DOM and a
scripting language like JavaScript.
1.2 DOM Nodes and Node Tree
The HTML DOM views a HTML document as a tree-structure.
The tree structure is called a node-tree.
All nodes can be accessed through the tree. Their contents can be
modified or deleted, and new elements can be created.
Continued…
Continued…..
Look at the following HTML fragment:

 <html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above:
 The <html> node has no parent node; it is the root node
 The parent node of the <head> and <body> nodes is the <html> node
 The parent node of the "Hello world!" text node is the <p> node
Continue….

And
 The <html> node has two child nodes; <head> and <body>
 The <head> node has one child node; the <title> node
 The <title> node also has one child node; the text node "DOM
Tutorial“
 The <h1> and <p> nodes are siblings, and both child nodes of
<body>
 The “DOM Lesson one” is the child of <h1> node and “Hello
world” is the child node of <p> node
1.3 DOM Properties and Methods
Some DOM properties:
 x.innerHTML - the text value of x
 x.nodeName - the name of x
 x.nodeValue - the value of x
 x.parentNode - the parent node of x and many more
continued…
 x.childNodes - the array of child nodes of x
 x. firstChild - the first direct child of the current node
 x.lastChild - the last child of the current node
Some DOM methods:
 document.getElementById(id) – get the element with a specified id
 document.getElementsByTagName(name) – get all elements with a
specified tag name
 document.createElement() – creates new HTML tag
 document.createTextNode() – creates new text content
 x.appendChild(node) – insert a child node to x
 x.removeChild(node) – remove a child node from x
1.4 DOM Node Access

With the DOM, you can access every node in an HTML document. 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
Practice
1. Can you write a DOM program that can change the content of the
given <p> tag?
2. Write a DOM program that returns the title of the document
3. Write a program that adds a <p> child to HTML <body>.
1.5 DOM Events

Every element on a web page has certain events which can trigger
JavaScript functions.
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
 A keystroke
Events are normally used in combination with functions, and the
function will not be executed before the event occurs.
2. Dynamic HTML(DHTML)
2.1 Introduction to DHTML
DHTML stands for Dynamic HTML.
It is the art of combining HTML, JavaScript, DOM, and CSS.
DHTML is not a scripting language like JavaScript.
It is a feature that allows your browser to be dynamic.
Web pages built with Dynamic HTML are richer and more interactive,
react faster, and don’t use much bandwidth.
The major elements of DHTML include HTML code, scripting
languages such as JavaScript, the Document Object Model, Cascading
Style Sheets, multimedia filters, and the browser itself.
2.2 DHTML JavaScript
A JavaScript can also be used to change the content or attributes of HTML
elements. To change the content of an HTML element:
document.getElementById(id).innerHTML = new HTML
To change the attribute of an HTML element:
document.getElementById(id).attribute = new value
A JavaScript can also change the style of HTML elements. To change the style
of an HTML element:
document.getElementById(id).style.property = new style
2.3 DHTML DOM
The HTML DOM defines the objects and properties of all HTML elements,
and the methods to access them.
 In other words, the HTML DOM is a standard for how to get, change, add, or
delete HTML elements.
Using HTML DOM, it is possible to change content of HTML elements.
continued…

Example: The following example changes the content of an h1 element:


<html>
<body>
<h1 id="header">Old Header</h1>
<script language="JavaScript">
document.getElementById("header").innerHTML="New Header";
</script>
</body>
</html>
Example: The following example changes the src attibute of an img element:
<html>
<body>
<img id="image" src="smiley.gif">
<script language="JavaScript">
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
2.4 DHTML CSS
To change the style of the current HTML element, use the following
statement:
this.style.property=new style
Example: a title that changes its color when you click on it
<html>
<body>
<h1 onclick="this.style.color='red'">Click Me!</h1>
</body>
</html>
To change the style of a specific HTML element, use the following
statement:
document.getElementById(id).style.property=newstyle
continued…
Example: a title that changes its color when you click on it
<html>
<body>
<h1 id="h1"
onclick="document.getElementById('h1').style.color='red'">Click Me!
</h1>
</body>
</html>
Practice question
1. Create a link that changes its color to green when a mouse is over it.
2. Create a simple remark message using DIV that changes its font size
when a mouse is over it.
End of ch-5
I STS
I E NT
ER SC
M P UT
E CO
L I K
T H I NK

You might also like