Scribd
Upload
73 views20 pages

WINSEM2012-13 CP0557 03-Jan-2013 RM02 Dom

The document discusses the Document Object Model (DOM) which defines a standard for accessing and manipulating HTML, XML, and XHTML documents. It defines that everything in an HTML/XML document is a node, and can be accessed and manipulated using JavaScript. The DOM represents the document as a tree structure called the node tree. Nodes have parent-child relationships where parents can have multiple children but each child only has one parent. Commonly used DOM methods and properties to access and modify nodes are also discussed.

Uploaded by

Rahul Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
73 views20 pages

WINSEM2012-13 CP0557 03-Jan-2013 RM02 Dom

The document discusses the Document Object Model (DOM) which defines a standard for accessing and manipulating HTML, XML, and XHTML documents. It defines that everything in an HTML/XML document is a node, and can be accessed and manipulated using JavaScript. The DOM represents the document as a tree structure called the node tree. Nodes have parent-child relationships where parents can have multiple children but each child only has one parent. Commonly used DOM methods and properties to access and modify nodes are also discussed.

Uploaded by

Rahul Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing HTML and XML documents: "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 W3C DOM standard is separated into 3 different parts:

What is the XML DOM? The XML DOM defines the objects and properties of all XML elements, and the methods to access them. What is the HTML DOM? The HTML DOM is: A standard object model for HTML A standard programming interface for HTML A W3C standard The HTML DOM defines the objects and properties of all HTML elements, and the methods to access them. In other words:

HTML DOM Nodes


In the HTML DOM, everything is a node. The DOM is HTML viewed as a node tree. DOM Nodes According to the W3C HTML DOM standard, everything in an HTML document is a node: The entire document is a document node Every HTML element is an element node The text inside HTML elements are text nodes Every HTML attribute is an attribute node Comments are comment nodes

The HTML DOM Node Tree


The HTML DOM views HTML documents as tree structures. The structure is called a Node Tree:

With the HTML DOM, all nodes in the tree can be accessed by JavaScript. All HTML elements (nodes) can be modified, and nodes can be

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 has exactly one parent, except the root (which has no parent) A node can have any number of children Siblings are nodes with the same parent

The following image illustrates a part of the node tree and the relationship between the nodes:

<html> <head> <title>DOM utorial</title> </head> <body> <h1>DOM Lesson1</h1> <p>Hello world!</p> </body> </html>

HTML DOM Methods Methods are actions you can perform on nodes (HTML Elements) Programming Interface The HTML DOM can be accessed with JavaScript (and other programming languages). All HTML elements are defined as objects, and the programming interface is the object methods and object properties . A method is an action you can do (like add or modify an element). A property is a value that you can get or set (like the name or content of a node). The getElementById() Method The getElementById() method returns the element with the specified ID: Example var element=document.getElementById("intro");

HTML DOM Objects - Methods and Properties


Some commonly used HTML DOM methods:
getElementById(id) - get the node (element) with a specified id appendChild(node) - insert a new child node (element) removeChild(node) - remove a child node (element)

Some commonly used HTML DOM properties:


innerHTML - the text value of a node (element) parentNode - the parent node of a node

A Real Life Object Illustration:


A person is an object. A person's methods could be eat(), sleep(), work(), play(), etc. All persons have these methods, but they are performed at different times. A person's properties include name, height, weight, age, eye color, etc. All persons have these properties, but their values differ from person to person.

HTML DOM Properties


Properties are values of nodes (HTML Elements) that you can get or set Programming Interface The HTML DOM can be accessed with JavaScript (and other programming languages). The programming interface of the DOM is defined by methods and properties. A method is an action you can do (like add or delete a node). A property is a value that you can get or set (like the name or content of a node). The innerHTML Property The easiest way to get the content of an element is by using the innerHTML property. The innerHTML property is useful for getting or replacing the content of HTML elements.

Example
The following code gets the innerHTML from the <p> element with id="intro": Example <html> <body> <p id="intro">Hello World!</p> <script> var txt=document.getElementById("intro").innerHTML; document.write(txt); </script> </body> </html>

The XML DOM


The XML DOM defines a standard way for accessing and manipulating XML documents. The DOM presents an XML document as a tree-structure. Knowing the XML DOM is a must for anyone working with XML.

XML DOM Nodes


In the DOM, everything in an XML document is a node. DOM Nodes According to the DOM, everything in an XML document is a node. The DOM says: The entire document is a document node Every XML element is an element node The text in the XML elements are text nodes Every attribute is an attribute node

XML DOM example

XML DOM- The Attr object


The Attr object represents an attribute of an Element object. The allowable values for attributes are usually defined in a DTD. Because the Attr object is also a Node, it inherits the Node object's properties and methods. However, an attribute does not have a parent node and is not considered to be a child node of an element, and will return null for many of the Node properties.
Property baseURI isId Description IE F 1 O W3C Returns the absolute base URI of the attribute No Returns true if the attribute is known to be of type ID, otherwise it returns false Returns the local part of the name of the attribute Returns the name of the attribute Returns the namespace URI of the attribute No No Yes No No Yes

localName name namespaceURI

No 5 No

1 1 1

9 9 9

Yes Yes Yes

XML DOM- The Text object


The Text object represents the textual content of an element or attribute. The Text object properties:
Property data Description Sets or returns the text of the element or attribute Returns true if the text node contains content whitespace, otherwise it returns false IE 6 F 1 O W3C 9 Yes

isElementContentWhitespace

No No No Yes

length

Returns the length of the text of the 6 element or attribute

Yes

wholeText

Returns all text of text nodes No No No Yes adjacent to this node, concatenated in document order

The text object methods


Method appendData() deleteData() insertData() replaceData() replaceWholeText(text) Description Appends data to the node Deletes data from the node Inserts data into the node Replaces data in the node IE 6 6 6 6 F 1 1 1 1 O W3C 9 9 9 9 Yes Yes Yes Yes

Replaces the text of this node and No No No Yes all adjacent text nodes with the specified text Splits this node into two nodes at the specified offset, and returns the new node that contains the text after the offset Extracts data from the node 6 1 9 Yes

splitText()

substringData()

Yes

XML DOM The CDATASection Object


The CDATASection object represents a CDATA section in a document. A CDATA section contains text that will NOT be parsed by a parser. Tags inside a CDATA section will NOT be treated as markup and entities will not be expanded. The primary purpose is for including material such as XML fragments, without needing to escape all the delimiters. The only delimiter that is recognized in a CDATA section is "]]>" - which indicates the end of the CDATA section. CDATA sections cannot be nested.

CDATASection Object Properties Property data length Description Sets or returns the text of this node Returns the length of the CDATA section IE F O W3 C 6 1 N Ye o s 6 1 N Ye o s

CDATASection Object Methods


Property appendData() deleteData() insertData() replaceData() splitText() substringData() Description Appends data to the node Deletes data from the node Inserts data into the node Replaces data in the node Splits the CDATA node into two nodes Extracts data from the node IE F O W3C 6 6 6 6 6 6 1 N Yes o 1 N Yes o 1 N Yes o 1 N Yes o 1 N o 1 N Yes o

Example
xmlDoc=loadXMLDoc("books.xml"); //the x variable will hold a node list x=xmlDoc.getElementsByTagName('title'); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write(" "); } Output: Everyday Italian Harry Potter XQuery Kick Start Learning XML

You might also like