> For the complete documentation index, see [llms.txt](https://nswamy14.gitbook.io/node-i2djs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nswamy14.gitbook.io/node-i2djs/api-reference/elements-api.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.