XModify provides a declarative syntax for modifying the HTML DOM or Dojo Components. It consists of a modifications wrapper followed by one or more operations. These operations include set-attribute, replace-children, and so forth. XModify provides the same functionality as a W3C DOM API. For example, the following XModify will change the src attribute of the image element. The select statement in this syntax is a CSS query against the user HTML DOM; it locates the element on which to act on.

 
<xm:Xmodify xmlns:xm="dojoe">
    <xm:set-attribute select="img[@id='image1']">
        <xm:attribute name="src" value="images/background.JPG"/>
    </xm:set-attribute>
</xm:Xmodify >
 

For the full XModify syntax open the API reference and click on schema syntax. XModify appears in the left menu. Macros provide containers for XModify so that modifications can be run whenever needed. Executing a Macro can be done be calling dojoe.macros..execute() The following macro contains modifications that update the src attribute of an image.

 
<declarations>
    <macro:Macro id="macro1"  xmlns:macro="dojoe">
    <xm:Xmodify xmlns:xm="dojoe">
        <xm:set-attribute select="//img[@id='image1']">
            <xm:attribute name="src" value="images/background.JPG"/>
        </xm:set-attribute>
    </xm:Xmodify>
    </macro:Macro>
</declarations>
 

An event handler uses the macro container to find and execute the macro:

 
<ui xmlns:dijit="dijit" xmlns="html" xmlns:form="dijit.form">
    <dijit:layout.LayoutContainer>
    <dijit:layout.ContentPane>
        <img src="images/foreground.JPG" id="image1"/>
        <br/>
        <form:Button label="Press me"  
             onclick="dojoe.macros.macro1.execute()" 
             id="button1"/>
    </dijit:layout.ContentPane>
    </dijit:layout.LayoutContainer>
</ui>