dom.js

A JavaScript library that encapsulate DOM methods and makes more easy DOM manipulations.

Usage no npm install needed!

<script type="module">
  import domJs from 'https://cdn.skypack.dev/dom.js';
</script>

README

Dom.js Build Status

A JavaScript library that encapsulate DOM methods and makes more easy DOM manipulations.

Quick start

Run the following command in a shell:

npm install dom.js --save

This will install the DomJs library files in your project's node_modules folder.

Refer to these files by adding a a <script> element into your HTML pages:

<script src="node_modules/dom.js/dist/d.min.js"></script>

Examples

Creating elements:

<body>
  <div class="container"></div>
  <script>
    // find the container element using selector expression.
    var container = djs('.container');

    // create an h1 element and append into container.
    container.create('<h1>Hello World</h1>');
  </script>
</body>

Creating elements using template literal (ES2015):

<body>
  <div class="container"></div>
  <script>
    // find the container element using selector expression.
    let container = djs('.container');

    let jedis = [
      {name: 'Luke Skywalker'},
      {name: 'Yoda'}
    ];

    let jedisHtml = djs`
      <ul>
        ${jedis.map((jedi) => {
          // Using $ to escape the html.
          return djs`<li>${jedi.name}</li>`
        })}
      </ul>
    `
    // create the element and append into container.
    container.create(jedisHtml);
  </script>
</body>

API

djs(selector):

Description Find an element using query selector.

Parameters:

  • selector(String): A selector expression to find in the DOM.

Return DJS element that represent an element found in the DOM.

Example:

var element = djs('.my-class');

djs`template`:

Description Create a DJS element and return it.

Parameters:

  • template (Template Literal): A HTML Template Literal that represent an element to create.

Return DJS element with the element created.

Example:

var element = djs`<h1>Hello World</h1>`;

Query

djs.find(selector):

Description Find an element using query selector.

Parameters:

  • selector(String): A selector expression to find in the DOM.

Return DJS element that represent an element found in the DOM.

Example:

var element = djs.find('.my-class');

djs.findAll(selector):

Description Find all elements in the DOM using query selector.

Parameters:

  • selector(String): A selector expression to find in the DOM.

Return NodeList that represent an element found in the DOM.

Example:

var elements = djs.findAll('div');

Manipulation

djs.create(template):

Description Create a DJS element and return it.

Parameters:

  • template (String | Template Literal): A HTML Template Literal or string that represent an element to create.

Return DJS element with the element created.

Example:

var element = djs.create(`<h1>Hello World</h1>`);

djs.remove(node):

Description Remove the element from the DOM.

Parameters:

Example:

var element = djs('body').create('<h1>Hello World</h1>');
djs.remove(element);

Styles

djs.css(node, cssStyles):

Description Add to an element the styles from cssStyles and prefix css properties when it needs.

Parameters:

Return DJS element | Node with the element edited. Return null if it is not a valid node (null, undefined, CommentNode, TextNode)

Example:

var element = djs.create(`<h1>Hello World</h1>`);

djs.css(element, {
  backgrounColor: 'red'
});

djs.addClass(node, className):

Description Add to an element the CSS classes passed into className.

Parameters:

  • node(DJS element | Node) A node element to add css classes.
  • className(String | Array) A string or array of classes to be added.

Return DJS element | Node with the element edited. Return null if it is not a valid node (null, undefined, CommentNode, TextNode)

Example:

var element = djs.create(`<h1>Hello World</h1>`);

djs.addClass(element, ['my-class']);

djs.removeClass(node, classToRemove):

Description Remove from an element the CSS class passed into classToRemove.

Parameters:

  • node(DJS element | Node) A node element to remove the css class.
  • classToRemove(String) A string of class to be removed.

Return DJS element | Node with the element edited. Return null if it is not a valid node (null, undefined, CommentNode, TextNode)

Example:

var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);

djs.removeClass(element, 'class-to-remove');

djs.toggleClass(node, className, force):

Description Toggle the CSS class passed as className from an element.

Parameters:

  • node(DJS element | Node) A node element to toggle the css class.
  • className(String) A string of class to be toggled.
  • force(Boolean) When is false and class is not into element, the method does not add the class. When the class is into element and is truthy, the methdo does not remove the class.

Return DJS element | Node with the element edited. Return null if it is not a valid node (null, undefined, CommentNode, TextNode)

Example:

var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);

djs.toggleClass(element, 'class-to-remove');

djs.containsClass(node, className):

Description Verify if the ````className``` is into element or not.

Parameters:

  • node(DJS element | Node) A node element verify if it contains the css class.
  • className(String) A string of class to be checked.

Return (Boolean) Return true when the class is in element otherwise return false

Example:

var element = djs.create(`<h1 class="my-class">Hello World</h1>`);

djs.containsClass(element, 'my-class'); // true

DJS element

Description An DJS element is a Node element that has also the djs methods.

Methods

Element query

element.find(selector):

Description Find an element using query selector and element as the root node.

Parameters:

  • selector(String): A selector expression to find in the DOM.

Return DJS element that represent an element found in the DOM.

Example:

var body = djs('body');
body.find('.my-class');

element.findAll(selector):

Description Find all elements in the DOM using query selector and element as the root node.

Parameters:

  • selector(String): A selector expression to find in the DOM.

Return NodeList that represent an element found in the DOM.

Example:

var body = djs('body');
body.findAll('.my-class');

Element manipulation

element.create(template):

Description Create a DJS element, return it and append into element.

Parameters:

  • template (String | Template Literal): A HTML Template Literal or string that represent an element to create.

Return DJS element with the element created.

Example:

var body = djs('body');
body.create('<h1>Hello World</h1>');

element.remove():

Description Remove the element from the DOM.

Return DJS element with the element removed.

Example:

var element = djs('body').create('<h1>Hello World</h1>');
element.remove();

Element styles

element.css(cssStyles):

Description Add to the element the styles from cssStyles and prefix css properties when it needs.

Parameters:

Return DJS element | Node with the element edited.

Example:

var element = djs.create(`<h1>Hello World</h1>`);

element.css({
  backgrounColor: 'red'
});

element.addClass(className):

Description Add to an element the CSS classes passed into className.

Parameters:

  • className(String | Array) A string or array of classes to be added.

Return DJS element | Node with the element edited. Return null if it is not a valid node (null, undefined, CommentNode, TextNode)

Example:

var element = djs.create(`<h1>Hello World</h1>`);

element.addClass(['my-class']);

element.removeClass(classToRemove):

Description Remove from an element the CSS class passed into classToRemove.

Parameters:

  • classToRemove(String) A string of class to be removed.

Return DJS element | Node with the element edited. Return null if it is not a valid node (null, undefined, CommentNode, TextNode)

Example:

var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);

element.removeClass('class-to-remove');

element.toggleClass(className, force):

Description Toggle the CSS class passed as className from an element.

Parameters:

  • className(String) A string of class to be toggled.
  • force(Boolean) When is false and class is not into element, the method does not add the class. When the class is into element and is truthy, the methdo does not remove the class.

Return DJS element | Node with the element edited. Return null if it is not a valid node (null, undefined, CommentNode, TextNode)

Example:

var element = djs.create(`<h1 class="class-to-remove">Hello World</h1>`);

element.toggleClass('class-to-remove');

element.containsClass(className):

Description Verify if the ````className``` is into element or not.

Parameters:

  • className(String) A string of class to be checked.

Return (Boolean) Return true when the class is in element otherwise return false

Example:

var element = djs.create(`<h1 class="my-class">Hello World</h1>`);

element.containsClass('my-class'); // true