Isidom NPM | npm.io

Isidom

A browser side Javascript library to easily and intuitively manipulate the DOM and that can also help efficiently minify bundled apps.

Introduction

What is Isidom ?

The first goal of Isidom is to maximise minification of vanilla DOM manipulation. Isidom should replace method, chained methods and values for optimisation of minification. Isidom should stay simple and light. For lightweight, no errors should be thrown by Isidom, nor validation for input types.

Example code with vanilla Javascript :

let classes = [
    'myNewClass',
    'anotherClass',
    'andAgain'
    ]
document.getElementById('myId').classList.add(...classes)

// Will be minified like this :

document.getElementById('myId').classList.add(...['myNewClass','anotherClass','andAgain')
// That makes 89 characters.

The same example with Isidom :

let classes = ["myNewClass", "anotherClass", "andAgain"];
isi.$addClass(classes, isi.$byID("myID"));

// Will be minified like this :

a(["myNewClass", "anotherClass", "andAgain"], b("myID"));
// That makes 53 characters.

Be careful : the two functions (and their subfunctions) $addClass and $byId together use something like 450 characters (minified), so the example above would make about 500 characters. To be interesting in term of minification, theses function should be written at least 5 or 6 times. Note that subfunction are reused by all tools of Isidom. For small piece of code, Isidom not make sense, but with larger application, with several DOM manipulation, it can. By the way, Isidom stays simpler and shorter to write.

How to use

Use with Isidom file

Download dist/Isidom.js from GitHub and put it in a vendor path ( or a path of your choice ) and import it in your app like this :

import * as isi from "./path/to/isidom.js";

And use it in your code like that :

console.log(isi.$cssAlignContent);
// That will print align-content in console.

// or also :

isi.$addClass("myClass", isi.$byId("myId"));
// That will add the class 'myClass' to the element with the ID 'myId'.

Use with NPM

install :

npm install isidom

Then import Isidom in your entry point :

import * as isi from "isidom";

And use it in your code like that :

console.log(isi.$cssAlignContent);
// That will print align-content in console.

// or also :

isi.$addClass("myClass", isi.$byId("myId"));
// That will add the class 'myClass' to the element with the ID 'myId'.

Bundle with Rollup

This will bundle your app with only needed Isidom functions.

First install these dependencies :

rollup
@rollup/plugin-commonjs
@rollup/plugin-node-resolve

Create a rollup.config.js file with this content :

// This allows to import node-modules in the bundle.
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";

export default {
  input: "index.js", // your entry point.
  output: {
    file: "dist/index.js", // The bundled file.
    format: "iife", // This wraps the code.
    //format: 'esm', // This doesn't wrap the code.
    name: "MyModule",
  },
  plugins: [resolve(), commonjs()],
};

Then add a build script in your package.json :

"build": "npx rollup --config"

And run your build script.

Minify

Here is a Terser config that mangle names of constants and functions :

{
    "ecma": 5,
    "keep_classnames": false,
    "keep_fnames": false,
    "ie8": false,
    "module": false,
    "nameCache": null,
    "safari10": false,
    "toplevel": true,
    "warnings": false
}

Conventions

Constants

Non string constant variables are camel case named with \$ in front. eg. : \$window
String Constant variables are camel case named with _\$ in front. eg. : _\$undefined

Functions

Functions are camel case named with \$ in front. eg. : \$isArray

Arguments

The arguments in function are in this order : value, property, element.

Tools

\$isUndefined

Replacement for : typeof variable === 'undefined'

Parameters

variable any

Examples

// instead of this :
typeof variable === 'undefined'

// Use this :
if(isi.$isUndefined(variable)) { make something }

Returns boolean

\$isExisting

Returns true if selector matches an element in the document or in the specified parent element.

Returns false if selector matches no element in the document or in the specified parent element.

Parameters

query string
element HTMLElement (optional, default document)

Examples

if(isi.$isExisting(query)) { make something }

Returns boolean

\$isArray

Checks if input is an array or not and returns true or false.

Parameters

input any

Examples

if(isi.$isArray(input)) { make something }

Returns boolean

\$isCollection

Checks if input is an HTMLcollection and returns true or false.

Parameters

input any

Examples

if(isi.$isCollection(input)) { make something }

Returns boolean

\$isNodeList

Checks if input is a nodeList and returns true or false.

Parameters

input any

Examples

if(isi.$isNodeList(input)) { make something }

Returns boolean

\$isHtmlElement

Checks if input is an HTMLelement and returns true or false.

Parameters

input any

Examples

if(isi.$isHtmlElement(input)) { make something }

Returns boolean

\$selectorToArray

Returns an array of strings without '.' and '#' at start of strings.

The spaces at the start and end of the string will be removed.

A sole string will return an array with the string as the only item in the array.

Parameters

input (string | Array<string>)

Examples

let a = isi.$selectorToArray(input);

Returns Array<string>

\$selectorArrayToString

Returns a string concatened from an array of strings.

Each string from the array will be transformed in a class name if 'dot' is set to true. e.g. : 'myClass' becomes '.myClass', '.myClass' stays '.myClass'.

If 'dot' is set to false, any dot in class name will be removed. e.g. : '.myClass' becomes 'myClass'.

Spaces from start and end of strings will be removed.

Parameters

input (string | Array<string>) A string value will output the same string with or without '.' at start according to the argument 'dot' received. An array of strings will return a concatened string with or without '.' at start according to the argument 'dot' received.
dot boolean true will set separator as '.' and false will set separator as a space. (optional, default true)

Examples

let a = isi.$selectorArrayToString(input, false);

Returns string

\$forEach

Replacement based on for loop for the forEach native Javascript function. Note that \$forEach returns nothing.

Parameters

functionToExecute function This is the function that will be executed in the forEach loop.
element any This is the array, the nodeList, the HTMLCollection or the HTMLElement that will be processed by the for loop. If this is not an array, an HTMLCollection or a nodeList, the function will be executed once on the argument. Note : a string is an array of letters.

Examples

isi.$forEach(functionToExecute}, element)

