light-dom-selector

Extra lightweight DOM selector helper

Usage no npm install needed!

<script type="module">
  import lightDomSelector from 'https://cdn.skypack.dev/light-dom-selector';
</script>

README

light-dom-selector npm downloads GitHub license npm version

Lightweight dom selector by simple symbols that outputs an SelectorFn instance.

Support Version IE 6+

Install

npm install light-dom-selector
// This module is only offered as a ES Module
import $ from "light-dom-selector";

// Common JS
const $ = require("light-dom-selector")

Select Dom

Note: if the dom is not exist, {element: undefined, constructor: Object} this is the result.

getElementById

$("#app")
// => SelectorFn {element: Element, constructor: Object}

getElementsByClassName

$(".app")
// => SelectorFn {element: Element, constructor: Object}

querySelectorAll

$("*.app h1")
// => SelectorFn {element: Element, constructor: Object}

getElementsByName

$("~h1")
// => SelectorFn {element: Element, constructor: Object}

getElementsByTagName

$("@app")
// => SelectorFn {element: Element, constructor: Object}

Event

on

you can create event by on method.

$("#app").on("click", function() {
  /// event
});

$("#app").on("click mouseover", function() {
  /// event
});

remove event by off method.

function clickFn() {
    console.log(this);
}
$("#app").on("click", clickFn); // addEventListener

$("#app").off("click", clickFn); // removeEventListener