document object model
DESCRIPTION
At aboveTRANSCRIPT
![Page 1: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/1.jpg)
Document Object ModelDOM
![Page 2: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/2.jpg)
Agenda Evaluation. Benefits of DOM. DOM Structure and implements. XML With DOM. HTML With DOM. JavaScript with DOM. CSS with DOM. Q&A
![Page 3: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/3.jpg)
Where the Document Object Model came from?
What is Document Object Model ?
![Page 4: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/4.jpg)
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
![Page 5: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/5.jpg)
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
![Page 6: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/6.jpg)
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.
![Page 7: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/7.jpg)
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]
![Page 8: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/8.jpg)
DOM TreeThe usual parent/child relationship between node
Like any other tree, you can walk this
[CONTINUED]
![Page 9: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/9.jpg)
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
![Page 10: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/10.jpg)
What is a Node?
Element Node – contains an HTML tag
Text Node – contains text
Text Nodes are contained in Element Nodes
[CONTINUED]
![Page 11: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/11.jpg)
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]
![Page 12: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/12.jpg)
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]
![Page 13: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/13.jpg)
Putting the all Steps Together
EXAMPLE - 01
![Page 14: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/14.jpg)
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]
![Page 15: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/15.jpg)
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]
![Page 16: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/16.jpg)
Where on the Node Tree? childNodes
nodeList = node.childNodes firstChild
reference = node.firstChild lastChild
nextSibling
parentNode
previousSibling
[CONTINUED]
![Page 17: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/17.jpg)
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]
![Page 18: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/18.jpg)
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
![Page 19: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/19.jpg)
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
![Page 20: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/20.jpg)
JavaScript with DOM
JavaScript Objects Reference
Browser Objects Reference
Core DOM Objects Reference
HTML DOM Objects Reference
EXAMPLE-04
![Page 21: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/21.jpg)
CSS With DOM
Dynamically we can add inner Style sheet.
We can also add css class.
EXAMPLE-05
![Page 22: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/22.jpg)
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]
![Page 23: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/23.jpg)
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
![Page 24: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/24.jpg)
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
![Page 25: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/25.jpg)
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
![Page 27: Document object model](https://reader033.vdocument.in/reader033/viewer/2022060110/5560bf88d8b42afe3b8b53dd/html5/thumbnails/27.jpg)
Thank you