// Or :

isi.$forEach(itemsInElement => {
    itemsInElement.doSomething
}, element)

// Note that outside of the DOM elements, the $forEach function does not act
// on the element itself.
// E.g. :

let myArray = [1, 2, 3]
isi.$forEach(item => {
    items = item * 2
}, myArray)

// Will not transform myArray in [2, 4, 6]. myArray will stay [1, 2, 3].
// To do that, this code will do the job :

let myArray = [1, 2, 3]
let outputArray = []
isi.$forEach(item => {
    outputArray.push(item * 2)
}, myArray)
console.log(outputArray) // this should output [2, 4, 6].

\$filterCollection

Filters an HTMLCollection and returns an array with the fitered HTMLElements. Returns null if nothing matches the filter.

Parameters

filter string The filter like in querySelector : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
collection HTMLCollection

Examples

let a = isi.$filterCollection("div.myClass input[name='myName']", myElement);

Returns (Array | null) An array of HTMLElement.

\$cleanSelector

Removes '.' and '#' from start of selectors names.

'.myClass' becomes 'myClass' and '#myId' becomes 'myId'.

The spaces at the start and end of the string will be removed.

Parameters

selector string

Examples

let a = isi.$cleanSelector(myElement);

Returns string

Selectors

\$byClass

Selects elements based on querySelectorAll(https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) Which returns a static nodeList of elements containing specified classes.

The result is not live : Change in the DOM do not affect the nodeList content. https://developer.mozilla.org/en-US/docs/Web/API/NodeList

The nodeList accepts native JS forEach.

Parameters

classList (string | Array<string>) The string and strings in array can start with a dot or not. The string and strings in array can have spaces at start an end.
element HTMLElement (optional, default document)

Examples

let a = isi.$byClass("classList", element);

Returns NodeList

\$byClassLive

Selects elements based on getElementsByClassName(https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) which returns an HTMLCollection of elements containing specified class.

An HTMLCollection is live : change in the DOM is reflected in the HTMLCollection.

An HTMLCollection doesn't accept forEach. Use other loops with it.

Parameters

classList (string | Array<string>) The string and strings in array can start with a dot or not. The string and strings in array can have spaces at start an end.
element HTMLElement (optional, default document)

Examples

let a = isi.$byClassLive("classList", element);

Returns HTMLCollection

\$byId

Returns an HTMLElement based on getElementById. Returns null if nothing is found.

Parameters

id string The string can start with a # or not. The string can have spaces at start an end.

Examples

let a = isi.$byId("id");

Returns (HTMLElement | null)

\$select

Selects elements based on querySelectorAll : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Which returns a nodeList of elements containing specified selectors.

A nodeList is static and is not live. It's like a snapshot of the DOM.

A nodeList accepts native JS forEach.

Parameters

query string
element element (optional, default document)

Examples

let query = "div.myClass, div.myOtherClass";
let a = isi.$select(query, element);

Returns NodeList

\$findParent

Replaces native JS property element.parentElement. (https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)

Returns an HTMLElement Which is the parent of the specified HTMLElement.

Parameters

element HTMLElement

Examples

let a = isi.$findParent(element);

Returns HTMLElement

\$findSiblings

Returns an array containing siblings HTMLElement from a specified HTMLElement.

Returns null if there are no siblings.

Parameters

element HTMLElement

Examples

let a = isi.$findSiblings(element);

Returns (Array | null)

\$findPreviousSiblings

Returns an array containing all previous HTMLElements siblings from a specified HTMLElement.

The closest sibling is the first of the array, then the second closest, and so on.

Returns null if there are no previous siblings found.

Parameters

element HTMLElement

Examples

let a = isi.$findPreviousSiblings(element);

Returns (Array | null)

\$findNextSiblings

Returns an array containing all next HTMLElements siblings from a specified HTMLElement.

Returns null if there are no next siblings found.

Parameters

element HTMLElement

Examples

let a = isi.$findNextSiblings(element);

Class manipulators

\$hasClass

Returns true if a class is present in the specified HTMLElement. Returns false if not.

Can only test one class at a time.

Parameters

className string The string can start with a dot or not with no influence on the output. The string can have spaces at start and end with no influence on the output.
element HTMLElement

Examples

isi.if($hasClass('className', element)) { make something }

Returns boolean

\$addClass

