noir-dom

creating DOM objects

Usage no npm install needed!

<script type="module">
  import noirDom from 'https://cdn.skypack.dev/noir-dom';
</script>

README

Noir DOM

Pack for create DOM Object.

Install

Install with npm:

npm install noir-dom

Install with yarn:

yarn add noir-dom

Import

import {DOM} from 'noir-dom';
new DOM();

or

var dom = require('noir-dom');
new dom.DOM();

Create default element

new DOM();

Returned:

```html
```

All Options

  • tag
  • class
  • attributes
  • html
  • data
  • vars
  • childrens
  • events
  • methods

Create custom element

new DOM({
    tag: 'p',
    class: 'alert',
    html: 'Example text',
});

Returned:

```html

Example text

```

Parameters

tag

string, optional, default = 'div'

Html tag for new element.

```js new DOM({ tag: 'a' }); ```

class

string, optional

classList

```js new DOM({ class: 'alert alert-success' }); ```

attributes

object, optional

list of attributes

```js new DOM({ attributes: { id : '1', rel: '12' } }); ```

html

string, optional

innerHTML

```js new DOM({ html: 'example text' }); ```

data

object, optional

data attributes

```js new DOM({ data: { count: '12' } }); ``` ```html
```

childrens

array, optional

childrens for append to element. Children can be new DOM(), other DOM element, or object with parameters for new DOM().

```js const x = document.createElement('a'); new DOM({ childrens: [ x, new DOM({ tag: 'p' }), { tag: 'span' } ] }); ``` ```html

```

vars

object, optional

Custom variables for element.

```js new DOM({ vars: { x: 'xxx', y: 'yyy' } }); ```

events

object, optional

Custom events for element.

```js new DOM({ events: { click: () => { /* body of function */ }, mouseover: function(){ /* body of function */ } } }); ```

methods

object, optional

Custom methods for element.

```js new DOM({ methods: { slide: () => { /* body of function */ }, showElementsList: function(){ /* body of function */ } } }); ```