dojo/dom-prop

Project owner:Eugene Lazutkin since:V1.7

Contents

• dojo/dom-prop
  • Features
  • See also

This module defines the core dojo DOM properties API. The convention for the return variable for this module is domProp.

DOM properties differ from DOM attributes in that they can be of various types (for example, the “checked” property of a checkbox is a Boolean), whereas attributes always contain string values. If you would like to manipulate HTML code, you probably want to use this module instead of dojo/dom-attr.

The deprecated legacy features are set in dojo/_base/html.

Features

get()

Handles normalized getting of properties on DOM nodes.

Usage

require(["dojo/dom-prop"], function(domProp){
  domProp.get("myNode", "innerHTML");
});

require(["dojo/dom-prop"], function(domProp){ domProp.get("myNode", "innerHTML"); });

Attributes

Argument	Type	Description
node	String|DomNode	ID or reference to the element to get the property on
name	String	The name of the property to get

Examples

The following code gets the innerHTML property of a DOM node.

require(["dojo/dom-prop", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domProp, dom, on){
  on(dom.byId("execute"), "click", function(){
    var output = domProp.get("example", "innerHTML");
    dom.byId("output").innerHTML = "Node example.innerHTML='" + output + "'";
  });
});

require(["dojo/dom-prop", "dojo/dom", "dojo/on", "dojo/domReady!"], function(domProp, dom, on){ on(dom.byId("execute"), "click", function(){ var output = domProp.get("example", "innerHTML"); dom.byId("output").innerHTML = "Node example.innerHTML='" + output + "'"; }); });

<button id="execute" type="button">domProp.get()</button>
<div id="example">Hello World!</div>
<pre id="output"></pre>

<button id="execute" type="button">domProp.get()</button> <div id="example">Hello World!</div> <pre id="output"></pre>

set()

Handles normalized setting of properties on DOM nodes.

When passing functions as values, note that they will not be directly assigned to slots on the node, but rather the default behavior will be removed and the new behavior will be added using dojo/_base/connect::connect(), meaning that event handler properties will be normalized and that some caveats with regards to non-standard behaviors for onsubmit apply. Namely that you should cancel form submission using dojo/_base/event::stop() on the passed event object instead of returning a boolean value from the handler itself.

Attributes

Argument	Type	Description
node	String|DomNode	ID or reference to the element to get the property on
name	String|Object	The name of the property to get or a hash of name/values
value	String?	The value to be set

Examples

Using set() to set the value of innerHTML on a node:

require(["dojo/dom-prop", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domProp, dom, on){
  on(dom.byId("execute"), "click", function(){
    domProp.set("example", "innerHTML", "Hello World!");
  });
});

require(["dojo/dom-prop", "dojo/dom", "dojo/on", "dojo/domReady!"], function(domProp, dom, on){ on(dom.byId("execute"), "click", function(){ domProp.set("example", "innerHTML", "Hello World!"); }); });

<button id="execute" type="button">domProp.set()</button>
<div id="example">I'm going to change!</div>

<button id="execute" type="button">domProp.set()</button> <div id="example">I'm going to change!</div>

Using set() to set multiple values in the same call:

require(["dojo/dom-prop", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domProp, dom, on){
  on(dom.byId("execute"), "click", function(){
    domProp.set("example", {
      innerHTML: "Hello World!",
      class: "example"
    });
  });
});

require(["dojo/dom-prop", "dojo/dom", "dojo/on", "dojo/domReady!"], function(domProp, dom, on){ on(dom.byId("execute"), "click", function(){ domProp.set("example", { innerHTML: "Hello World!", class: "example" }); }); });

<button id="execute" type="button">domProp.set()</button>
<div id="example">I'm going to change!</div>

<button id="execute" type="button">domProp.set()</button> <div id="example">I'm going to change!</div>

.example { margin: 1em; padding: 1em; width: 300px; text-align: center; background: blue; color: white; font-weight: bold; }

.example { margin: 1em; padding: 1em; width: 300px; text-align: center; background: blue; color: white; font-weight: bold; }

See also

• dojo/dom - Core DOM API
• dojo/dom-attr - DOM Attribute API
• dojo/dom-class - Dojo DOM Class API
• dojo/dom-style - DOM Style API
• dojo/_base/html - Legacy API aliases

Table of Contents

• dojo/dom-prop
  • Features
    • get()
      • Usage
      • Attributes
      • Examples
    • set()
      • Attributes
      • Examples
  • See also