Adds a class or a list of classes to an HTMLElement or to all HTMLElements of a nodeList or an HTMLCollection.

If in the application, classes are added only on HTMLELement a few number of times, then the best for minification would be to not use \$addClass, but instead use this :

myElement[isi.$classList].add(class)
// Or :
myElement['classList'].add(class)

That's doesn't apply if $forEach or other classes and attributes manipulators are already used. In this case, the best is to use $addClass.

Parameters

classList (string | Array<string>)
element (HTMLElement | nodeList | HTMLCollection)

Examples

isi.$addClass("myClass", element);
isi.$addClass(["myClass", "myOtherClass"], element);

\$removeClass

Removes a class or a list of classes from an HTMLElement or from all HTMLElement of a nodeList or an HTMLCollection.

If in the application, classes are removed only on HTMLELement a few number of times, then the best for minification would be to not use \$removeClass, but instead use this :

myElement[$classList].remove(class)
// Or :
myElement['classList'].remove(class)

That's doesn't apply if $forEach or other classes and attributes manipulators are already used. In this case, the best is to use $removeClass.

Parameters

classList (string | Array<string>)
element (HTMLElement | nodeList | HTMLCollection)

Examples

isi.$removeClass("myClass", element);
isi.$removeClass(["myClass", "myOtherClass"], element);

\$toggleClass

Toggles a class or a list of classes of an HTMLElement or of all HTMLElements of a nodeList or an HTMLCollection.

If in application, classes are toggled only on HTMLELement a few number of times, then the best for minification would be to not use \$toggleClass, but instead use this :

myElement[$classList].toggle(class)
//Or :
myElement['classList'].toggle(class)

That's doesn't apply if $forEach or other classes and attributes manipulators are already used. In this case, the best is to use $toggleClass.

Parameters

classList (string | Array<string>)
element (HTMLElement | nodeList | HTMLCollection)

Examples

isi.$toggleClass("myClass", element);
isi.$toggleClass(["myClass", "myOtherClass"], element);

\$replaceClass

Replaces a class by another in an HTMLElement or in all HTMLElements of a nodeList or an HTMLCollection.

Based on native element.classList.replace that is not well supported : https://caniuse.com/#search=classlist%20replace. Until it's well supported, the best would be to use \$toggleClass on the two classes.

If in the application, classes are replaced only on HTMLELement a few number of times, then the best for minification would be to not use \$replaceClass, but instead use this :

myElement[$classList].replace('oldClass', 'newClass')
// Or :
myElement['classList'].replace('oldClass', 'newClass')

That's doen't apply if $forEach or other classes and attributes manipulators are already used. In this case, the best is to use $replaceClass.

Parameters

oldClass string
newClass string
element (HTMLElement | nodeList | HTMLCollection)

Examples

isi.$replaceClass("oldClass", "newClass", element);

Attribute manipulators

\$getAttribute

Shortcut for getAttribute vannilla JS method. Returns the specified attribute of the specified HTMLElement.

Parameters

attribute string
element HTMLElement

Examples

let a = isi.$getAttribute("attribute", element);

Returns string

\$getAttributes

Returns an object filled with all attributes and values of the specified HTMLElement.

Parameters

element HTMLElement

Examples

let a = $getAttributes(element)

// The returned object is like this :

{
    id: 'myId',
    class: 'myClass',
    type: 'range'
}

// The values can then be accessed like this :

a.id
a.class
a.type

// The data can be directly accessed like this :

let a = isi.$getAttributes(element).type

// But in this case, the best would be to use the $getAttribute function
// instead of $getAttributes.

Returns Object

\$setAttribute

Changes or adds specified value to the specified attribute of HTMLElement or all HTMLElement of the specified array, HTMLCollection or nodeList.

To be used like this :

isi.$setAttributes(value, attribute, element)

Parameters

value string
attribute string
element (HTMLElement | Array<HTMLElement> | nodeList | HTMLCollection)

Examples

isi.$setAttributes("John Doe", "name", element);

Data manipulators

\$getData

Returns the value of the specified data (E.g. : data-color) of the element.

If the specified data is not present in the HTMLElement, null is returned.

Parameters

data string The data without data- at start (E.g. : color 'refer' to 'data-color')
element HTMLElement

Examples

let a = isi.$getData(data, element);

// E.g. :

let a = isi.$getData("color", element);
// Will return the data-color of the Element.

Text manipulators

\$getText

Returns the text value of the specified HTMLElement.

Parameters

element HTMLElement

Examples

let a = isi.$getText(element);

Returns string

\$setText

Replaces the specified HTMLElement's text by the new specified one.

Parameters

text string
element HTMLElement

Examples

isi.$setText("text", element);

Value manipulators

\$getValue

Returns the value of an input element.

Parameters

input HTMLElement

Examples

let a = isi.$getValue(input);

Returns string

\$setValue

Sets the specified value of the specified input element.

Parameters

value (string | number | boolean)
input HTMLElement

Examples

isi.$setValue(value, input);

Style manipulators

\$getStyle

Gets the value of the specified style of the specified HTMLElement.

The property must be in JS camel case like : 'backgroundColor' for the 'background-color' CSS property.

If Isi's constants are used, the $js prefixed ones must be used. E.g. : $jsBackgroundColor instead of \$cssBackgroundColor.

