Document object model

Agenda
 Evaluation.
 Benefits of DOM.
 DOM Structure and implements.
 XML With DOM.
 HTML With DOM.
 JavaScript with DOM.
 CSS with DOM.
 Q&A

 Where the Document Object Model came from?
 What is Document Object Model ?

Where the Document Object Model came from?
 "browser wars" of the late 1990s between Netscape Navigator
and Microsoft Internet Explorer.
 1996 within Netscape Navigator 2.0
“DOM Level 0" or "Legacy DOM”
 W3C in late 1998 - > 2000 itro.. DOM Level 1 and 2.
 2005, large parts of W3C DOM were well-supported
by common ECMAScript-enabled browsers

What is Document Object Model ?
Document Object Model (DOM), a programming interface
specification being developed by the World Wide Web
Consortium (W3C), lets a programmer create and modify
HTML pages and XML documents as full-fledged program
objects.
In short..
 set of objects/elements
 a structure of how these objects/elements can be combined
 and an interface to access and modify them

Benefits of DOM.
 Read the entire document
 Represents result as a tree
 Lets you search tree
 Lets you modify tree
 Good for reading data/configuration files
 Support in many different languages.

DOM Structure and implements
 Objects are in a hierarchy
 The window is the parent
for a given web page.
 Document is the child with
the objects that are most
commonly manipulated
[CONTINUED]

DOM Tree
The usual parent/child relationship between node
Like any other tree, you can walk this
[CONTINUED]

Referencing Objects
 By their id or name (this is the easiest way, but
you need to make sure a name is unique in the
hierarchy)
 by their numerical position in the hierarchy, by
walking the array that contains them
 by their relation to parent, child, or sibling
(parentNode, previousSibling, nextSibling, firstChild,
lastChild or the childNodes array

What is a Node?
 Element Node – contains an HTML tag
 Text Node – contains text
 Text Nodes are contained in Element Nodes
[CONTINUED]

Nodes Organise the Page
html
head
title
text
“my page”
body
p
text
“This is text
on
my page”
<html>
<head>
<title>My page</title>
</head>
<body>
<p>This is text on my page</p>
</body>
</html>
[CONTINUED]

Adding Some Text To A Page
 Create a new Element
[document.createElement(“p”)]
 Create a Text Node
[document.createTextNode(“Some text.”) ]
 Attach the New Text Node to the New Element
[newNode.appendChild(newText)]
 Find an Existing Element
[document.getElementById(“thisLocation”)]
 Append the New Element to the Existing Element
[docElement.appendChild(newNode)]
[CONTINUED]

Putting the all Steps Together
EXAMPLE - 01

Remove a Node
“To remove a node, we use the element method removeChild (name of node to be removed)”
function remText(location) {
var docElement;
docElement = document.getElementById(location);
docElement.removeChild(docElement.lastChild);
}
[CONTINUED]

Best way to the get Element
 getElementById() allows you to work with elements by
their individual id but often you will want to work with a
group of elements
 getElementsByTagName() allows you to work with
groups of elements. This method returns an array
[CONTINUED]

Where on the Node Tree?
 childNodes
 nodeList = node.childNodes
 firstChild
 reference = node.firstChild
 lastChild
 nextSibling
 parentNode
 previousSibling
[CONTINUED]

Attribute Nodes
 We can get at the attributes of an element through attribute nodes
 Attribute nodes, like text nodes are always contained in element nodes
 We shall look at methods:
 getAttribute()
 setAttribute()
function dispAttribs() {
var messg;
attribs = new Array;
attribs = document.getElementsByTagName("p");
for (i = 0; i < attribs.length; i++) {
messg = attribs[i].getAttribute("className");
alert(messg);
}
}
function chngAttribs() {
var messg;
attribs = new Array;
attribs = document.getElementsByTagName("p");
for (i = 0; i < attribs.length; i++) {
attribs[i].setAttribute("className","jazz");
}
}
[CONTINUED]

XML With DOM
 EXtensible Markup Language (XML) is a meta-language that describes the content of
the document (self-describing data).
 XML does not specify the tag set or grammar of the language
 Media for data interchange
 XML only has container tags
<blah>...</blah> or <blah/>
EXAMPLE-02

HTML With DOM
 We can track any tag with respect its name
and global attribute.
 Use to arrange the XML data in UI.
 Give Action through the event Handler.
 Add and modified the tag with data.
[CONTINUED]
EXAMPLE-03

JavaScript with DOM
 JavaScript Objects Reference
 Browser Objects Reference
 Core DOM Objects Reference
 HTML DOM Objects Reference
EXAMPLE-04

CSS With DOM
 Dynamically we can add inner Style sheet.
 We can also add css class.
EXAMPLE-05

All the HTML in the tag is replaced when
the innerHTML method is used
innerHTML is not part of the DOM – so it
may one day disappear – though it is
universally recognised by browsers
Tags within the innerHTML are not part
of the DOM tree so they cannot be
manipulated
Points to know.
[CONTINUED]

Points to know.
 Understand the nature and structure of the DOM
 Add and remove content from the page
 Access and change element attributes –
including source and class
 Insert markup into a page using innerHTML
 Change style attribute using Javascript

Points to know
 DOM makes all components of a web page
accessible
 HTML elements
 their attributes
 text
 They can be created, modified and removed
with JavaScript

DOM Standards
 W3C www.w3.org/DOM/defines the standards
 DOM Level 3 recommendation
 www.w3.org/TR/DOM-Level-3-Core/
 DOM Level 2 HTML Specification
 www.w3.org/TR/DOM-Level-2-HTML/
 additional DOM functionality specific to HTML,
in particular objects for XHTML elements

Email – amit.kumar@above-inc.com
With Subject
DOM-NTK-Your name.

Document object model

More Related Content

What's hot

Viewers also liked

Similar to Document object model

Recently uploaded

Document object model