DOM

An attempt to create a better and simpler DOM.

Please do not use this package yet as it probably has some major flaws that are not tested yet.

Because the package is not production ready there will be changes to documentation and functionality. If you upgrade to a newer version be sure to read about changes made and update your code.

Getting Started

To get started just import DOM into the browser by adding:

<script src="https://gitcdn.xyz/repo/iFaxity/dom/master/dom.js"></script>

Or you can import it with any module loader with support for CommonJS or AMD Modules. Like RequireJS or Webpack.

Features

For full API Documentation visit the github docs page here

Simplified DOM management

// Get multiple elements from query
DOM.findAll("#element > div.item");

// Or single elements based on properties
DOM.findById("element");

// Set events on an element
DOM.on("#element", "click", e => {
  alert("Success");
});

DOM Components

React like components but without the hassle of JSX and with javascript syntactic sugar.

class TestComponent extends DOM.Component {
  render() {
    // Reference to this.props
    const props = this.props;

    const div = this.create("div", {className: "container"});
    div.create("p", props.greetings);
  }
}

DOM.render("#container", new TestComponent({
  greetings: "Hello World!"
}));

DOM Templates

Templates are not recommended yet as they depend on the template element. Which are not yet implemented everywhere yet.

const template = new DOM.Template("#template-id");
template.render("#container", {
  foo: "Hello",
  bar: "World"
});

// Create a template in the body of your HTML file
<template id="template-id">
  ${foo}
  <p>${bar}!</p>
</template>

// When rendered the example becomes

<div id="container>
    Hello
    <p>World</p>
</div>

Contributing

Just fork the project on github and create a pull request if you want to add a feature Or perhaps fix/edit a feature. You can also suggest fixes by filing an issue.

License

This project is licensed under the GPL-3.0 License - see the LICENSE.md file for details