Parameters

property string The style property : the css-property's constants can be used for maximum minification when used several times. In this case, the \$js prefixed constants must be used.
element HTMLElement

Examples

let a = $getStyle(property, element);

// E.g. :

let a = isi.$getStyle("backgroundColor", element);
// or
let a = isi.$getStyle($jsBackgroundColor, element);
// Will return the background-color of the element.

\$setStyle

Adds or replaces specified style's value to the specified HTMLElement.

The property must be in JS camel case like : 'backgroundColor' for the 'background-color' CSS property.

If Isi's constants are used, the $js prefixed ones must be used. E.g. : $jsBackgroundColor instead of \$cssBackgroundColor.

Parameters

value string
property string The style property : the css-property's constants can be used for maximum minification when used several times. In this case, the \$js prefixed constants must be used.
element HTMLElement

Examples

isi.$setStyle(value, property, element);

// E.g. :

isi.$setStyle("red", "backgroundColor", element);
// or
isi.$setStyle("red", $jsBackgroundColor, element);

// Will set the background-color of the element.

\$removeStyle

Removes the specified style of the specified HTMLElement.

The property must be in CSS like, E.g. : 'background-color'.

If Isi's constants are used, the $css prefixed ones must be used. E.g. : $cssBackgroundColor instead of \$jsBackgroundColor.

Parameters

property string The style property : the css-property's constants can be used for maximum minification when used several times. In this case, unlike $setStyle and $getStyle, \$css prefixed constants must be used.
element HTMLElement

Examples

isi.$removeStyle(property, element);

// E.g. :

isi.$setStyle("background-color", element);

// or

isi.$setStyle($cssBackgroundColor, element);

// Will remove the background-color style of the element.

Sizes values

\$getHeight

Returns the height in pixels of an HTMLElement. If no HTMLElement is specified, the height of the window is returned.

Parameters

element HTMLElement (optional, default null)

Examples

let a = isi.$getHeight(element);

Returns number

\$getWidth

Returns the width in pixels of an HTMLElement. If no HTMLElement is specified, or the element value is null, the width of the window is returned.

Parameters

element HTMLElement (optional, default null)

Examples

let a = isi.$getWidth(element);

Returns number

\$getOffset

Returns an object containing the top and left positions of a specified element relative to the top and left of the view.

Parameters

element HTMLElement

Examples

let offset = isi.$getOffset(element);
console.log(offset.top);
console.log(offset.left);

Returns Object The returned object contains the 'top' and 'left' properties that can be accessed.

Constants

Use

Use these constants only if they are used more than one time in code. E.G. :

with use of constant :

$setStyle("red", $jsBackgroundColor, firstElement);

Will be minified like this :

var b = "backgroundColor";
a("red", b, c);
// Total : 35 characters.

Without use of constant :

$setStyle("red", "backgroundColor", firstElement);

Will be minified like this :

a("red", "backgroundColor", c);
// Total : 28 characters.

for one occurrence of \\$jsBackgroundColor, that makes 35 characters with constant vs. 29 characters without constant. That's not so interesting.

But with two occurrences...

with use of constant :

$setStyle("red", $jsBackgroundColor, firstElement);
$setStyle("green", $jsBackgroundColor, secondElement);

Will be minified like this :

var b = "backgroundColor";
a("red", b, c);
a("red", b, d);
// Total : 47 characters.

Without use of constant :

$setStyle("red", "backgroundColor", firstElement);
$setStyle("green", "backgroundColor", secondElement);

Will be minified like this :

a("red", "backgroundColor", c);
a("red", "backgroundColor", d);
// Total : 56 characters.

For two occurrences of \\$jsBackgroundColor, that make 47 characters with constant vs. 56 characters without constant. That becomes interesting. And that will become more and more interesting with more occurrences. (59 characters vs. 84 for three occurrences, 71 vs. 112 for four occurrences, ...).

Common values

Use

\$ say non-string value.
_\$ say string value.

List

\$true = true

\$false = false

\$null = null

\$undefined = undefined

_\$true = 'true'

_\$false = 'false'

_\$null = 'null'

_\$undefined = 'undefined'

_\$emptyString = ''

_\$default = 'default'

_\$initial = 'initial'

_\$hidden = 'hidden'

_\$none = 'none'

_\$block = 'block'

_\$disabled = 'disabled'

_\$click = 'click'

_\$mouseup = 'mouseup'

_\$change = 'change'

_\$blur = 'blur'

_\$focus = 'focus'

_\$body = 'body'

_\$html = 'html'

_\$img = 'img'

_\$px = 'px'

_\$em = 'em'

_\$rem = 'rem'

_\$ms = 'ms'

_\$ok = 'ok'

_\$no = 'no'

_\$error = 'error'

_\$length = 'length'

_\$width = 'width'

Elements

Use

These values are useable for maximum minification. Example : \$window.content is the same as window.content but will be minified like this :

a.content;

List

\$window = window

\$document = document

$docElement = $document.documentElement

$docBody = $document.body

\$classList = 'classList'

CSS properties

Use

\$css prefix is for CSS properties used in CSS format :

element.removeProperty("background-color");

The Isidom way is :

