Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
106 views

What Is The DOM?

The DOM (Document Object Model) defines a standard for accessing and manipulating HTML and XML documents. It represents the page as nodes and objects so that programming languages can connect to the page. All major browser support the DOM. The DOM represents the document as a tree structure whereby each node is an object with properties and methods. This allows JavaScript to directly work with the content, structure, and style of a document.

Uploaded by

Pavan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
106 views

What Is The DOM?

The DOM (Document Object Model) defines a standard for accessing and manipulating HTML and XML documents. It represents the page as nodes and objects so that programming languages can connect to the page. All major browser support the DOM. The DOM represents the document as a tree structure whereby each node is an object with properties and methods. This allows JavaScript to directly work with the content, structure, and style of a document.

Uploaded by

Pavan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents like HTML and XML:

"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 DOM is separated into 3 different parts / levels:


• Core DOM - standard model for any structured document
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents

The DOM defines the objects and properties of all document elements, and
the methods(interface) to access them.

What is the XML DOM?


The XML DOM defines the objects and properties of all XML elements, and
the methods(interface) to access them.
If you want to study the XML DOM, find the XML DOM tutorial on Home page.

What is the HTML DOM?


The HTML DOM is:
• A standard object model for HTML
• A standard programming interface for HTML
• Platform- and language-independent
• A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and
the methods(interface) to access them.
In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.

DOM Nodes
According to the DOM, everything in an HTML document is a node.

The DOM says:


• The entire document is a document node
• Every HTML element is an element node
• The text in the HTML elements are text nodes
• Every HTML attribute is an attribute node
• Comments are comment nodes
DOM Example
Look at the following HTML document:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

The root node in the HTML above is <html>. All other nodes in the document are contained
within <html>.
The <html> node has two child nodes; <head> and <body>.
The <head> node holds a <title> node. The <body> node holds a <h1> and <p> node.

Text is Always Stored in Text Nodes


A common error in DOM processing is to expect an element node to contain text.
However, the text of an element node is stored in a text node.
In this example: <title>DOM Tutorial</title>, the element node <title>, holds a text
node with the value "DOM Tutorial".
"DOM Tutorial" is not the value of the <title> element!
However, in the HTML DOM the value of the text node can be accessed by
the innerHTMLproperty.

The HTML DOM views a HTML document as a node-tree.


All the nodes in the tree have relationships to each other.

The HTML DOM Node Tree


The HTML DOM views a HTML document as a tree-structure. The tree structure is called
a node-tree.
All nodes can be accessed through the tree. Their contents can be modified or deleted, and
new elements can be created.
The node tree below shows the set of nodes, and the connections between them.
The tree starts at the root node and branches out to the text nodes at the lowest level of
the tree:
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, except the root, has exactly one parent node
• A node can have any number of children
• A leaf is a node with no children
• Siblings are nodes with the same parent
The following image illustrates a part of the node tree and the relationship between the
nodes:

Look at the following HTML fragment:


<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
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 both child nodes of <body>

First Child - Last Child


From the HTML above:
• the <head> element is the first child of the <html> element, and the <body>
element is the last child of the <html> element
• the <h1> element is the first child of the <body> element, and the <p> element is
the last child of the <body> element

Properties and methods define the programming interface of the HTML DOM.

Programming Interface
In the DOM, HTML documents consist of a set of node objects. The nodes can be accessed
with JavaScript or other programming languages. In this tutorial we will use JavaScript.
The programming interface of the DOM is defined by standard properties and methods.
Properties are often referred to as something that is (i.e. the name of a node).
Methods are often referred to as something that is done (i.e. remove a node).

HTML DOM Properties


Some DOM properties:
• x.innerHTML - the text value of x
• x.nodeName - the name of x
• x.nodeValue - the value of x
• x.parentNode - the parent node of x
• x.childNodes - the child nodes of x
• x.attributes - the attributes nodes of x
Note: In the list above, x is a node object (HTML element).

HTML DOM Methods


Some DOM methods:
• x.getElementById(id) - get the element with a specified id
• x.getElementsByTagName(name) - get all elements with a specified tag name
• x.appendChild(node) - insert a child node to x
• x.removeChild(node) - remove a child node from x
Note: In the list above, x is a node object (HTML element).

The innerHTML Property


The easiest way to get or modify the content of an element is by using the innerHTML
property.
innerHTML is not a part of the W3C DOM specification. However, it is supported by all major
browsers.
The innerHTML property is useful for returning or replacing the content of HTML elements
(including <html> and <body>), it can also be used to view the source of a page that has
been dynamically modified.

Example
The following code to gets the innerHTML (text) from the <p> element with id="intro":

Example

<html>
<body>

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

<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>

</body>
</html>

In the example above, getElementById is a method, while innerHTML is a property.

childNodes and nodeValue


We can also use the childNodes and NodeValue properties to get the content of an element.
The following code to gets the value of the <p> element with id="intro":

Example

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

<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>

</body>
</html>

In the example above, getElementById is a method, while childNodes and nodeValue are
properties.

The nodeName, nodeValue, and nodeType properties contain information about nodes.

Node Properties
In the HTML DOM, each node is an object.
Objects have methods and properties that can be accessed and manipulated by JavaScript.
Three important node properties are:
• nodeName
• nodeValue
• nodeType

The nodeName Property


The nodeName property specifies the name of a node.
• nodeName is read-only
• nodeName of an element node is the same as the tag name
• nodeName of an attribute node is the attribute name
• nodeName of a text node is always #text
• nodeName of the document node is always #document
Note: nodeName always contains the uppercase tag name of an HTML element.

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

Get the Value of an Element


The following example retrieves the text node value of the <p id="intro"> tag:
Example

<html>
<body>

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

<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

<html>
<body>

