# Elements API

Element Creation

### **#.createEl(ElementConfig):**

**createEl** takes **Element config** as an input which contains element '**el**' type with '**attr**' attributes and '**style**' properties. 

```
   var node = renderer.createEl({
                  el:'rect',
                  attr:{
                      height:100,
                      width:100,
                      x:0,
                      y:0
                  },
                  style:{
                    fill:'red' //if its Canvas renderer, then it will be canvas style attr 'fillStyle'
                  },
                  bbox: Boolean // Canvas API special property, to turn ON/OFF bounding box computations
              })
```

Examples:

* [Canvas Shapes](https://i2djs.github.io/I2Djs/examples/canvas/shapes.html)
* [SVG Shapes](https://i2djs.github.io/I2Djs/examples/svg/shapes.html)
* [WebGL Shapes](https://github.com/I2Djs/I2Djs/tree/gh-pages/examples/webGL) -- update this example

### **#.createEls(dataArray, ElementConfig)**

CreateEls can be used to create more than one element, based on the data array. It accepts data array as a first argument and Element config as a second element.  It creates elements for every data value. property values can be an access function, which receives data as an argument.

```
var data = [1,2,3]
var node = renderer.createEls(data, {
                  el:'rect',
                  attr:{
                      height:100,
                      width:100,
                      x: function(d,i){ return d*100 },
                      y: function(d,i){ return d*100 }
                  },
                  style:{
                    fill:'red' //if its Canvas renderer, then it will be canvas style attr 'fillStyle'
                  }
              });
```

### **#.fetchEl(selector\[,dataObject])**

Fetches single child node for a given CSS selector. It also accepts data object as a second argument, optional param, to fetch based on bound data. It takes a simple CSS-[selector](https://github.com/I2Djs/I2Djs/wiki/API-Reference#selector) as an input and returns [Element](https://github.com/I2Djs/I2Djs/wiki/) instance.

```
var node = renderer.fetchEl(selector, dataValue[optional])

CSS Selectors: 
eg..: .className, #Id, elementName
```

### **#.fetchEls(selector\[,dataArray])**

Fetches multiple children for a given CSS selector. It also accepts data array as a second argument, optional param, to fetch based on bound data. It takes a simple CSS-[selector](https://github.com/I2Djs/I2Djs/wiki/API-Reference#selector) as an input and returns [Element](https://github.com/I2Djs/I2Djs/wiki/)s instance.

```
var nodes = renderer.fetchEl(selector)
```

### **#.setAttr(***key, value***);**

Set attributes. It takes either a single **key, value pair,** or an **object** as an argument. The Value of a property can be a function. if you send 'null' as 

```
var nodes = element.setAttr(key,value);
```

### **#.setStyle()**

Set style properties to the element. It takes either a single **key, value pair** , or an **object with multiple key-value pairs**.

```
var nodes = element.setStyle(key,value);
```

### **#.getAttr()**

To fetch attribute value. It takes attribute name input, gives value as an output.

```
var value = element.getAttr(key);
```

### **#.getStyle()**

To fetch DOM style value. It takes style property input, gives value as an output.

```
var value = element.getStyle(key);
```

### **#.animateTo()**

To perform animation transitions of one or more elements from the current state to the target state in a given duration(ms).

```
circleNode.animateTo({
    duration: 500,
    loop: Infinity,
    ease: 'easeInOutSin',
    direction: 'alternate',
    attr: {
        r: 200
    },
    style: {
        fillStyle: '#00ff00'
    }
});
```

### **#.interrupt()**

To interrupt transitions on the context node. By calling the interrupt it kills all the transitions on the node.

```
circleNode.interrupt();
```

### **#.on(eventType, eventHndlr)**

To bind event handlers on the graphical element. Accepts eventType and eventHandler as arguments. The handler receives the event object as an argument.

```
element.on('click',function(event){ // if no data bound, then only event object.
    this; // this refers to the element context.
});
```

### **#.node()**

API to fetch Dom node. Returns Dom object(SVG) and VDom node(Canvas/WebGL).

```
   var node = element.node()
```

### **#.data()**

API to fetch/set data bound to the graphical node.

```
   var node = element.data()
```

### **#.remove()**

API to remove the current element from the parent element. Node on which remove invoked will be removed from the parent's children list

```
       element.remove()
```

### **#.removeChild(*****childNode*****)**

API to remove the child from its child's list. Takes node instance as an argument.

```
       element.removeChild(elementChildInstance)
```