element.removeProperty($cssBackgroundColor);

And will be minified like this :

element.removeProperty(a);

\$js prefix is for CSS properties used in JS format :

element.style.backgroundColor = "red";

The Isidom way is :

element.style.[$jsBackgroundColor] = 'red';

And will be minified like this :

element.style.[a] = 'red';

List

A

\$cssAlignContent = 'align-content'

\$jsAlignContent = 'alignContent'

\$cssAlignItems = 'align-items'

\$jsAlignItems = 'alignItems'

\$cssAlignSelf = 'align-self'

\$jsAlignSelf = 'alignSelf'

\$cssAll = 'all'

\$jsAll = 'all'

\$cssAnimation = 'animation'

\$jsAnimation = 'animation'

\$cssAppearance = 'appearance'

\$jsAppearance = 'appearance'

B

\$cssBackdropFilter = 'backdrop-filter'

\$jsBackdropFilter = 'backdropFilter'

\$cssBackfaceVisibility = 'backface-visibility'

\$jsBackfaceVisibility = 'backfaceVisibility'

\$cssBackground = 'background'

\$jsBackground = 'background'

\$cssBackgroundAttachment = 'background-attachment'

\$jsBackgroundAttachment = 'backgroundAttachment'

\$cssBackgroundBlendMode = 'background-blend-mode'

\$jsBackgroundBlendMode = 'backgroundBlend-mode'

\$cssBackgroundClip = 'background-clip'

\$jsBackgroundClip = 'backgroundClip'

\$cssBackgroundColor = 'background-color'

\$jsBackgroundColor = 'backgroundColor'

\$cssBackgroundImage = 'background-image'

\$jsBackgroundImage = 'backgroundImage'

\$cssBackgroundOrigin = 'background-origin'

\$jsBackgroundOrigin = 'backgroundOrigin'

\$cssBackgroundPosition = 'background-position'

\$jsBackgroundPosition = 'backgroundPosition'

\$cssBackgroundRepeat = 'background-repeat'

\$jsBackgroundRepeat = 'backgroundRepeat'

\$cssBackgroundSize = 'background-size'

\$jsBackgroundSize = 'backgroundSize'

\$cssBleed = 'bleed'

\$jsBleed = 'bleed'

\$cssBlockOverflow = 'block-overflow'

\$jsBlockOverflow = 'blockOverflow'

\$cssBorder = 'border'

\$jsBorder = 'border'

\$cssBorderTop = 'border-top'

\$jsBorderTop = 'borderTop'

\$cssBorderRight = 'border-right'

\$jsBorderRight = 'borderRight'

\$cssBorderBottom = 'border-bottom'

\$jsBorderBottom = 'borderBottom'

\$cssBorderLeft = 'border-left'

\$jsBorderLeft = 'borderLeft'

\$cssBorderTopStyle = 'border-top-style'

\$jsBorderTopStyle = 'borderTopStyle'

\$cssBorderRightStyle = 'border-right-style'

\$jsBorderRightStyle = 'borderRightStyle'

\$cssBorderBottomStyle = 'border-bottom-style'

\$jsBorderBottomStyle = 'borderBottomStyle'

\$cssBorderLeftStyle = 'border-left-style'

\$jsBorderLeftStyle = 'borderLeftStyle'

\$cssBorderCollapse = 'border-collapse'

\$jsBorderCollapse = 'borderCollapse'

\$cssBorderImage = 'border-image'

\$jsBorderImage = 'borderImage'

\$cssBorderRadius = 'border-radius'

\$jsBorderRadius = 'borderRadius'

\$cssBorderSpacing = 'border-spacing'

\$jsBorderSpacing = 'borderSpacing'

\$cssBottom = 'bottom'

\$jsBottom = 'bottom'

\$cssBoxDecorationBreak = 'box-decoration-break'

\$jsBoxDecorationBreak = 'box-decorationBreak'

\$cssBoxShadow = 'box-shadow'

\$jsBoxShadow = 'boxShadow'

\$cssBoxSizing = 'box-sizing'

\$jsBoxSizing = 'boxSizing'

\$cssBreakInside = 'break-inside'

\$jsBreakInside = 'breakInside'

C

\$cssCaptionSide = 'caption-side'

\$jsCaptionSide = 'captionSide'

\$cssCaretColor = 'caret-color'

\$jsCaretColor = 'caretColor'

\$cssClear = 'clear'

\$jsClear = 'clear'

\$cssClipPath = 'clip-path'

\$jsClipPath = 'clipPath'

\$cssColor = 'color'

\$jsColor = 'color'

\$cssColorAdjust = 'color-adjust'

\$jsColorAdjust = 'colorAdjust'

\$cssColumnCount = 'column-count'

\$jsColumnCount = 'columnCount'

\$cssColumnFill = 'column-fill'

\$jsColumnFill = 'columnFill'

\$cssColumnGap = 'column-gap'

\$jsColumnGap = 'columnGap'

\$cssColumnRule = 'column-rule'

\$jsColumnRule = 'columnRule'

\$cssColumnSpan = 'column-span'

\$jsColumnSpan = 'columnSpan'

\$cssColumnWidth = 'column-width'

\$jsColumnWidth = 'columnWidth'

