PC TRAINING: HTML DOM

HTML DOM

The Document Object Model (DOM) is a platform- and language-independent standard object model for representing HTML or XMLand related formats.

A web browser is not obliged to use DOM in order to render anHTML document. However, the DOM is required by JavaScriptscripts that wish to inspect or modify a web page dynamically. In other words, the Document Object Model is the way JavaScript sees its containing HTML page and browser state.

Because the DOM supports navigation in any direction and allows for arbitrary modifications, an implementation must at least buffer the document that has been read so far.

Hence the DOM is likely to be best suited for applications where the document must be accessed repeatedly or out of sequence order. If the application is strictly sequential and one-pass, the SAX model is likely to be faster and use less memory.

In addition, non-extractive XML parsing models, such as VTD-XML, provide a new memory-efficient option.

Introduction to HTML DOM

Introduction

What is the DOM?

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents. With JavaScript you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page.

To change anything on a page, JavaScript needs access to all elements in the HTMLdocument. This access, along with methods and properties to add, move, change, or remove HTML elements, is given through the Document Object Model (DOM).

In 1998, W3C published the Level 1 DOM specification. This specification allowed access to and manipulation of every single element in an HTML page. All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM have almost disappeared.

The DOM can be used by JavaScript to read and change HTML, XHTML, and XMLdocuments.

The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

• Core DOM - defines a standard set of objects for any structured document

• XML DOM - defines a standard set of objects or XML documents

• HTML DOM - defines a standard set of objects for HTML documents

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.

The goals of the HTML-specific DOM API are:

• to specialize and add functionality that relates specifically to HTML documents and elements.

• to address issues of backwards compatibility with the "DOM Level 0".

• to provide convenience mechanisms, where appropriate, for common and frequent operations on HTML documents.

DOM includes the following specializations for HTML:

• An HTMLDocument interface, derived from the core Document interface. HTMLDocument specifies the operations and queries that can be made on a HTMLdocument.

• An HTMLElement interface, derived from the core Element interface. HTMLElement specifies the operations and queries that can be made on any HTML element. Methods on HTMLElement include those that allow for the retrieval and modification of attributes that apply to all HTML elements.

• Specializations for all HTML elements that have attributes that extend beyond those specified in the HTMLElement interface. For all such attributes, the derived interface for the element contains explicit methods for setting and getting the values.

Introduction to HTML DOM

HTML Application of Core DOM

Naming Conventions

The HTML DOM follows a naming convention for properties, methods, events, collections, and data types. All names are defined as one or more English words concatenated together to form a single string. Properties and Methods.

The property or method name starts with the initial keyword in lowercase, and each subsequent word starts with a capital letter. For example, a property that returns document meta information such as the date the file was created might be named "fileDateCreated".

In the ECMAScript binding, properties are exposed as properties of a given object. In Java, properties are exposed with get and set methods. Non-HTML 4.0 interfaces and attributes

While most of the interfaces defined below can be mapped directly to elements defined in the HTML 4.0 Recommendation, some of them cannot. Similarly, not all attributes listed below have counterparts in the HTML 4.0 specification (and some do, but have been renamed to avoid conflicts with scripting languages).

Interfaces and attribute definitions that have links to the HTML 4.0 specification have corresponding element and attribute definitions there; all others are added by this specification, either for convenience or backwards compatibility with "DOM Level 0" implementations.

Introduction to HTML DOM

Miscellaneous Object Definitions

Interface HTMLCollection

An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes. Note: Collections in the HTML DOMare assumed to be live meaning that they are automatically updated when the underlying document is changed.

IDL Definition

interface HTMLCollection
{
readonly attribute unsigned long length;
Node item(in unsigned long index);
Node namedItem(in DOMString name);
};

Attributes

Item-This attribute specifies the length or size of the list.

Methods

item - This method retrieves a node specified by ordinal index. Nodes are numbered in tree order (depth-first traversal order).

Parameters

index- The index of the node to be fetched. The index origin is 0.

Return Value

The Node at the corresponding position upon success. A value of null is returned if the index is out of range.

This method raises no exceptions.

namedItem

This method retrieves a Node using a name. It first searches for a Node with a matching id attribute. If it doesn't find one, it then searches for a Node with a matching name attribute, but only on those elements that are allowed a name attribute.

Parameters

name - The name of the Node to be fetched.

Return Value

The Node with a name or id attribute whose value corresponds to the specified string. Upon failure (e.g., no node with this name exists), returns null. This method raises no exceptions.

Introduction to HTML DOM

