Dojo separates the dom operation into different files: dojo/dom.js;dojo/dom-attr.js;dojo/dojo-class.js;dojo/dom-contruct.js;dojo/dom-prop.js;dojo/dom-style.js;dojo/dom-form.js. You can load the individual file when you need the corresponding method.If you want to use all of them, there is short-cut way that use dojo/_base/html.js. html.js file integrates dom operation function together.
define(["./kernel", "../dom", "../dom-style", "../dom-attr", "../dom-prop", "../dom-class", "../dom-construct", "../dom-geometry"], function(dojo, dom, style, attr, prop, cls, ctr, geom){
// mix-in dom
dojo.byId = dom.byId;
dojo.isDescendant = dom.isDescendant;
dojo.setSelectable = dom.setSelectable;
// mix-in dom-attr
dojo.getAttr = attr.get;
dojo.setAttr = attr.set;
dojo.hasAttr = attr.has;
dojo.removeAttr = attr.remove;
dojo.getNodeProp = attr.getNodeProp;
dojo.attr = function(node, name, value){
if(arguments.length == 2){
return attr[typeof name == "string" ? "get" : "set"](node, name);
}
return attr.set(node, name, value);
};
// mix-in dom-class
dojo.hasClass = cls.contains;
dojo.addClass = cls.add;
dojo.removeClass = cls.remove;
dojo.toggleClass = cls.toggle;
dojo.replaceClass = cls.replace;
// mix-in dom-construct
dojo._toDom = dojo.toDom = ctr.toDom;
dojo.place = ctr.place;
dojo.create = ctr.create;
dojo.empty = function(node){ ctr.empty(node); };
dojo._destroyElement = dojo.destroy = function(node){ ctr.destroy(node); };
// mix-in dom-geometry
dojo._getPadExtents = dojo.getPadExtents = geom.getPadExtents;
dojo._getBorderExtents = dojo.getBorderExtents = geom.getBorderExtents;
dojo._getPadBorderExtents = dojo.getPadBorderExtents = geom.getPadBorderExtents;
dojo._getMarginExtents = dojo.getMarginExtents = geom.getMarginExtents;
dojo._getMarginSize = dojo.getMarginSize = geom.getMarginSize;
dojo._getMarginBox = dojo.getMarginBox = geom.getMarginBox;
dojo.setMarginBox = geom.setMarginBox;
dojo._getContentBox = dojo.getContentBox = geom.getContentBox;
dojo.setContentSize = geom.setContentSize;
dojo._isBodyLtr = dojo.isBodyLtr = geom.isBodyLtr;
dojo._docScroll = dojo.docScroll = geom.docScroll;
dojo._getIeDocumentElementOffset = dojo.getIeDocumentElementOffset = geom.getIeDocumentElementOffset;
dojo._fixIeBiDiScrollLeft = dojo.fixIeBiDiScrollLeft = geom.fixIeBiDiScrollLeft;
dojo.position = geom.position;
dojo.marginBox = function marginBox(/*DomNode|String*/node, /*Object?*/box){
return box ? geom.setMarginBox(node, box) : geom.getMarginBox(node); // Object
};
dojo.contentBox = function contentBox(/*DomNode|String*/node, /*Object?*/box){
return box ? geom.setContentSize(node, box) : geom.getContentBox(node); // Object
};
dojo.coords = function(/*DomNode|String*/node, /*Boolean?*/includeScroll){
dojo.deprecated("dojo.coords()", "Use dojo.position() or dojo.marginBox().");
node = dom.byId(node);
var s = style.getComputedStyle(node), mb = geom.getMarginBox(node, s);
var abs = geom.position(node, includeScroll);
mb.x = abs.x;
mb.y = abs.y;
return mb; // Object
};
// mix-in dom-prop
dojo.getProp = prop.get;
dojo.setProp = prop.set;
dojo.prop = function(/*DomNode|String*/node, /*String|Object*/name, /*String?*/value){
if(arguments.length == 2){
return prop[typeof name == "string" ? "get" : "set"](node, name);
}
// setter
return prop.set(node, name, value);
};
// mix-in dom-style
dojo.getStyle = style.get;
dojo.setStyle = style.set;
dojo.getComputedStyle = style.getComputedStyle;
dojo.__toPixelValue = dojo.toPixelValue = style.toPixelValue;
dojo.style = function(node, name, value){
switch(arguments.length){
case 1:
return style.get(node);
case 2:
return style[typeof name == "string" ? "get" : "set"](node, name);
}
// setter
return style.set(node, name, value);
};
return dojo;
});