# 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)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nswamy14.gitbook.io/i2djs-v4/api-reference/elements-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.