dom-utility
DOM utility library
Install
Install with npm:
$ npm i --save dom-utility
Usage
const click = {};const styles = border: "1px solid red" padding: 10;let elm; // create element elm = ; // alternatively elm = document;elm;elmclassName = "first-class";elmstyleborder = stylesborder;elmstylepadding = stylespadding + "px";elm;document;
Short description
-
ownerDocument(HTMLElement)
: Returns the element's document owner. -
ownerWindow(HTMLElement)
: Returns the element's document window. -
activeElement()
: Returns focused element safely. -
offset(HTMLElement, [fixed = false])
: Return object{ top: Number, left: Number, height: Number, width: Number}
, fixed istrue
,false
or"auto"
. -
Collection
-
createCollection(element, [context])
: Create newCollection
class object. -
Page info
pageWidth()
pageHeight()
scrollTop()
scrollLeft()
viewportWidth()
viewportHeight()
browserBarHeight()
: Returns the height of the mobile browser application bar.
-
attribute(HTMLElement, name, [value])
: Set, get or removeHTMLElement
attribute. -
DOM HTMLElement
byId(selector)
: Wrapper fordocument.getElementById()
function.byQuery(selector, [element = document])
: Wrapper fordocument.querySelectorAll()
function.byQueryOne(selector, [element = document])
: Wrapper fordocument.querySelector()
function.byClassName(selector)
: Wrapper forgetElementsByClassName()
function.byTag(selector)
: Wrapper fordocument.getElementsByTagName()
function.byName(selector)
: Wrapper fordocument.getElementsByName()
function.createElement(tagName, [attributes, parentElement])
: Create new element, add attributes (events, styles too) and append to parent element. Returns the created element.append(HTMLElement, child)
clone(HTMLElement, [refIdsRenamedObject])
: Clone the element and remove or replace id attributes.empty(HTMLElement, [current = false])
: Remove all child nodes.css(element, name, [value])
:matches(HTMLElement, selector)
:HTMLElement.matches()
wrapper and polyfill (if the browser does not support method)closest(HTMLElement, selector)
:HTMLElement.closest()
wrapper and polyfill (if the browser does not support method)
-
Class name manipulations
addClass(element, className)
removeClass(element, className)
hasClass(element, className, [callback])
notClass(element, className, [callback])
toggleClass(element, className)
testToggleClass(dir, element, className)
-
HTMLElement style
styleName(name)
: Get valid vendor style name (for example opacity -> WebkitOpacity)setStyle(HTMLElement, name, value)
: Set element stylegetStyle(HTMLElement, name)
: Get element style
-
Events
support(name)
: Check supporttouch
,orientationChange
,passive
.ready(callback)
: Add the eventDOMContentLoaded
or call a function if the page was loaded.addNativeEvent(HTMLElement, name, callback, [capture = false])
removeNativeEvent(HTMLElement, name, callback, [capture = false])
addEvent(element, name, callback)
removeEvent(element, name, callback)
resize(callback)
: Add resize events (resize
,orientationchange
) to window element. Returns a function to remove eventscroll(callback)
: Add scroll event to window element. Returns a function to remove eventon(name, callback)
: Add event to window element. Returns a function to remove eventhover(element, enter, leave)
: Returns a function to remove event