Dojo provides three modules with basic functions on the document tree:

• dojo.dom - basic functions such as moving / copying / deleting children. These functions are meant to apply equally to html or svg or vml nodes.
• dojo.style - functions relating to style attributes, such as calculating the size of elements, setting their opacity, etc.
• dojo.html - this module contains functions that only apply to HTML nodes, such as appending/removing classes

All of the functions above are written to either mask browser incompatibilites, or to provide functionality that wasn't provided within the standard javascript API.

All of the functions can take either a node or an id as their first argument.

Sizing

One particular set of functions to note are the sizing functions.

An HTML block element has the following format:

		+-------------------------+

		|  margin                 |

		| +---------------------+ |

		| |  border             | |

		| | +-----------------+ | |

		| | |  padding        | | |

		| | | +-------------+ | | |

		| | | |   content   | | | |

		| | | +-------------+ | | |

		| | +-|-------------|-+ | |

		| +-|-|-------------|-|-+ |

		+-|-|-|-------------|-|-|-+

		| | | |             | | | |

		| | | |<- content ->| | | |

		| |<------ inner ------>| |

		|<-------- outer -------->|

		+-------------------------+

There are three sizes associated with this element:

• outer - size of the outermost box, including margin, border, padding, and content
• inner - size of the second box, including border, padding, and content
• content - size of the innermost box

Depending on browser, and mode, asking for the width/height of an element will return different results; sometimes it will give you the content size and sometimes it will give you the inner size. Therefore, it's important to always use dojo's functions for getting/setting the size;

• dojo.style.getOuterWidth / dojo.style.getOuterHeight
• dojo.style.getInnerWidth / dojo.style.getInnerHeight

Classes

An HTML element can have multiple classes, such as:

Dojo provides functions to handle this class string as an ordered set, so you don't need to do string manipulations to add/remove items from the class list:

• dojo.html.addClass(node, className)
• dojo.html.prependClass(node, className)
• dojo.html.removeClass(node, className)
• dojo.html.replaceClass(node, className, oldClassName)