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 allDom.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 returnBoolean
. Other method returnClassName
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 thedocument.getElementById(name)
function - Element.byQueryOne
Function({String} name[, {HtmlElement} element = null])
Similarly to calling theHtmlElement.querySelector(name)
function
If the element is null it is useddocument
object - Element.byQuery
Function({String} name[, {HtmlElement} element = null])
Similarly to calling theHtmlElement.querySelectorAll(name)
function
If the element is null it is useddocument
object - Element.byClassName
Function({String} name)
Similarly to calling thedocument.getElementsByClassName(name)
function - Element.byTag
Function({String} name)
Similarly to calling thedocument.getElementsByTagName(name)
function - Element.byName
Function({String} name)
Similarly to calling thedocument.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 theparent
property then the element will be appended to parent{Boolean} prepend
- if exists theparent
property andprepend
istrue
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 propertyinnerHTML
){Array} children
- children elements{*} child
- child element
- Element.css
Function({*} nodes, {String} name, {String} value) : {Dom.Collection}
Assign style propertyname
equal tovalue
for allnodes
- Element.css
Function({*} nodes, {Object} styles) : {Dom.Collection}
Assign multiplystyles
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)
Addevent
for nodes - Evn.remove
Function({*} nodes, {String} event, {Function} callback)
Removeevent
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])
Addevent
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
Usefixed = "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 asObject
Dom.Style
Function
Css property (HtmlElement.style) manipulations
- Style
Function( {HtmlElement} element, {String} name, {String | Number} value )
Addname
property toelement
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;"
});