Scribd
Upload
25 views

Chp05 HTML DOM

The document discusses Dynamic HTML (DHTML) and its components and uses. DHTML combines features of HTML, CSS, JavaScript, and the DOM to create dynamic and interactive web pages. It allows animating text, images, and adding effects like drop-down menus. DHTML is used to build animated pages in real-time and add features like tickers that automatically refresh content.

Uploaded by

Aditi sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views

Chp05 HTML DOM

The document discusses Dynamic HTML (DHTML) and its components and uses. DHTML combines features of HTML, CSS, JavaScript, and the DOM to create dynamic and interactive web pages. It allows animating text, images, and adding effects like drop-down menus. DHTML is used to build animated pages in real-time and add features like tickers that automatically refresh content.

Uploaded by

Aditi sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

HTML DOM

(HYPERTEXT MARKUP LANGUAGE


– DOCUMENT OBJECT MODEL)
1 CSCI110
Source: w3schools.com
DHTML
 DHTML stands for Dynamic Hypertext Markup
language i.e., Dynamic HTML.
 Dynamic HTML is not a markup or programming
language but it is a term that combines the features of
various web development technologies for creating the
web pages dynamic and interactive.
 The DHTML application was introduced by Microsoft
with the release of the 4th version of IE (Internet
Explorer) in 1997.

2
COMPONENTS OF DYNAMIC HTML
 HTML
 CSS

 JavaScript

 DOM.

 HTML
 HTML is a client-side markup language, which is a core component of the
DHTML. It defines the structure of a web page with various defined basic
elements or tags.
 CSS
 CSS stands for Cascading Style Sheet, which allows the web users or
developers for controlling the style and layout of the HTML elements on the
web pages. 3
CONTINUE..
 JavaScript
 JavaScript is a scripting language which is done on a client-side. The
various browser supports JavaScript technology. DHTML uses the
JavaScript technology for accessing, controlling, and manipulating the
HTML elements. The statements in JavaScript are the commands which
tell the browser for performing an action.
 DOM
 DOM is the document object model. It is a w3c standard, which is a
standard interface of programming for HTML. It is mainly used for defining
the objects and properties of all elements in HTML.

4
USES OF DHTML
 It is used for designing the animated and interactive web
pages that are developed in real-time.
 DHTML helps users by animating the text and images in
their documents.
 It allows the authors for adding the effects on their
pages.
 It also allows the page authors for including the drop-
down menus or rollover buttons.
 This term is also used to create various browser-based
action games.
 It is also used to add the ticker on various websites, 5
which needs to refresh their content automatically.
FEATURES OF DHTML
 Its simplest and main feature is that we can create the web page
dynamically.
 Dynamic Style is a feature, that allows the users to alter the font, size,
color, and content of a web page.
 It provides the facility for using the events, methods, and properties.
And, also provides the feature of code reusability.
 It also provides the feature in browsers for data binding.
 Using DHTML, users can easily create dynamic fonts for their web sites
or web pages.
 With the help of DHTML, users can easily change the tags and their
properties.
 The web page functionality is enhanced because the DHTML uses low-
bandwidth effect.
6
DIFFERENCE BETWEEN HTML AND DHTML

HTML DHTML

 HTML is simply a markup language.  DHTML is not a language, but it is a


 It is used for developing and creating set of technologies of web
web pages. development.
 This markup language creates static
 It is used for creating and designing
web pages. the animated and interactive web sites
or pages.
 It does not contain any server-side
scripting code.
 This concept creates dynamic web
pages.
 The files of HTML are stored with
the .html or .htm extension in a system.
 It may contain the code of server-side
scripting.
 A simple page which is created by a
user without using the scripts or styles
 The files of DHTML are stored with
called as an HTML page. the .dhtm extension in a system.
 This markup language does not need
 A page which is created by a user
database connectivity. using the HTML, CSS, DOM, and
JavaScript technologies called a
DHTML page.
 This concept needs database 7
