rvjs-dom

HTML Dom basic manipulations

Usage no npm install needed!

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

README

rvjs-dom

HTML Dom basic manipulations

import * as Dom from "rvjs-dom";

Dom.ClassName

Object
Class name html nodes manipulations

  • ClassName.set

    Function( {String | HTMLCollection | Dom.Collection} nodes, {String} classes ) : {Dom.ClassName}
    Set class or classes for nodes

  • ClassName.add

    Function( {String | HTMLCollection | Dom.Collection} nodes, {String} classes) : {Dom.ClassName}
    Add class or classes for nodes

  • ClassName.pick

    Function( {Boolean} add, ...args )
    Add or Remove class classes for nodes, the first argument indicates a function further arguments are passed to the function

  • ClassName.remove

    Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes) : {Dom.ClassName}
    Remove class or classes for nodes

  • ClassName.toggle

    Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes) : {Dom.ClassName}
    Toggle class or classes for nodes

  • ClassName.has

    Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes[, {Function} callback]) : {Boolean}
    Check class or classes assigned for nodes
    If classes is found and $callback arguments is function then $callback function will be called

  • ClassName.not

    Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes[, {Function} callback]) : {Boolean}
    Check class or classes is not assigned for nodes
    If classes is not found and $callback arguments is function then $callback function will be called

  • ClassName.dispatch

    Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes, {Function} callback) : {Dom.ClassName | Boolean}
    Short method for all Dom.ClassName methods:
    : class-name - set
    + class-name - add
    - class-name - remove
    ~ class-name - toggle
    ? class-name - has
    ! class-name - not
    ? and ! used $callback method and return Boolean. Other method return ClassName object

Dom.Collection

Class
Create html nodes collection

  • Collection

    Class new Dom.Collection({*} nodes[, {Boolean} isWindow = false])
    Create new Collection

  • Collection.make

    Function({*} nodes[, {Boolean} isWindow = false])
    Similarly to new Collection( ... args ) but you may use Collection instance for the nodes argument

Collection instance

  • constructor

    Function({*} nodes[, {Boolean} isWindow = false])
    New instance

  • fill

    Function({*} nodes[, {Boolean} isWindow = false])
    Add new nodes

  • forEach

    Function({Function} callback)
    Similarly to Array.prototype.forEach

  • map

    Function({Function} callback)
    Similarly to Array.prototype.map, return new Collection instance

import {Collection, Element} from "rvjs-dom";

let collection_1 = new Collection(document.body);
let collection_2 = new Collection(['body', 'footer', 'header, #head', Element.byId("app")]);
let collection_3 = new Collection(Element.byQuery("div.class-name")); // Similarly to
let collection_4 = new Collection("div.class-name");

// collection_5 === collection_1
let collection_5 = Collection.make(collection_1);

Dom.Element

Object
Default html nodes manipulations

  • Element.byId

    Function({String} name) : {HtmlElement | null}
    Similarly to calling the document.getElementById(name) function

  • Element.byQueryOne

    Function({String} name[, {HtmlElement} element = null])
    Similarly to calling the HtmlElement.querySelector(name) function
    If the element is null it is used document object

  • Element.byQuery

    Function({String} name[, {HtmlElement} element = null])
    Similarly to calling the HtmlElement.querySelectorAll(name) function
    If the element is null it is used document object

  • Element.byClassName

    Function({String} name)
    Similarly to calling the document.getElementsByClassName(name) function

  • Element.byTag

    Function({String} name)
    Similarly to calling the document.getElementsByTagName(name) function

  • Element.byName

    Function({String} name)
    Similarly to calling the document.getElementsByName(name) function

  • Element.create

    Function({Object} properties) : {HtmlElement} Create HtmlElement
    Properties:

    • {String} name - tag name, default "div", you can use selectors, e.g. "div#id.class-name"
    • {String} className - class name
    • {String} id - id attribute
    • {String} nameSpace - name space
    • {Object} attrs - html attributes
    • {Object} props - properties for element
    • {Object} data - data attributes for element
    • {Object} events - events for element
    • {HtmlElement} parent - if exists the parent property then the element will be appended to parent
    • {Boolean} prepend - if exists the parent property and prepend is true then the element will be prepended to parent
    • {String | Function} text - append TextNode to the created HtmlElement
    • {String | Function} html - set html text to the created HtmlElement (used property innerHTML)
    • {Array} children - children elements
    • {*} child - child element
  • Element.css

    Function({*} nodes, {String} name, {String} value) : {Dom.Collection}
    Assign style property name equal to value for all nodes

  • Element.css

    Function({*} nodes, {Object} styles) : {Dom.Collection}
    Assign multiply styles properties

Dom.Evn

Object
Add and remove default events for html nodes

  • Evn.support

    Object {}
    Mixed support values

  • Evn.add

    Function({*} nodes, {String} event, {Function} callback)
    Add event for nodes

  • Evn.remove

    Function({*} nodes, {String} event, {Function} callback)
    Remove event for nodes

  • Evn.resize

    Function({Function} callback[, {Function} removeCallback])
    Add resize event for window object

  • Evn.scroll

    Function({Function} callback[, {Function} removeCallback])
    Add scroll event for window object

  • Evn.on

    Function({String} event, {Function} callback[, {Function} removeCallback])
    Add event for window object

  • Evn.hover

    Function({*} nodes, {Function} enterCallback, {Function} leaveCallback[, {Function} removeCallback])
    Add mouseenter and mouseleave events for nodes

  • Evn.ready

    Function({Function} eventCallback)
    Add callback for DOMContentLoaded event

  • Evn.native

    Function({Boolean | String} add, {HtmlElement} node, {String} event, {Function} callback[, {*} useCapture=false])
    Use native event listener for fast

Dom.Offset

  • Offset

    Function({HtmlElement} element[, {Boolean} fixed = false]) : {Object}
    Get offset of html node
    Use fixed = "auto" for detect fixed element
    Return object with properties:

    • {Number} width - HtmlElement width content
    • {Number} height - HtmlElement height content
    • {Number} top - HtmlElement offset top of viewport
    • {Number} left - HtmlElement offset left of viewport

Dom.Page

Object
Page page (browser window) offset properties: top, left, width, height, etc.

  • {Number} width - document width
  • {Number} height - document height
  • {Number} top - document top scroll
  • {Number} left - document left scroll
  • {Number} viewportWidth - document viewport width
  • {Number} viewportHeight - document viewport height
  • {Function} all() - get all properties as Object

Dom.Style

Function
Css property (HtmlElement.style) manipulations

  • Style

    Function( {HtmlElement} element, {String} name, {String | Number} value )
    Add name property to element style

import {Element, Style} from "rvjs-dom";

Style( Element.byId("app"), "--red", "#900");
Style( Element.byId("app"), "border", "1px solid var(--red)" );

Dom.StyleSheets

Function
Add new style sheet rules for page
Return Void

  • Dom.StyleSheets

    Function( {String} selector, {String} rules )

  • Dom.StyleSheets

    Function( {Object} rules )
    Add multiply rules

import {StyleSheets} from "rvjs-dom";

StyleSheets("div.class-name, div.class-name > span", "border: 1px solid red; float: left;");
StyleSheets({ 
    "div.red": "color: #900;",
    "div.class-name": "float: left;"
});