\$cssColumns = 'columns'

\$jsColumns = 'columns'

\$cssContent = 'content'

\$jsContent = 'content'

\$cssCounterIncrement = 'counter-increment'

\$jsCounterIncrement = 'counterIncrement'

\$cssCounterReset = 'counter-reset'

\$jsCounterReset = 'counterReset'

\$cssCursor = 'cursor'

\$jsCursor = 'cursor'

D

\$cssDirection = 'direction'

\$jsDirection = 'direction'

\$cssDisplay = 'display'

\$jsDisplay = 'display'

E

\$cssEmptyCells = 'empty-cells'

\$jsEmptyCells = 'emptyCells'

F

\$cssFill = 'fill'

\$jsFill = 'fill'

\$cssFilter = 'filter'

\$jsFilter = 'filter'

\$cssFlex = 'flex'

\$jsFlex = 'flex'

\$cssFlexBasis = 'flex-basis'

\$jsFlexBasis = 'flexBasis'

\$cssFlexDirection = 'flex-direction'

\$jsFlexDirection = 'flexDirection'

\$cssFlexFlow = 'flex-flow'

\$jsFlexFlow = 'flexFlow'

\$cssFlexGrow = 'flex-grow'

\$jsFlexGrow = 'flexGrow'

\$cssFlexShrink = 'flex-shrink'

\$jsFlexShrink = 'flexShrink'

\$cssFlexWrap = 'flex-wrap'

\$jsFlexWrap = 'flexWrap'

\$cssFloat = 'float'

\$jsFloat = 'float'

\$cssFont = 'font'

\$jsFont = 'font'

\$cssFontDisplay = 'font-display'

\$jsFontDisplay = 'fontDisplay'

\$cssFontFamily = 'font-family'

\$jsFontFamily = 'fontFamily'

\$cssFontFeatureSettings = 'font-feature-settings'

\$jsFontFeatureSettings = 'fontFeatureSettings'

\$cssFontSize = 'font-size'

\$jsFontSize = 'fontSize'

\$cssFontSizeAdjust = 'font-size-adjust'

\$jsFontSizeAdjust = 'fontSizeAdjust'

\$cssFontStretch = 'font-stretch'

\$jsFontStretch = 'fontStretch'

\$cssFontStyle = 'font-style'

\$jsFontStyle = 'fontStyle'

\$cssFontVariant = 'font-variant'

\$jsFontVariant = 'fontVariant'

\$cssFontVariantNumeric = 'font-variant-numeric'

\$jsFontVariantNumeric = 'fontVariantNumeric'

\$cssFontWeight = 'font-weight'

\$jsFontWeight = 'fontWeight'

G

\$cssGridRow = 'grid-row'

\$jsGridRow = 'gridRow'

\$cssGridColumn = 'grid-column'

\$jsGridColumn = 'gridColumn'

\$cssGridTemplateColumns = 'grid-template-columns'

\$jsGridTemplateColumns = 'gridTemplateColumns'

\$cssGridTemplateRows = 'grid-template-rows'

\$jsGridTemplateRows = 'gridTemplateRows'

H

\$cssHangingPunctuation = 'hanging-punctuation'

\$jsHangingPunctuation = 'hangingPunctuation'

\$cssHeight = 'height'

\$jsHeight = 'height'

\$cssHyphens = 'hyphens'

\$jsHyphens = 'hyphens'

I

\$cssImageRendering = 'image-rendering'

\$jsImageRendering = 'imageRendering'

\$cssInitialLetter = 'initial-letter'

\$jsInitialLetter = 'initialLetter'

\$cssIsolation = 'isolation'

\$jsIsolation = 'isolation'

J

\$cssJustifyContent = 'justify-content'

\$jsJustifyContent = 'justifyContent'

L

\$cssLeft = 'left'

\$jsLeft = 'left'

\$cssLetterSpacing = 'letter-spacing'

\$jsLetterSpacing = 'letterSpacing'

\$cssLineClamp = 'line-clamp'

\$jsLineClamp = 'lineClamp'

\$cssLineHeight = 'line-height'

\$jsLineHeight = 'lineHeight'

\$cssListStyle = 'list-style'

\$jsListStyle = 'listStyle'

M

\$cssMargin = 'margin'

\$jsMargin = 'margin'

\$cssMarginTop = 'margin-top'

\$jsMarginTop = 'marginTop'

\$cssMarginLeft = 'margin-left'

\$jsMarginLeft = 'marginLeft'

\$cssMarginBottom = 'margin-bottom'

\$jsMarginBottom = 'marginBottom'

\$cssMarginRight = 'margin-right'

\$jsMarginRight = 'marginRight'

\$cssMaxHeight = 'max-height'

\$jsMaxHeight = 'maxHeight'

\$cssMaxWidth = 'max-width'

\$jsMaxWidth = 'maxWidth'

N

\$cssMinHeight = 'min-height'

\$jsMinHeight = 'minHeight'

\$cssMinWidth = 'min-width'

\$jsMinWidth = 'minWidth'

\$cssMixBlendMode = 'mix-blend-mode'

\$jsMixBlendMode = 'mixBlendMode'

O

\$cssObjectFit = 'object-fit'