The nodeType Property


The nodeType property returns the type of node. nodeType is read only.
The most important node types are:
Element type NodeType
Element 1
Attribute 2
Text 3
Comment 8
Document 9

Events
Every element on a web page has certain events which can trigger JavaScript functions. For
example, we can use the onClick event of a button element to indicate that a function will
run when a user clicks on the button. We define the events in the HTML elements.
Examples of events:
• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input box in an HTML form
• Submitting an HTML form
• A keystroke
Note: Events are normally used in combination with functions, and the function will not be
executed before the event occurs!

onload and onUnload


The onload and onUnload events are triggered when the user enters or leaves a page.
The onload event is often used to check the visitor's browser type and version, and load the
proper version of the web page based on that information.
Both the onload and onUnload events are also often used to deal with cookies that should
be set when a user enters or leaves a page. For example, you could have a popup asking for
the user's name upon his first arrival to your page. The name is then stored in a cookie.
Next time the visitor arrives at your page, you could have another popup saying something
like: "Welcome John Doe!".

onFocus, onBlur and onChange


The onFocus, onBlur and onChange events are often used in combination with validation of
form fields.
Below is an example of how to use an onChange event. The checkEmail() function will be
called whenever the user changes the content of the e-mail field:
E-mail: <input type="text" id="email" onchange="checkEmail()" />

Document Object
Each HTML document loaded into a browser window becomes a Document object.
The Document object provides access to all HTML elements in a page, from within a script.
Tip: The Document object is also part of the Window object, and can be accessed through
the window.document property.

Document Object Collections


W3C: W3C Standard.
Collection Description W3C
anchors[] Returns an array of all the anchors in the document Yes
forms[] Returns an array of all the forms in the document Yes
images[] Returns an array of all the images in the document Yes
links[] Returns an array of all the links in the document Yes

Document Object Properties

Property Description W3C


cookie Returns all name/value pairs of cookies in the document Yes
documentMode Returns the mode used by the browser to render the document No
domain Returns the domain name of the server that loaded the document Yes
lastModified Returns the date and time the document was last modified No
readyState Returns the (loading) status of the document No
referrer Returns the URL of the document that loaded the current document Yes
title Sets or returns the title of the document Yes
URL Returns the full URL of the document Yes
Document Object Methods

Method Description W3C


close() Closes the output stream previously opened with Yes
document.open()
getElementById() Accesses the first element with the specified id Yes
getElementsByName() Accesses all elements with a specified name Yes
getElementsByTagName()Accesses all elements with a specified tagname Yes
open() Opens an output stream to collect the output from Yes
document.write() or document.writeln()
write() Writes HTML expressions or JavaScript code to a document Yes
writeln() Same as write(), but adds a newline character after each Yes
statement

Event Object
The event object gives you information about an event that has occurred.
The Event object represents the state of an event, such as the element in which the event
occurred, the state of the keyboard keys, the location of the mouse, and the state of the
mouse buttons.
Events are normally used in combination with functions, and the function will not be
executed before the event occurs!

Event Handlers
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like
starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes
that can be inserted into HTML tags to define event actions.
IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C Standard.
Attribute The event occurs when... IE F O W3C
onblur An element loses focus 3 1 9 Yes
onchange The content of a field changes 3 1 9 Yes
onclick Mouse clicks an object 3 1 9 Yes
ondblclick Mouse double-clicks an object 4 1 9 Yes
onerror An error occurs when loading a document or an image 4 1 9 Yes
onfocus An element gets focus 3 1 9 Yes
onkeydown A keyboard key is pressed 3 1 No Yes
onkeypress A keyboard key is pressed or held down 3 1 9 Yes
onkeyup A keyboard key is released 3 1 9 Yes
onmousedown A mouse button is pressed 4 1 9 Yes
onmousemove The mouse is moved 3 1 9 Yes
onmouseout The mouse is moved off an element 4 1 9 Yes
onmouseover The mouse is moved over an element 3 1 9 Yes
onmouseup A mouse button is released 4 1 9 Yes
onresize A window or frame is resized 4 1 9 Yes
onselect Text is selected 3 1 9 Yes
onunload The user exits the page 3 1 9 Yes
Mouse / Keyboard Attributes

Property Description IE FOW3C


altKey Returns whether or not the "ALT" key was pressed when an event 6 19 Yes
was triggered
button Returns which mouse button was clicked when an event was 6 19 Yes
triggered
clientX Returns the horizontal coordinate of the mouse pointer when an 6 19 Yes
event was triggered
clientY Returns the vertical coordinate of the mouse pointer when an 6 19 Yes
event was triggered
ctrlKey Returns whether or not the "CTRL" key was pressed when an event 6 19 Yes
was triggered
metaKey Returns whether or not the "meta" key was pressed when an event 6 19 Yes
was triggered
relatedTargetReturns the element related to the element that triggered the No19 Yes
event
screenX Returns the horizontal coordinate of the mouse pointer when an 6 19 Yes
event was triggered
screenY Returns the vertical coordinate of the mouse pointer when an 6 19 Yes
event was triggered
shiftKey Returns whether or not the "SHIFT" key was pressed when an 6 19 Yes
event was triggered

Other Event Attributes

Property Description IE FOW3C


bubbles Returns a Boolean value that indicates whether or not an event is No19 Yes
a bubbling event
cancelable Returns a Boolean value that indicates whether or not an event No19 Yes
can have its default action prevented
currentTargetReturns the element whose event listeners triggered the event No19 Yes
eventPhase Returns which phase of the event flow is currently being evaluated Yes
target Returns the element that triggered the event No19 Yes
timeStamp Returns the time stamp, in milliseconds, from the epoch (system No19 Yes
start or event trigger)
type Returns the name of the event 6 19 Yes

You might also like