Objects related to HTML documents

Interface HTMLDocument

An HTMLDocument is the root of the HTML hierarchy and holds the entire content. Beside providing access to the hierarchy, it also provides some convenience methods for accessing certain sets of information from the document.

The following properties have been deprecated in favor of the corresponding ones for the BODY element:

• alinkColor

• background

• bgColor

• fgColor

• linkColor

• vlinkColor

IDL Definition

interface HTMLDocument : Document {
           attribute  DOMString            title;
  readonly attribute  DOMString            referrer;
  readonly attribute  DOMString            domain;
  readonly attribute  DOMString            URL;
           attribute  HTMLElement          body;
  readonly attribute  HTMLCollection       images;
  readonly attribute  HTMLCollection       applets;
  readonly attribute  HTMLCollection       links;
  readonly attribute  HTMLCollection       forms;
  readonly attribute  HTMLCollection       anchors;
           attribute  DOMString            cookie;
  void                      open();
  void                      close();
  void                      write(in DOMString text);
  void                      writeln(in DOMString text);
  Element                   getElementById(in DOMString elementId);
  NodeList                  getElementsByName(in DOMString elementName);
};

Attributes

Title-

The title of a document as specified by the TITLE element in the head of the document.

referrer-

Returns the URI of the page that linked to this page. The value is an empty string if the user navigated to the page directly.

domain-

The domain name of the server that served the document, or a null string if the server cannot be identified by a domain name.

URL-

The complete URI of the document.

body-

The element that contains the content for the document. In documents with BODY contents, returns the BODY element, and in frameset documents, this returns the outermost FRAMESET element.

images-

A collection of all the IMG elements in a document. The behavior is limited to IMG elements for backwards compatibility.

applets-

A collection of all the OBJECT elements that include applets and APPLET (deprecated) elements in a document.

links-

A collection of all AREA elements and anchor (A) elements in a document with a value for the href attribute.

forms-

A collection of all the forms of a document.

anchors-

A collection of all the anchor (A) elements in a document with a value for the name attribute.Note. For reasons of backwards compatibility, the returned set of anchors only contains those anchors created with the name attribute, not those created with the id attribute.

cookie-

The cookies associated with this document. If there are none, the value is an empty string. Otherwise, the value is a string: a semicolon-delimited list of "name, value" pairs for all the cookies associated with the page. For example, name=value;expires=date.

Methods

open Note.

This method and the ones following allow a user to add to or replace the structure model of a document using strings of unparsed HTML. At the time of writing alternate methods for providing similar functionality for both HTML and XML documents were being considered. The following methods may be deprecated at some point in the future in favor of a more general-purpose mechanism.

Open a document stream for writing. If a document exists in the target, this method clears it. This method has no parameters. This method returns nothing. This method raises no exceptions.

close

Closes a document stream opened by open() and forces rendering. This method has no parameters. This method returns nothing. This method raises no exceptions.

write

Write a string of text to a document stream opened by open(). The text is parsed into the document's structure model.

Parameters

text

The string to be parsed into some structure in the document structure model.

This method returns nothing.
This method raises no exceptions.

getElementById

Returns the Element whose id is given by elementId. If no such element exists, returns null. Behavior is not defined if more than one element has this id.

Parameters

elementId

The unique id value for an element.

Return Value

The matching element. This method raises no exceptions.

getElementsByName

Returns the (possibly empty) collection of elements whose name value is given by elementName.

Parameters

elementName

The name attribute value for an element.

Return Value

The matching elements.

This method raises no exceptions.

Working with HTML DOM

Introduction

Accessing Nodes

There are many types of nodes in an HTML document, but the three that you most often need to work with are element nodes, attribute nodes, and text nodes.

Accessing Element Nodes

Element nodes can be accessed by their tag name, id, or position within the HTML document hierarchy.

Working with HTML DOM

getElementsByTagName()

The getElementsByTagName() method of an element node retrieves all descendant elements of the specified tag name and stores them in a NodeList, which is exposed by JavaScript as an array. The following example illustrates how getElementsByTagName() works.

Example:

<html>
<head>
<script type="text/javascript">
function getElements()
{
 var elems = document.getElementsByTagName("li");
 var msg="";
 for (var i=0; i < elems.length; i++)
 {
  msg += elems[i].innerHTML + "\n";
 }
 alert(msg);
}
</script>
<title>getElementsByTagName()</title>
</head>

<body onload="getElements();">
<h1>ABCD</h1>
<h2>XYZ</h2>
<ol>
 <li>XYZ1 </li>
 <li>1234</li>
 <li>9876</li>
 <li>ABCD1</li>
