How Dom7 Works

How Dom7 Works

Under the Hood: How Dom7 Wraps the DOM

Dom7 163 is one ES module exporting 85 functions ($, addClass, on, shortcuts such as click...). Its core is a subclass of Array:

The Dom7 class in node_modules/dom7/dom7.esm.js, version 4.0.6JavaScript

class Dom7 extends Array {
  constructor(items) {
    if (typeof items === 'number') {
      super(items);
    } else {
      super(...(items || []));
      makeReactive(this);
    }
  }
}

$(selector) runs querySelectorAll, removes duplicates and wraps the result in a Dom7; a string with < and > is parsed through innerHTML on a temporary parent chosen from its first tag (tbody for <tr>). $.fn is Dom7.prototype, and because every method is a separate export, Framework7 572,986 's shared/dom7.js copies each onto $.fn in a loop, while your code can import only what it needs.

Events are native. .on() calls addEventListener and records the listener on the element in dom7Listeners so that .off() can find it again. A delegated listener tests the target with .is(selector), then calls the listener for every matching ancestor too, so nested matches each get a call. .trigger() dispatches a CustomEvent with the extra arguments in detail, and also parks them on the target as dom7EventData, which is how they arrived as the handler's second parameter in Dom7 Basics.

MENU