How do I add a class to a dojo widget?

Question

I want to add multiple classes to the widget below for styling purposes:

var filteringSelect = new dijit.form.FilteringSelect({
    id: "test",
},
"test");

How would I accomplish this?

Here is the actual html:

 <div tabindex="-1" wairole="combobox" dojoattachpoint="comboNode" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" id="widget_test" class="dijit dijitReset dijitInlineTable dijitLeft dijitComboBox" role="combobox" widgetid="test">
        <div style="overflow: hidden;">
            <div dojoattachevent="onmousedown:_onArrowMouseDown,onmouseup:_onMouse,onmouseenter:_onMouse,onmouseleave:_onMouse" wairole="presentation" dojoattachpoint="downArrowNode" class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton" role="presentation">
                <div class="dijitArrowButtonInner">
                    &thinsp;
                </div>
                <div class="dijitArrowButtonChar">
                    ▼
                </div>
            </div>
            <div class="dijitReset dijitValidationIcon">
                <br>
            </div>
            <div class="dijitReset dijitValidationIconText">
                Χ
            </div>
            <div class="dijitReset dijitInputField">
                <input type="text" waistate="haspopup-true,autocomplete-list" wairole="textbox" dojoattachpoint="textbox,focusNode" dojoattachevent="onkeypress:_onKeyPress,compositionend" class="dijitReset" autocomplete="off" role="textbox" aria-haspopup="true" aria-autocomplete="list" aria-invalid="false" id="test" tabindex="0" aria-required="true" value="United States"><input type="text" style="display: none;" name="">
            </div>
        </div>
    </div>

Answer 1

dojo.addClass(filteringSelect.domNode, "yourClass");

This also handles the situations in which a DOM node already contains "youClass" as a CSS class so that duplicates aren't added. dojo also provides other methods to handle CSS class management with dojo.removeClass() and dojo.toggleClass().

http://staging.dojotoolkit.org/reference-guide/dojo/addClass.html

Answer 2

Further working methods:

(1) The procedural version, creating the widget from script:

var filteringSelect = new dijit.form.FilteringSelect({
    id: "test",
    class: "myClassName"
},
"test");

(2) If you set simply the "class" attribute, it will call in the dijit/_WidgetBase.js the setter function _setClassAttr, which does exactly what you want:

<div data-dojo-type="dijit/form/SomeThing" class="myClassName"></div>

(3) You can set the dojo properties of the widget, as here:

<div data-dojo-type="dijit/form/SomeThing" data-dojo-props="class: 'myClassName'"></div>