DOM is
a platform and language independent interface which allows applications to
access and update the content or structure or styles of documents.
Why we need DOM?
How is DOM representing the html document?
NODE
What are the node types for my Document?
Oh So many nodes… I never thought they were so
many….
Explained:
Reference: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html
Why we need DOM?
DOM is
required in order to access the content of an html so that it can be operated
via styles and script to make html dynamic.
Dynamic HTML
An html
document which has some dynamic behaviour which occurs when some action is
taken place or certain amount of time is elapsed.
How is DOM representing the html document?
All the
content of an HTML documents are represented as NODE.
NODE
A
node is primary data type of DOM which represents a single entity of DOM.
A node can have several or no sub
nodes. Sub nodes are called children were as the root node is called parent
node.
Every document
has a single root node called DOCUMENT
node.
What are the node types for my Document?
Oh!
That’s a nice question. Following types are supported if you are using HTML or
XML document:
1. DOCUMENT
interface
2. Document
Fragment Interface
3. Element
Interface
4. EntityRefrence
Interface
5. Entity
Interface
6. Text Interface
7. Comments
Interface
8. CDATASection
Interface
9. Notation
Interface
10. Attr Interface
11. ProcessingInstruction
interface and
12. Document type
Interface
Oh So many nodes… I never thought they were so
many….
Yes
there are let’s see them in our page here is the code to be considered:
<DOCTYPE
html PUBLIC //-//W3C//DTD HTML 4.0 STRICT//EN>
<html
>
<head>
<title>Explained DOM – HTML</title>
<script type=’text/javascript>
<![CDATA[
Document.getElementById(‘#dom’).sytle.border=
‘1px solid #red’;
]]>
</script>
</head>
<body>
<div >
<p id=’dom’>
<!--this div with id as dom
contains information on dom -->
Attr
Interface is id for this div.
</p>
</div>
</body>
</html>
For above sample file: DOCUMENT
Interface represent in DOM structure as follows
Explained:
a. DOCUMENT Interface - Is considered to be the root
element of the document.
i.
Element INTERFACE – only one element will be
considered
ii.
Comments INTERFACE – represent additional information in the document/page (not shown
to user) written between ‘<! --’ and
‘-->’.
iii.
DOCTYPE INTERFACE – only one DOCTYPE will be
considered
iv.
ProcessingInstruction INTERFACE – used in xml for keeping processing
specific information.
b. DOCUMENT FRAGMENT INTERFACE
– is to represent a part of document and allows easy DOM manipulation. It
can contain any of the following in child nodes
i.
Element INTERFACE
ii.
ProcessingInstruction INTERFACE
iii.
Comments INTERFACE
iv.
Text INTERFACE – Represents any textual information
in the document/page.
v.
CDATASection
INTERFACE – Is used to
represent the CDATA in document which is used to escape characters that have
special meaning in document.
vi.
EntityReference INTERFACE
c. DOCTYPE INTERFACE
– Represents the Document type included, does
not have any children.
d. EntityRefrence INTERFACE
– Represent an entity reference in the tree
i.
Element INTERFACE
ii.
ProcessingInstruction INTERFACE
iii.
Comments INTERFACE
iv.
Text INTERFACE
v.
CDATASection
INTERFACE
vi.
EntityReference INTERFACE
e. Element INTERFACE
– Represent an element (Tag) of the document. Can have following children
i.
Element INTERFACE
ii.
ProcessingInstruction INTERFACE
iii.
Comments INTERFACE
iv.
Text INTERFACE
v.
CDATASection
INTERFACE
vi.
EntityReference INTERFACE
f.
Entity INTERFACE – Represent an entity(parsed
or unparsed) of the document. Can have following children
i.
Element INTERFACE
ii.
ProcessingInstruction INTERFACE
iii.
Comments INTERFACE
iv.
Text INTERFACE
v.
CDATASection INTERFACE
vi.
EntityReference INTERFACE
g. Attr INTERFACE
– Represent an attribute (properties) of an element (Tag) of the document. Can
have following children
i.
Text INTERFACE
ii.
EntityReference INTERFACE
h. Text INTERFACE
– Represent textual content in an element (Tag) of the document. Does not have any children.
i.
Comments INTERFACE – Represent comments in
document. Does not have any children.
j.
Notation INTERFACE- NO Children.
k. CDATASection INTERFACE-
Is used to represent the CDATA in document which is used to escape characters that
have special meaning in document. Does
not have any children.
l.
ProcessingInstruction INTERFACE- used in xml
for keeping processing specific information. Does not have any children.
Reference: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html
