TourGroup js

Master DOM manipulation effortlessly with chaining, just like native browser functions

Library Documentation

Why TourGroup

• Lightweight: Less than 10KB.
• Fast: invoke native function directly
• Supports ES module.
• Browser-native interface reduces learning curve.
• Extends Array, providing native array-related functions.
• Chainable interface for ease of use.

Getting Start

CDN:

• Traditional: https://cdn.jsdelivr.net/gh/bradhuang9999/[email protected]/dist/tourgroup.min.js
• ES Module: https://cdn.jsdelivr.net/gh/bradhuang9999/[email protected]/dist/tourgroup.esm.min.js

NPM:

npm install --save tourgroup.js

Example Code

import TourGroup from 'tourgroup.js';//ES Module
var tourGroup = TourGroup.at('div.class1').querySelectorAll('span.class2').has('i');
tourGroup.setAttribute('data-my-attr', 'true')
         .addEventListener('click', () => {console.log('clicked')});

Compare with jQuery

• Not support ES Module, need to include jQuery library from HTML first.
• Cause polution to global scope.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

• function interface is different from native
• implementation is more complex than native

var target = $('div.class1').find('span.class2').has('i');
target.attr('data-my-attr', 'true')
      .on('click', () => {console.log('clicked')});

Compare with Native

• Native is not chainable.
• Without some useful functions, such as toogleClass, addDelegateEventListener, etc.

var target = document.querySelectorAll('div.class1');
for(let div of target){
  let spans = div.querySelectorAll('span.class2');
  for(let span of spans){
    if(span.querySelector('i')){
      span.setAttribute('data-my-attr', 'true');
      span.addEventListener('click', () => {console.log('clicked')});
    }
  }
}

Travrese

• Travel up:
  • native: parentElement, closest
  • extend: parentUntil
• Travel horizon:
  • native: previousElementSibling, nextElementSibling
  • extend: next, nextUntil, prev, prevUntil, siblings
• Travel down
  • native: querySelectorAll, children
• Filtering Traversal
  • extend: not, has, first, last

Dom Manipulation

• Insert
  • native: insertAdjacentHTML, outerHTML, innerHTML, innerText, textContent
  • extend: appendHTML, prependHTML, afterHTML, beforeHTML
• Removal
  • extend: empty, remove, unwrap
• General Attributes
  • native: getAttribute, setAttribute, value
  • extend: css
• Class Attribute
  • extend: addClass, removeClass, toggleClass, hasClass
• Event Handling
  • native: addEventListener, removeEventListener
  • extend: trigger, addDelegateEventListener, addOneTimeEventListener

Build by yourself

# test
npm run test

# build
npm run build