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.
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.
Build
You will need Node.js installed on your system.
First, install all required dependencies
$ npm install
To build development version:
$ npm run build-dev
The resulting files are:
- buid/dom7.js
- buid/dom7.module.js
To build production (minified) version:
$ npm run build-prod
The resulting files are:
- dist/dom7.js
- dist/dom7.min.js
- dist/dom7.module.js