document object model
DESCRIPTION
At aboveTRANSCRIPT
Document Object ModelDOM
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 TreeThe 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
Thank you