connectivity because it interacts with
users.
DHTML JAVASCRIPT
 JavaScript can be included in HTML pages, which creates the content of the
page as dynamic. We can easily type the JavaScript code within the <head>
or <body> tag of a HTML page. If we want to add the external source file
of JavaScript, we can easily add using the <src> attribute.
 Following are the various examples, which describes how to use the
JavaScript technology with the DHTML:
 Document.write() Method
 The document.write() method of JavaScript, writes the output to a web
page.

8
EXAMPLE
 <HTML>
 <head>
 <title>
 Method of a JavaScript
 </title>
 </head>
 <body>
 <script type="text/javascript">
 document.write("JavaTpoint");
 </script>
 </body> 9

 </html>
WHAT IS HTML DOM
 The HTML DOM defines a standard way for accessing and
manipulating HTML documents.
 The DOM presents an HTML document as a tree-structure.

10
WHAT IS THE DOM?
 The DOM is a W3C (World Wide Web Consortium)
standard.
 The DOM defines a standard for accessing HTML and
XML documents:
"The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of a
document."

 The W3C DOM standard is separated into 3 different parts:


 Core DOM - standard model for any structured document
 XML DOM - standard model for XML documents 11
 HTML DOM - standard model for HTML documents
WHAT IS THE HTML DOM?
 The HTML DOM is:
 A standard object model for HTML
 A standard programming interface for HTML
 A W3C standard

 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. 12
HTML DOM EXAMPLE

13
HTML DOM NODES
 In the HTML DOM, everything is a node. The DOM is
HTML viewed as a node tree.

DOM Nodes
 According to the W3C HTML DOM standard,
everything in an HTML document is a node:
 The entire document is a document node
 Every HTML element is an element node
 The text inside HTML elements are text nodes
 Every HTML attribute is an attribute node
 Comments are comment nodes
14
HTML DOM NODE TREE
 The HTML DOM views HTML documents as tree
structures. The structure is called a Node Tree:

15
HTML DOM NODE TREE
 With the HTML DOM, all nodes in the tree can be
accessed by JavaScript. All HTML elements (nodes) can
be modified, and nodes can be created or deleted.

16
NODE PARENTS, CHILDREN AND
SIBLINGS
 The nodes in the node tree have a hierarchical
relationship to each other.
 The terms parent, child, and sibling are used to describe
the relationships. Parent nodes have children. Children
on the same level are called siblings (brothers or sisters).
 In a node tree, the top node is called the root
 Every node has exactly one parent, except the root (which has
no parent)
 A node can have any number of children
 Siblings are nodes with the same parent

17
NODE PARENTS, CHILDREN AND
SIBLINGS
 The following image illustrates a part of the node tree
and the relationship between the nodes:

18
NODE PARENTS, CHILDREN AND
SIBLINGS
 Look at the following HTML fragment:

19
NODE PARENTS, CHILDREN AND
SIBLINGS
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

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 child nodes of <body>

and:
 The <head> element is the first child of the <html> element
 The <body> element is the last child of the <html> element
20
 The <h1> element is the first child of the <body> element
 The <p> element is the last child of the <body> element
WARNING – PROCESSING NODE
ELEMENT AND TEXT CONTENT!
 A common error in DOM processing is to expect an
element node to contain text.
 In this example: <title>DOM Tutorial</title>, the
element node < title>, holds a text node with the value
"DOM Tutorial".
 The value of the text node can be accessed by the node's
innerHTML property.

21
HTML DOM METHODS
 Methods are actions you can perform on nodes (HTML
Elements)

Programming Interface
 The HTML DOM can be accessed with JavaScript (and other
programming languages).
 All HTML elements are defined as objects, and the
programming interface is the object methods and object
properties .
 A method is an action you can do (like add or modify an
element).
 A property is a value that you can get or set (like the name 22

or content of a node).
HTML DOM OBJECTS - METHODS AND
PROPERTIES
Some commonly used HTML DOM methods:
 getElementById(id) - get the node (element) with a