\$jsObjectFit = 'objectFit'

\$cssObjectPosition = 'object-position'

\$jsObjectPosition = 'objectPosition'

\$cssOffsetAnchor = 'offset-anchor'

\$jsOffsetAnchor = 'offsetAnchor'

\$cssOffsetDistance = 'offset-distance'

\$jsOffsetDistance = 'offsetDistance'

\$cssOffsetPath = 'offset-path'

\$jsOffsetPath = 'offsetPath'

\$cssOffsetRotate = 'offset-rotate'

\$jsOffsetRotate = 'offsetRotate'

\$cssOpacity = 'opacity'

\$jsOpacity = 'opacity'

\$cssOrder = 'order'

\$jsOrder = 'order'

\$cssOrphans = 'orphans'

\$jsOrphans = 'orphans'

\$cssOutline = 'outline'

\$jsOutline = 'outline'

\$cssOutlineOffset = 'outline-offset'

\$jsOutlineOffset = 'outlineOffset'

\$cssOverflow = 'overflow'

\$jsOverflow = 'overflow'

\$cssOverflowAnchor = 'overflow-anchor'

\$jsOverflowAnchor = 'overflowAnchor'

\$cssOverflowWrap = 'overflow-wrap'

\$jsOverflowWrap = 'overflowWrap'

\$cssOverscrollBehavior = 'overscroll-behavior'

\$jsOverscrollBehavior = 'overscrollBehavior'

P

\$cssPadding = 'padding'

\$jsPadding = 'padding'

\$cssPaddingTop = 'padding-top'

\$jsPaddingTop = 'paddingTop'

\$cssPaddingRight = 'padding-right'

\$jsPaddingRight = 'paddingRight'

\$cssPaddingBottom = 'padding-bottom'

\$jsPaddingBottom = 'paddingBottom'

\$cssPaddingLeft = 'padding-left'

\$jsPaddingLeft = 'paddingLeft'

\$cssPageBreak = 'page-break'

\$jsPageBreak = 'pageBreak'

\$cssPerspective = 'perspective'

\$jsPerspective = 'perspective'

\$cssPerspectiveOrigin = 'perspective-origin'

\$jsPerspectiveOrigin = 'perspectiveOrigin'

\$cssPlaceItems = 'place-items'

\$jsPlaceItems = 'placeItems'

\$cssPointerEvents = 'pointer-events'

\$jsPointerEvents = 'pointerEvents'

\$cssPosition = 'position'

\$jsPosition = 'position'

Q

\$cssQuotes = 'quotes'

\$jsQuotes = 'quotes'

R

\$cssResize = 'resize'

\$jsResize = 'resize'

\$cssRight = 'right'

\$jsRight = 'right'

S

\$cssScrollBehavior = 'scroll-behavior'

\$jsScrollBehavior = 'scrollBehavior'

\$cssScrollMargin = 'scroll-margin'

\$jsScrollMargin = 'scrollMargin'

\$cssScrollPadding = 'scroll-padding'

\$jsScrollPadding = 'scrollPadding'

\$cssScrollSnapAlign = 'scroll-snap-align'

\$jsScrollSnapAlign = 'scrollSnapAlign'

\$cssScrollSnapStop = 'scroll-snap-stop'

\$jsScrollSnapStop = 'scrollSnapStop'

\$cssScrollSnapType = 'scroll-snap-type'

\$jsScrollSnapType = 'scrollSnapType'

\$cssScrollbar = 'scrollbar'

\$jsScrollbar = 'scrollbar'

\$cssScrollbarColor = 'scrollbar-color'

\$jsScrollbarColor = 'scrollbarColor'

\$cssScrollbarGutter = 'scrollbar-gutter'

\$jsScrollbarGutter = 'scrollbarGutter'

\$cssScrollbarWidth = 'scrollbar-width'

\$jsScrollbarWidth = 'scrollbarWidth'

\$cssShapeOutside = 'shape-outside'

\$jsShapeOutside = 'shapeOutside'

\$cssSpeak = 'speak'

\$jsSpeak = 'speak'

\$cssStroke = 'stroke'

\$jsStroke = 'stroke'

\$cssStrokeDasharray = 'stroke-dasharray'

\$jsStrokeDasharray = 'strokeDasharray'

\$cssStrokeDashoffset = 'stroke-dashoffset'

\$jsStrokeDashoffset = 'strokeDashoffset'

\$cssStrokeLinecap = 'stroke-linecap'

\$jsStrokeLinecap = 'strokeLinecap'

\$cssStrokeLinejoin = 'stroke-linejoin'

\$jsStrokeLinejoin = 'strokeLinejoin'

\$cssStrokeWidth = 'stroke-width'

\$jsStrokeWidth = 'strokeWidth'

T

\$cssTabSize = 'tab-size'

\$jsTabSize = 'tabSize'

\$cssTableLayout = 'table-layout'

\$jsTableLayout = 'tableLayout'

\$cssTextAlign = 'text-align'

\$jsTextAlign = 'textAlign'

\$cssTextAlignLast = 'text-align-last'

\$jsTextAlignLast = 'textAlignLast'

\$cssTextDecoration = 'text-decoration'

\$jsTextDecoration = 'textDecoration'