</ol>
<h2>123456789</h2>
<ol>
 <li>123</li>
 <li>456</li>
 <li>789</li>
 <li>1111</li>
</ol>
</body>
</html>

Click here for OutPut

Working with HTML DOM

getElementById()

The getElementById() method of the document node returns a reference to the node with the specified id. The following example illustrates how getElementById() works.

Example:

<html>
<head>
<script type="text/javascript">
function getElements(PARENTNODE,TAGNAME)
{
 var elems = PARENTNODE.getElementsByTagName(TAGNAME);
 var msg="";
 for (var i=0; i < elems.length; i++)
 {
  msg += elems[i].innerHTML + "\n";
 }
 alert(msg);
}
</script>
<title>getElementById()</title>
</head>

<body onload="getElements(document.getElementById('Aman'),'li');">
<h2>For ID</h2>
<ol id="Aman">
 <li>XYZ1 </li>
 <li>1234</li>
 <li>9876</li>
 <li>ABCD1</li>
</ol>
<h2>123456789</h2>
<ol>
 <li>123</li>
 <li>456</li>
 <li>789</li>
 <li>1111</li>
</ol>
</body>
</html>

Click here for Output

Working with HTML DOM

Accessing Element and Text Nodes Hierarchically

There are several node methods and properties that provide access to other nodes based on their hierarchical relationship. The most common and best supported of these are shown in the table below.

Properties for Accessing Element Nodes
Property	Description
childNodes[]	A nodeList containing all of a node's child nodes.
firstChild	A reference to a node's first child node.
lastChild	A reference to a node's last child node
nextSibling	A reference to the next node at the same level in the document tree.
parentNode	A reference to a node's parent node.
previousSibling	A reference to the previous node at the same level in the document tree.

The this Object

The this keyword provides access to the current object. It references the object (or element) that it appears in.

Working with HTML DOM

Attaching Events

It is possible to attach all sorts of events, such as clicks, mouseovers, mouseouts, etc., to elements on the page. The simplest, standard cross-browser method for adding events is to assign an event handler property to a node. The syntax is shown below:

node.onevent = DoSomething;

Code for Attaching Events:

/*
 Function Name: AttachEvent
 Arguments: OBJ,EVT,FNCT
 Action: cross browser: attaches event to passed in object. 
 FNCT will be the event's callback function.
 Returns: true on success
*/
function AttachEvent(OBJ,EVT,FNCT)
{
 if (OBJ.addEventListener)
 {
  OBJ.addEventListener(EVT,FNCT,true);
  return true;
 } 
 else if (OBJ.attachEvent) 
 {
  return OBJ.attachEvent("on"+EVT,FNCT);
 }
}

Working with HTML DOM

Accessing Attribute Nodes

getAttribute

The getAttribute() method of an element node returns the value of the specified attribute. According to the DOM specification, the value should be returned as a string; however, Internet Explorer may return the attribute value as a string, number or boolean. The syntax is shown below.

myNode.getAttribute("AttName");

attributes[]

The attributes[] property references the collection of a node's attributes. On the face of it, such a collection could be very useful; however, the browsers handle the attributes collection differently, making use of it a bit risky.

Internet Explorer includes all possible attributes of a node in its attributes collection, whereas Firefox includes only those attributes currently used by the node. In practice, it's better to access attributes with the getAttribute() method.

Working with HTML DOM

Accessing Nodes by Type, Name or Value

nodeType

Every node has a nodeType property, which contains an integer corresponding to a specific type. For example, 1 is an element node, 2 is an attribute node, 3 is a text node, etc. The W3C DOM specifies a set of constants that correspond to these integers. These constants are properties of every node.

Unfortunately, Internet Explorer's DOM doesn't support these constants, so it's a good idea to add them to your DOM library. The constants are listed below:

Node Type Constants
Constant	Integer
ELEMENT_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
CDATA_SECTION_NODE	4
ENTITY_REFERENCE_NODE	5
ENTITY_NODE	6
PROCESSING_INSTRUCTION_NODE	7
COMMENT_NODE	8
DOCUMENT_NODE	9
DOCUMENT_TYPE_NODE	10
DOCUMENT_FRAGMENT_NODE	11
NOTATION_NODE	12

To add these to a script library, simply include the following code at the top of the script:

var ELEMENT_NODE = 1;

var ATTRIBUTE_NODE = 2;

var TEXT_NODE = 3;

var CDATA_SECTION_NODE = 4;

