Dom7 - Custom DOM Library

Framework7 doesn’t use any third party library, even for DOM manipulation. It has its own custom DOM7 - DOM library that 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.

To start use it there is a Dom7 global window function, but we recommend to assign it to some local variable with more handy name, like $$, but not to “$” to prevent confilicts with other libraries like jQuery or Zepto:

1. //Export DOM7 to local variable to make it easy accessable
2. var $$ = Dom7;

Usage Example

Just everything you already know:

1. $$('.something').on('click', function (e) {
2. $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
3. });

Available Methods

All these methods works almost in the same way and with the same arguments as in jQuery or Zepto:

1. $$(window).trigger('resize');
Classes
.addClass(className) Add class to elements 1. //Add “intro” class to all paragraphs 2. $$(‘p’).addClass(‘intro’);
.removeClass(className) Remove specified class 1. //Add “big” class from all links with “big” class 2. $$(‘a.big’).removeClass(‘big’);
.hasClass(className) Determine whether any of the matched elements are assigned the given class: 1. <p class=”intro”>Lorem ipsum…</p> 1. $$(‘p’).hasClass(‘intro’); //-> true
.toggleClass(className) Remove (if class is present) or add (if not) one or more classes from each element in the set of matched elements: 1. <!— Before —> 2. <h1 class=”small”>This is first title</h1> 3. <h2>This is subtitle</h2> 1. $$(‘h1, h2’).toggleClass(‘small’); 1. <!— After —> 2. <h1>This is first title</h1> 3. <h2 class=”small”>This is subtitle</h2>
Attributes and properties
.prop(propName) Get property value: 1. var isChecked = $$(‘input’).prop(‘checked’);
.prop(propName, propValue) Set single property value: 1. //Make all checkboxes checked 2. $$(‘input[type=”checkbox”]’).prop(‘checked’, true);
.prop(propertiesObject) Set multiple properties: 1. $$(‘input’).prop({ 2. checked: false, 3. disabled: true 4. })
.attr(attrName) Get attribute value: ``` 1. Google