1.0.6 • Published 7 years ago
dom-manipulator v1.0.6
Dom Manipulator
The Dom Manipulator allows you to manipulate HTML elements simply and objectively without unnecessary attributes.
Using Dom Manipulator you can:
- Find elements using the class, id, tagname or attribute;
- Set new class or remove a class;
- Obtain a object using parse form function.
Installation
Using like a library
$ git clone https://github.com/mpahenrique/dom-manipulator.git<body>
...
...
<script src="path/to/dom-manipulator/index.js"></script>
</body>Using like a module
$ npm install dom-manipulator --saveUsage (Getting Dom Manipulator method)
Using like a library
dm.somedmMethod('#my-element'); // When using like a library dm is global (window.dm)Usage
Using like a module
var dm = require('dom-manipulator');Methods
'use strict';
var _elm = dm.getElm('#my-element')
// ==> Get the element {optional: ['all'(boolean: return all selectors), 'key'(integer: select the position), 'searchIn'(string: search the element inside a node)]}
dm.createElm(obj)
// ==> This function, create a new element, they works with a object using this paramers:
// 'elm': passing the new element
// 'content': insert a text inside this new element
// 'insertAfter': insert the new element in a existing element (you can pass the id element or the object element)
// 'insertBefore': same as insertAfter, but they insert in the beginning of the existing element
// 'attributes': insert attributes in the new element. It as a object.
// Ex: 'attributes' : {
// 'tabindex': 1,
// 'style': {
// 'display':'block',
// 'width': '200px',
// 'height': '100px'
// }
// }
dm.toggleClass(_elm,'classToggle')
// ==> This function, verify if 'classToToggle' existy, in true case, they remove the class, otherwise add the class
dm.hasClass(_elm,'verifyClass')
// ==> Return a boolean if the element has class
dm.addClass(_elm,'classRemove')
// ==> Add the class
dm.removeClass(_elm,'classRemove')
// ==> Remove the class
dm.parseForm('#form-element')
// ==> Return a object with name (as key) and the value of elements
dm.byAttr('tabindex')
// ==> Return elements with the atrribute. {optional: ['value'(string: search the attribute with the same value), 'elms(DOMObject: search elements with the attribute in a element father)']}
dm.bindElm(_elm, 'click', callback)
// ==> Binding a element with a event
dm.setStyleProp(_elm, 'border', '20px solid red')
// ==> Setting a style inline to element and you cam pass the style properties as a Object, like as: {'border': '2px solid yellow', 'margin-top': '20px', 'overflow':'auto'}. {optional: ['time'(integer: pass a time, in milliseconds, to call the callback), 'onFinish'(Function: A Callback)]}
dm.getUrlParam()
// ==> Get the url params and return as a Object {optional: ['url'(string: pass a url with params to get the Object return, by default they get window.location)]}
dm.removeElm(_elm) /* or */ dm.removeElm('.my-other-element');
// ==> Remove the elements {optional: ['start'(Integer: Pass the index to start the remove itens)]}