dom7

What is dom7?

Dom7 is a minimalistic JavaScript library for DOM manipulation, designed to be used with frameworks like Framework7. It provides a simple and efficient API for common DOM operations such as element selection, event handling, and manipulation.

What are dom7's main functionalities?

Element Selection

Dom7 allows you to select elements using a simple syntax similar to jQuery. The `$$` function is used to select all `div` elements in the document.

const $$ = Dom7;
const elements = $$('div');

Event Handling

Dom7 provides an easy way to attach event listeners to elements. In this example, a click event listener is added to all `button` elements, which triggers an alert when any button is clicked.

const $$ = Dom7;
$$('button').on('click', function() {
  alert('Button clicked!');
});

Element Manipulation

Dom7 allows you to manipulate the content of elements. This example changes the text content of all `p` elements to 'New text content'.

const $$ = Dom7;
$$('p').text('New text content');

Class Management

Dom7 makes it easy to manage classes on elements. This example adds the class 'new-class' to all `div` elements.

const $$ = Dom7;
$$('div').addClass('new-class');

CSS Manipulation

Dom7 allows you to manipulate the CSS properties of elements. This example sets the text color of all `div` elements to red.

const $$ = Dom7;
$$('div').css('color', 'red');

Other packages similar to dom7

jquery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. Compared to Dom7, jQuery is more feature-rich and widely used, but also larger in size.

zepto

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. It is lightweight and designed for mobile devices. Compared to Dom7, Zepto is similar in its minimalistic approach but is more focused on mobile performance.

cash-dom

Cash is a small library for modern browsers that provides jQuery-style syntax for manipulating the DOM. It is designed to be fast and lightweight. Compared to Dom7, Cash offers a similar API but is optimized for performance and size.

README

Dom7

Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API

Dom7 - is the default DOM manipulation library built-in Framework7. It utilizes most edge and high-performance methods for DOM manipulation. You don’t need to learn something new, its usage is very simple because it has the same syntax as well known jQuery library with support of the most popular and widely used methods and jQuery-like chaining.

See Framework7 Dom7 documentation for usage examples and available methods.

Installation

Dom7 can be installed with NPM:

npm install dom7 --save

Usage

// import Dom7 and methods you need
import { $, addClass, removeClass, toggleClass, on } from 'dom7';

// install methods
$.fn.addClass = addClass;
$.fn.removeClass = removeClass;
$.fn.toggleClass = toggleClass;
$.fn.on = on;

// use
$('p').addClass('custom-paragraph');

$('p').on('click', function() {
  $(this).toggleClass('custom-paragraph');
});

Documentation

See full documenation here

Contribution

Yes please! See the contributing guidelines for details.

Licence

This project is licensed under the terms of the MIT license.

Changelog

3.0.0 - Released on November 9, 2020

• New modular export. Now it exports only main Dom7 $ function and all methods. No bundle ESM/CJS version
• Now Dom7 instances is the extension of Array, e.g. class Dom7 extends Array
  • Which means it has all Array instance methods and properties
• Iteration methods (like .each, .forEach, .map) now receive (el, index) arguments instead of (index, el) like in v2
• Improved TypeScript typings