\$cssTextDecorationColor = 'text-decoration-color'

\$jsTextDecorationColor = 'textDecorationColor'

\$cssTextDecorationLine = 'text-decoration-line'

\$jsTextDecorationLine = 'textDecorationLine'

\$cssTextDecorationSkip = 'text-decoration-skip'

\$jsTextDecorationSkip = 'textDecorationSkip'

\$cssTextDecorationSkipInk = 'text-decoration-skip-ink'

\$jsTextDecorationSkipInk = 'textDecorationSkipInk'

\$cssTextDecorationStyle = 'text-decoration-style'

\$jsTextDecorationStyle = 'textDecorationStyle'

\$cssTextIndent = 'text-indent'

\$jsTextIndent = 'textIndent'

\$cssTextJustify = 'text-justify'

\$jsTextJustify = 'textJustify'

\$cssTextOverflow = 'text-overflow'

\$jsTextOverflow = 'textOverflow'

\$cssTextRendering = 'text-rendering'

\$jsTextRendering = 'textRendering'

\$cssTextShadow = 'text-shadow'

\$jsTextShadow = 'textShadow'

\$cssTextStroke = 'text-stroke'

\$jsTextStroke = 'textStroke'

\$cssTextTransform = 'text-transform'

\$jsTextTransform = 'textTransform'

\$cssTextUnderlinePosition = 'text-underline-position'

\$jsTextUnderlinePosition = 'textUnderlinePosition'

\$cssTop = 'top'

\$jsTop = 'top'

\$cssTouchAction = 'touch-action'

\$jsTouchAction = 'touchAction'

\$cssTransform = 'transform'

\$jsTransform = 'transform'

\$cssTransformOrigin = 'transform-origin'

\$jsTransformOrigin = 'transformOrigin'

\$cssTransformStyle = 'transform-style'

\$jsTransformStyle = 'transformStyle'

\$cssTransition = 'transition'

\$jsTransition = 'transition'

\$cssTransitionDelay = 'transition-delay'

\$jsTransitionDelay = 'transitionDelay'

\$cssTransitionDuration = 'transition-duration'

\$jsTransitionDuration = 'transitionDuration'

\$cssTransitionProperty = 'transition-property'

\$jsTransitionProperty = 'transitionProperty'

\$cssTransitionTimingFunction = 'transition-timing-function'

\$jsTransitionTimingFunction = 'transitionTimingFunction'

U

\$cssUnicodeBidi = 'unicode-bidi'

\$jsUnicodeBidi = 'unicodeBidi'

\$cssUnicodeRange = 'unicode-range'

\$jsUnicodeRange = 'unicodeRange'

\$cssUserSelect = 'user-select'

\$jsUserSelect = 'userSelect'

V

\$cssVerticalAlign = 'vertical-align'

\$jsVerticalAlign = 'verticalAlign'

\$cssVisibility = 'visibility'

\$jsVisibility = 'visibility'

W

\$cssWhiteSpace = 'white-space'

\$jsWhiteSpace = 'whiteSpace'

\$cssWidows = 'widows'

\$jsWidows = 'widows'

\$cssWidth = 'width'

\$jsWidth = 'width'

\$cssWillChange = 'will-change'

\$jsWillChange = 'willChange'

\$cssWordBreak = 'word-break'

\$jsWordBreak = 'wordBreak'

\$cssWordSpacing = 'word-spacing'

\$jsWordSpacing = 'wordSpacing'

\$cssWritingMode = 'writing-mode'

\$jsWritingMode = 'writingMode'

Z

\$cssZIndex = 'z-index'

\$jsZIndex = 'zIndex'

\$cssZoom = 'zoom'

\$jsZoom = 'zoom'

Todo

Add some shortcut function like $addClassToId for $addClass(classes, \\$byID('myID'))
... and some other functions, like $addClassToClass, $addTextToId, \\$getValueFromId,...

DOM manipulation browser class id selector attribute value data style text sibling

@everything-registry/sub-chunk-1936 @zalastax/nolb-isi

4 years ago

4 years ago

4 years ago

4 years ago

Isidom

Table of Contents

Introduction

What is Isidom ?

How to use

Use with Isidom file

Use with NPM

Bundle with Rollup

Minify

Conventions

Constants

Functions

Arguments

Tools

\$isUndefined

Parameters

Examples

\$isExisting

Parameters

Examples

\$isArray

Parameters

Examples

\$isCollection

Parameters

Examples

\$isNodeList

Parameters

Examples

\$isHtmlElement

Parameters

Examples

\$selectorToArray

Parameters

Examples

\$selectorArrayToString

Parameters

Examples

\$forEach

Parameters

Examples

\$filterCollection

Parameters

Examples

\$cleanSelector

Parameters

Examples

Selectors

\$byClass

Parameters

Examples

\$byClassLive

Parameters

Examples

\$byId

Parameters

Examples

\$select

Parameters

Examples

\$findParent

Parameters

Examples

\$findSiblings

Parameters

Examples

\$findPreviousSiblings

Parameters

Examples

\$findNextSiblings

Parameters

Examples

Class manipulators

\$hasClass

Parameters

Examples

\$addClass

Parameters

Examples

\$removeClass