dojo/dom-attr ¶

Project owner:	Eugene Lazutkin
since:	V1.7

Contents

dojo/dom-attr
- Features
  - has()
  - get()
  - set()
  - remove()
  - getNodeProp()
- See also

This module defines the core Dojo DOM attributes API. The standard return variable for this module is domAttr.

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

Features ¶

has()¶

A function that checks if an attribute is present on a DOM node, and returns the truthy value if it is there, and falsy value otherwise.

Usage¶

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.has("myNode", "someAttr");
});

Arguments¶

Argument	Description
node	id or reference of the DOM node to get/set style for
attr	the attribute property name
result	truthy, if the attribute is present, falsy otherwise

Examples¶

Checking to see if a particular node has an attribute.

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  if (domAttr.has("model", "name")){
    output += "Node model has attribute name <br/>";
    }else{
    output += "Node model does not have attribute name <br/>";
  }
  if (domAttr.has("model", "baz")){
    output += "Node 'model' has attribute baz <br/>";
  }else{
    output += "Node 'model' does not have attribute baz <br/>";
  }
  if (domAttr.has("model", "foo")){
    output += "Node 'model' has attribute foo <br/>";
  }else{
    output += "Node 'model' does not have attribute foo <br/>";
  }
  dom.byId("output").innerHTML = output;
});

<input id="model" name="model" type="text" baz="foo" /> &mdash; our model node
<div id="output"></div>

get()¶

A function that handles normalized getting of attributes on DOM Nodes and return the value of the requested attribute or null if that attribute does not have a specified or default value.

Usage¶

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.get("myNode", "someAttr");
});

Arguments¶

Argument	Description
node	id or reference to the element to get the attribute on
attr	the name of the attribute to get

Examples¶

Getting some values from a node.

Here is the JavaScript code that will read the values of the attributes and output the results.

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  output += "Node 'model' attribute 'name': "+ domAttr.get("model", "name") + "<br/>";
  output += "Node 'model' attribute 'baz': "+ domAttr.get("model", "baz") + "<br/>";
  output += "Node 'model' attribute 'foo': "+ domAttr.get("model", "foo") + "<br/>";
  dom.byId("output").innerHTML = output;
});

Here is our generic HTML snippet.

<input id="model" name="model" type="text" baz="foo" /> &mdash; our model node
<div id="output"></div>

A function that handles normalized setting of attributes 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.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 evt.preventDefault() on the passed event object instead of returning a boolean value from the handler itself. It returns the DOM node.

Usage¶

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.set("myNode", "someAttr", "value");
});

Arguments¶

Argument	Description
node	id or reference to the element to set the attribute on
attr	the name of the attribute to set, or a hash of key-value pairs to set
value	the value to set for the attribute, if the name is a string

Examples¶

Here is an example of changing a value of an attribute:

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  output += "Node 'model' attribute 'baz' is: " + domAttr.get("model", "baz") + "<br/>";
  domAttr.set("model", "baz", "bar");
  output += "Node 'model' attribute 'baz' now is: " + domAttr.get("model", "baz") + "<br/>";
  dom.byId("output").innerHTML = output;
});

<input id="model" name="model" type="text" baz="foo" /> &mdash; our model node
<div id="output"></div>

Here is an example of using an object to set multiple attribute values:

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  output += "Node 'model' attribute 'baz' is: " + domAttr.get("model", "baz") + "<br/>";
  output += "Node 'model' attribute 'value' is: " + domAttr.get("model", "value") + "<br/>";
  domAttr.set("model", { baz: "bar", value: "Hello World!" });
  output += "Node 'model' attribute 'baz' now is: " + domAttr.get("model", "baz") + "<br/>";
  output += "Node 'model' attribute 'value' now is: " + domAttr.get("model", "value") + "<br/>";
  dom.byId("output").innerHTML = output;
});

<input id="model" name="model" type="text" baz="foo" /> &mdash; our model node
<div id="output"></div>

remove()¶

Is a function that removes an attribute from a DOM node. It is modeled after DOM’s removeAttribute, but unlike the latter it normalizes standard attribute names to smooth over differences between browsers, or to provide convenient aliases, (e.g., className is aliased to class).

Usage¶

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.remove("myNode", "someAttr");
});

Arguments¶

Argument	Description
node	id or reference to the element to remove the attribute on
attr	the attribute name

Examples¶

Here is an example of removing the disabled attribute from a DOM node:

require(["dojo/dom-attr", "dojo/domReady!"], function(domAttr){
  removeDisabled = function(){
    domAttr.remove("model", "disabled");
  }
});

<input id="model" name="model" disabled="disabled" type="text" baz="foo" /> &mdash; our model node <br/>
<button onclick="removeDisabled();">Remove Disabled</button>

getNodeProp()¶

Is a companion function for domAttr.get. Unlike the latter it favors properties falling back on attributes, if a property was not present.

It is useful when you don’t care if somebody set an attribute on a node in HTML, or not, but you want to read a default/current value, which is used by a browser. For example, if user didn’t specify type attribute on input element, it is default value is "text". You don’t need to know all defaults, or how browser interprets missing attributes exactly, just use domAttr.getNodeProp.

There is no corresponding setNodeProp. If you want to set a property value, use straight assignment.

Usage¶

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.getNodeProp("myNode", "someProperty");
});

Arguments¶

Argument	Description
node	id or reference to the element to get the property on
attr	the attribute property name

Examples¶

The following example reads effective values from the input node.

require(["dojo/dom-attr", "dojo/dom"], function(domAttr, dom){

  function showAttribute(name){
    var result = domAttr.getNodeProp("model", name);
    var output = dom.byId("output").innerHTML;
    output += name + " is '" + result + "' <br/>";
    dom.byId("output").innerHTML = output;
  }

  checkAttributes = function(){
    showAttribute("id");
    showAttribute("type");
    showAttribute("name");
    showAttribute("value");
    showAttribute("innerHTML");
    showAttribute("foo");
    showAttribute("baz");
  }

});

<p><input id="model" name="model" baz="foo"> &mdash; our model node</p>
<p><button onclick="checkAttributes();">Check attributes</button></p>
<p id="output"></p>

dojo/dom-attr ¶

Features ¶

has()¶

Usage¶

Arguments¶

Examples¶

get()¶

Usage¶

Arguments¶

Examples¶

set()¶

Usage¶

Arguments¶

Examples¶

remove()¶

Usage¶

Arguments¶

Examples¶

getNodeProp()¶

Usage¶

Arguments¶

Examples¶

See also ¶

Table of Contents