var ENTITY_REFERENCE_NODE = 5;

var ENTITY_NODE = 6;

var PROCESSING_INSTRUCTION_NODE = 7;

var COMMENT_NODE = 8;

var DOCUMENT_NODE = 9;

var DOCUMENT_TYPE_NODE = 10;

var DOCUMENT_FRAGMENT_NODE = 11;

var NOTATION_NODE = 12;

To find all of a node's child element nodes, you would loop through its childNodes collection checking each node one by one:

for (var i=0; i<node.childNodes.length; i++)
{
if (node.childNodes[i].nodeType==ELEMENT_NODE)
{
alert("This is an element node.");
}
}

nodeName

Every node also has a nodeName property. For elements and attributes, the nodeName property returns the tag name and attribute name, respectively. For other node types, the nodeName property returns a string beginning with a pound sign (#) and indicating the node type (e.g, #text or #comment).

nodeValue

The nodeValue is usually used with text nodes* and it simply returns the text value of the node.

Working with HTML DOM

Accessing Nodes by Class Name

There is no built in method for getting an element's child nodes by class name, but we can find the class of an element using its className property. The function shown in the file below loops through all elements in a document checking each element's className. It returns an array containing all the matched elements.

Example:

<html>
<body>
<Script Language="Text/JavaScript">

function GetElementsByClassName(CLASS,NODE)
 {
  var startNode = NODE || document;
  var AllTags = startNode.getElementsByTagName("*");
  if (AllTags.length == 0) AllTags = startNode.all; 
  var Elems = new Array();
  var re = new RegExp("(^|\\s+)" + CLASS + "(\\s+|$)");

  for (var i=0; i<AllTags.length; i++)
  {
   if (re.test(AllTags[i].className)) Elems[Elems.length] = AllTags[i];
  }
  return Elems;
 }
 
 function init()
 {
  var MenuOptions = GetElementsByClassName("MenuOptions");
  alert(MenuOptions.length);
 }
</script>

<title>Menus</title>
</head>
<body onload="init();">
 <div style="position:absolute; z-index:1000; left:0px; top:0px;" id="Menus">
  <div class="Menu" id="Menu1">
   <div class="MenuHead">EBIZEL</div>
   <div class="MenuOptions">
    <a href="http://www.ebizel.com">aaa</a><br>
    <a href="http://www.ebizel.com">sss</a><br>
    <a href="http://www.ebizel.com">xxx</a><br>
    <a href="http://www.ebizel.com">eee</a><br>
   </div>
  </div>
  <div class="Menu" id="Menu2">
   <div class="MenuHead">EDUCATION</div>
   <div class="MenuOptions">
    <a href="http://www.ebizel.com">rrr</a>
    <a href="http://www.ebizel.com">eeee</a>
   </div>
  </div>
 </div> 

</body>
</html>

Click here for Output:

Working with HTML DOM

Removing Nodes from the DOM

Element nodes have a removeChild() method, which takes a single parameter: the child node to be removed. There is no W3C method for a node to remove itself, but the following function will do the trick:

function RemoveElement(ELEM)
{
return ELEM.parentNode.removeChild(ELEM);
}
Sometimes it's useful to remove all of a node's children in one fell sweep. The function below will handle this.
function RemoveAllChildren(PARENT)
{
while (PARENT.hasChildNodes())
{
PARENT.removeChild(PARENT.childNodes[0]);
}
}

Working with HTML DOM

Creating New Nodes

The document node has separate methods for creating element nodes and creating text nodes: createElement() and createTextNode(). These methods each create a node in memory that then has to be placed somewhere in the object hierarchy.

A new node can be inserted as a child to an existing node with that node's appendChild() and insertBefore() methods. These methods and some others are described in the table below.

Methods for Inserting Nodes
Method	Description
appendChild()	Takes a single parameter: the node to insert, and inserts that node after the last child node.
insertBefore()	Takes two parameters: the node to insert and the child node that it should precede. The new child node is inserted before the referenced child node.
replaceChild()	Takes two parameters: the new node and the node to be replaced. It replaces the old node with the new node and returns the old node.
setAttribute()	Takes two parameters: the attribute name and value. If the attribute already exists, it replaces it with the new value. If it doesn't exist, it creates it.

Example:

<html>
<head> 

<script type="text/javascript">
function AppendNewListItem()
{
 var li = document.createElement("li");
 var liText = document.createTextNode("New List Item");
 li.appendChild(liText);
 List.appendChild(li);
}

function PrependNewListItem()
{
 var li = document.createElement("li");
 var liText = document.createTextNode("New List Item");
 li.appendChild(liText);
 List.insertBefore(li,List.firstChild);
}

function ChangeStartNum()
{
 var start;
 if (start=List.getAttribute("start"))
  start++;
 else
  start=2;
 List.setAttribute("start",start);
}

function ReplaceOlWithUl()
{
 List.parentNode.replaceChild(List2,List);
 List = List2;
}

var List, List2;
function init()
{
 List = document.getElementById("TheList");
 List2 = document.getElementById("TheList2");
}
</script>
<title>Inserting Nodes</title>
</head>

<body onload="init()">
<div onclick="AppendNewListItem()">Append List Item</div>
<div onclick="PrependNewListItem()">Prepend List Item</div>
<div onclick="ChangeStartNum()">Change Start Number</div>
<div onclick="ReplaceOlWithUl()">Replace ordered list with bulleted list</div>
<ol id="TheList">
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
</ol>
<ul id="TheList2">
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
</ul>
</body>
</html>

Click here for Output

Working with HTML DOM

setAttribute() Method

You can use the setAttribute() method to change the value of all attributes by name as you would expect with one exception. In Internet Explorer, the class attribute must be referrred to as "className" in the setAttribute() method. This means that you have to branch your code when using setAttribute() for setting the class:

var isIE = (navigator.appName == "Microsoft Internet Explorer");
if (isIE)
{
var classTerm = "className";
}
else { var classTerm = "class";
}
node.setAttribute(classTerm,"warning");

Rather than go through all this work, it is easier to use the className property to set the class attribute. This will work in both browsers:

node.className = "warning";

HTML Elements

Property Attributes

HTML attributes are exposed as properties on the element object. The name of the exposed property always uses the naming conventions, and is independent of the case of the attribute in the source document.

The data type of the property is determined by the type of the attribute as determined by the HTML 4.0 transitional and frameset DTDs. The attributes have the semantics (including case-sensitivity) given in the HTML 4.0 specification.

The attributes are exposed as properties for compatibility with "DOM Level 0". This usage is deprecated because it can not be generalized to all possible attribute names, as is required both for XML and potentially for future versions of HTML.

We recommend the use of generic methods on the core Element interface for setting, getting and removing attributes.

DTD Data Type	Object Model Data Type
CDATA	DOMString
Value list (e.g., (left \| right \| center))	DOMString
one-value Value list (e.g., (border))	boolean
Number	long int

The return value of an attribute that has a data type that is a value list is always capitalized, independent of the case of the value in the source document.

For example, if the value of the align attribute on a P element is "left" then it is returned as "Left". For attributes with the CDATA data type, the case of the return value is that given in the source document.

HTML Elements

Naming Exceptions

To avoid name-space conflicts, an attribute with the same name as a keyword in one of our chosen binding languages is prefixed.

For HTML, the prefix used is "html". For example, the for attribute of the LABEL element collides with loop construct naming conventions and is renamed htmlFor.

Exposing Element Type Names (tagName)

The element type names exposed through a property are in uppercase. For example, the body element type name is exposed through the "tagName" property as "BODY".

HTML Elements

Interface HTMLElement

All HTML element interfaces derive from this class. Elements that only expose the HTML core attributes are represented by the base HTMLElement interface. These elements are as follows:

• HEAD

• special: SUB, SUP, SPAN, BDO

• font: TT, I, B, U, S, STRIKE, BIG, SMALL

• phrase: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ACRONYM, ABBR

• list: DD, DT

• NOFRAMES, NOSCRIPT

• ADDRESS, CENTER

Note. The style attribute for this interface is reserved for future usage.

IDL Definition

interface HTMLElement : Element {
attribute DOMString id;
attribute DOMString title;
attribute DOMString lang;
attribute DOMString dir;
attribute DOMString className;
};

Attributes

id

The element's identifier. See the id attribute definition in HTML 4.0.

title

The element's advisory title. See the title attribute definition in HTML 4.0.

lang

Language code defined in RFC 1766. See the lang attribute definition in HTML 4.0.

dir

Specifies the base direction of directionally neutral text and the directionality of tables. See the dir attribute definition in HTML 4.0.

className

The class attribute of the element. This attribute has been renamed due to conflicts with the "class" keyword exposed by many languages. See the class attribute definition in HTML 4.0.

PC TRAINING

HTML DOM - PART I

0 comments:

CATEGORIES

POPULAR POSTS

BLOG ARCHIVE

ABOUT ME

Categories

About

Link list 2

Follow us

Link list 3