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

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

CreateEls can be used to create multiple elements based on the data array. The first argument it accepts is the data array and the second is the element configuration. It creates elements for every data value, and property values can be an access function that 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])**

This function retrieves a single child node using a CSS selector. Additionally, it can also take in a data object as a second argument, which is optional, to retrieve the child node based on the bound data. The function uses a CSS selector to find the desired child node and returns an Element instance.

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

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

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

Use fetchEls method to retrieve multiple child nodes based on a CSS selector. This method also supports an optional "data" argument, allowing you to retrieve elements based on bound data. Simply pass a CSS selector as the first argument and the data array as the second argument, if needed, to retrieve an instance of multiple elements that match the selector.

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

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

Set attribute value. It takes either a single **key, value pair,** or an **object** with multiple key/value pair as an argument. The Value of a property can be a function. Send 'null' as value, to delete the property from the element.

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

### **#.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/node-i2djs/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.