Document Object Model & Javascript

• The Document Object Model is the model that describes how all elements in an HTML page, like input fields,table, images, paragraphs,links etc. are related to the topmost structure i.e. the document itself.

• Document Object Model represent the current web page as a tree of javascript objects.

• DOM allows us to view and modify the page elements using javascript after page has loaded.

Nodes:

In Document Object Model everything on your web page whatever it may be exactly is a Node.

There are three types of nodes possible

• Element Node –These are the HTML tags and can have attriburtes and children.

• Text Node –These are text in side block elements and can’t have child & attribute.

• Attribute Node –These are attribute value pair inside tag and can’t have child,attribute.

Suppose if you have written <p>Hello Abhishek</p> that means you have created two nodes i.e.

an element node ‘p’ and a text node whose content are ‘Hello Abhishek’.As text node is inside the

paragraph tag hence it is child node of the element node ‘p’.There are methods using which you

can create nodes

>>createDocumentFragment() Returns a document fragment that can be used to add

multiple nodes to the document

>>createElement(’element_name’) Returns a new element of type element_name

>>createTextNode(’text content’) Returns a text node with a string value matching the

text content

Referencing the Nodes:

There are methods using which one can obtain the reference of a node.

>>getElementById(’element id’) Returns a reference to the element with the specified

id

>>getElementByTagName(’element name’) Returns a collection of all elements with the

specified element name

Traversing the DOM tree:

Document Object Model parses the entire document in a tree structure. There

are properties associated with each node using which one can obtain access to any node in the

Dom tree.

>>childNodes[] A collection of all text nodes and element nodes the

node contains directly if node is an element node or

document node

>>parentNode A reference to the containing node

>>firstChild The first entry in the childNodes collection

>>lastChild The last entry in the childNodes collection

>>nextSibling The next entry in the childNodes collection of the

parent node

>>previousSibling The previous entry in the childNodes collection of the

parent node

Modifying the DOM Tree:

Every DOM node has various methods

>>appendChild(node) Add the specified node at the end of the child node

list of the parent node.

>>insertBefore(newchild,oldchild) Places the new node before the old child in the child

node list

>>removeChild(node) Removes the node from the nodes child list

>>replaceChild(newchild, oldchild) Replaces the old child from the new child in child

node list

Imagecache is a nice and fast method to manipulate images.

We can add watermark, scale, and crop, resize images as required.

It works with different drupal modules like ubercart, taxonomy etc.

We just need to follow few simple steps and it will ease our job:-

1. Install module
2. Administer -> Site Building -> Image cache
3. It works around presets i.e. you need to create a preset and define actions in the preset. You can define multiple actions in a single preset. For e.g. put watermark on an image and also scale the image.
4. After creating preset you need to use that preset on content type, for this just go to the content type manage screen in admin i.e. “Administer -> Content Management -> Content Types”, then configure the content type and select a particular preset from a teaser dropdown of a particular field on which you want to apply the preset.
5. You can also manually apply preset by calling the preset on a .tpl file like “print theme('imagecache', 'small', 'test.jpg', 'just a test image', 'test image');"

You can also create custom Imagecache actions.

Imagecache create a folder of preset and copy the image to its folder after manipulations. Your original image will remain unchanged.

For more details check link @ “http://drupal.org/node/163561″