specified id
 appendChild(node) - insert a new child node (element)

 removeChild(node) - remove a child node (element)

Some commonly used HTML DOM properties:


 innerHTML - the text value of a node (element)

 parentNode - the parent node of a node (element)

 childNodes - the child nodes of a node (element)


23
 attributes - the attributes nodes of a node (element)
SOME DOM OBJECT METHODS
Method Description
Returns a node list (collection/array of nodes)
getElementsByTagName()
containing all elements with a specified tag name
Returns a node list containing all elements with a
getElementsByClassName()
specified class
appendChild() Adds a new child node to a specified node
removeChild() Removes a child node
replaceChild() Replaces a child node
insertBefore() Inserts a new child node before a specified child node
createAttribute() Creates an Attribute node
createElement() Creates an Element node

getAttribute() Returns the specified attribute value


Sets or changes the specified attribute, to the specified
setAttribute()
value
24
THE INNERHTML PROPERTY
 The easiest way to get the content of an element is by using the
innerHTML property.
 The innerHTML property is useful for getting or replacing the content
of HTML elements.

<html>
< body>
< p id="intro">Hello World!</p>

< script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
< /script>
25
< /body>
< /html>
THE NODEVALUE PROPERTY
The nodeValue property specifies the value of a node.
 nodeValue for element nodes is undefined

 nodeValue for text nodes is the text itself

 nodeValue for attribute nodes is the attribute value

26
GET THE VALUE OF AN ELEMENT

27
ACCESSING HTML ELEMENTS
(NODES)
 You can access an HTML element in different ways:
 By using the getElementById() method (As seen before
in earlier slide)
 By using the getElementsByTagName() method
 getElementsByTagName() returns all elements with a
specified tag name.

 By using the getElementsByClassName() method


 tofind all HTML elements with the same class name
 Currently not supported by IE 5,6,7 and 8

28
THE GETELEMENTSBYTAGNAME()
METHOD

29
MODIFYING HTML ELEMENTS
 Modifying the HTML DOM can be many
different things
 Changing HTML content
 Changing CSS styles
 Changing HTML attributes
 Creating new HTML elements
 Removing existent HTML elements
 Changing event(handlers)

30
CHANGING HTML CONTENT
 The easiest way to change the content of an element is
by using the innerHTML property.

<p id="p1">Hello World!</p>

< script>
document.getElementById("p1").innerHTML="New text!";
< /script>

31
CHANGING HTML STYLE
 With the HTML DOM you can access the style object of
HTML elements.

<p id="p2">Hello world!</p>


<script>
document.getElementById("p2").style.color="blue";
< /script>

32
CREATING NEW HTML ELEMENTS
 To add a new element to the HTML DOM, you must create the element
(element node) first, and then append it to an existing element.

33
USING EVENTS
 The HTML DOM allows you to execute code
when an event occurs.
 Events are generated by the browser when
"things happen" to HTML elements:
 An element is clicked on
 The page has loaded
 Input fields are changed

34
USING EVENTS
 Example 1
< input type="button"
onclick="document.body.style.backgroundColor = 'lavender';"
value="Change background color" />

 Example 2
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
< /script>
35
< input type="button" onclick="ChangeBackground()"
value="Change background color" />
REACTING TO EVENTS (USING
JAVASCRIPT)
 A JavaScript can be executed when an event occurs, like
when a user clicks on an HTML element.
 To execute code when a user clicks on an element, add
JavaScript code to an HTML event attribute:
onclick=JavaScript
 Some Examples of HTML events:
 When a user clicks the mouse
 When a web page has loaded
 When the mouse moves over an element
 When an input field is changed
 When an HTML form is submitted
 When a user strokes a key 36
THE ONMOUSEOVER AND
ONMOUSEOUT EVENTS

37
THE ONMOUSEDOWN, ONMOUSEUP
AND ONCLICK EVENTS

38

You might also like